今天整理文件时找到了之前做的一些js练习，里面的带缩略图的图片轮换正好跟我之前做的banner轮播有点像。就又看了一遍，添加了一些注释。
效果如下：
1 &!DOCTYPE html&
2 &html lang="en"&
&meta charset="utf-8"&
&title&带缩略图的图片轮换&/title&
&style type="text/css"&
body,p,ul{padding: 0;margin: 0;}
img{border: 0; vertical-align: middle;}
width: 500px;
margin: 50px auto;
background: #000;
color: white;
font-size: 24px;
line-height: 24px;
text-align: center;
position: relative;
width: 500px;
height: 400px;
margin-top: 30px;
background: #5d5151;
text-align: center;
width: 40px;
height: 40px;
position: absolute;
top: 175px;
font-size: 20px;
text-decoration: none;
line-height: 40px;
text-align: center;
color: #fff;
background: #ffc107;
border-radius: 50%;
opacity: 0.6;
opacity: 1;
transform: scale(1.2);
left: 60px;
right: 60px;
width: 400px;
height: 300px;
margin-top: 30px;
width: 120px;
list-style: none;
margin: 10px auto;
width: 20px;
height: 20px;
border-radius: 50%;
background: #928c8c;
float: left;
margin-left: 10px;
position: relative;
#btn .active {
background: #ffc107;
#btn img {
width: 100px;
height: 100px;
border: 5px solid #fff;
position: absolute;
bottom: 30px;
display: none;
left: -40px;
&script type="text/javascript"&
<span style="color: #0
window.onload = function () {
<span style="color: #1
//大图路径
<span style="color: #2
var arrUrl = ['img/bassist.jpg', 'img/concert.jpg', 'img/crowd.jpg', 'img/guitarist.jpg'];
<span style="color: #3
//缩略图路径
<span style="color: #4
var arrlitUrl = ['img/thumbnail_bassist.jpg', 'img/thumbnail_concert.jpg', 'img/thumbnail_crowd.jpg', 'img/thumbnail_guitarist.jpg'];
<span style="color: #5
<span style="color: #6
var num = <span style="background-color: #f5f5f5; color: #;
<span style="color: #7
<span style="color: #8
var Oimg = document.getElementById('img');
<span style="color: #9
var Oul = document.getElementById('btn');
<span style="color: #0
var Oli = Oul.getElementsByTagName('li');
<span style="color: #1
//前一张，后一张
<span style="color: #2
var Oprev = document.getElementById('prev');
<span style="color: #3
var Onext = document.getElementById('next');
<span style="color: #4
<span style="color: #5
<span style="color: #6
// Oimg[num].src = arrUrl[num];
<span style="color: #7
// Olitimg[num].src = arrlitUrl[num];
<span style="color: #8
<span style="color: #9
//小圆圈即li标签颜色样式
<span style="color: #0
function turnactive(nu) {
<span style="color: #1
for (var i = <span style="background-color: #f5f5f5; color: #; i & arrUrl. i++) {
<span style="color: #2
Oli[i].className = '';
<span style="color: #3
<span style="color: #4
Oli[nu].className = 'active';
<span style="color: #5
<span style="color: #6
//前一张点击事件
<span style="color: #7
Oprev.onclick = function () {
<span style="color: #8
<span style="color: #9
if (num == -<span style="background-color: #f5f5f5; color: #) {
<span style="color: #0
num = arrUrl.length - <span style="background-color: #f5f5f5; color: #;
<span style="color: #1
<span style="color: #2
Oimg.src = arrUrl[num];
<span style="color: #3
turnactive(num);
<span style="color: #4
<span style="color: #5
//后一张点击事件
<span style="color: #6
Onext.onclick = function () {
<span style="color: #7
<span style="color: #8
if (num == arrUrl.length) {
<span style="color: #9
num = <span style="background-color: #f5f5f5; color: #;
<span style="color: #0
<span style="color: #1
Oimg.src = arrUrl[num];
<span style="color: #2
turnactive(num);
<span style="color: #3
<span style="color: #4
//给每个小圆圈li添加事件
<span style="color: #5
for (var i = <span style="background-color: #f5f5f5; color: #; i & arrlitUrl. i++) {
<span style="color: #6
//给每个小圆圈li添加索引
<span style="color: #7
Oli[i].index =
<span style="color: #8
//每当鼠标移入li标签时，显示对应的缩略图
<span style="color: #9
Oli[i].onmouseover = function () {
<span style="color: #0
this.getElementsByTagName('img')[<span style="background-color: #f5f5f5; color: #].style.display = 'block';
<span style="color: #1
this.getElementsByTagName('img')[<span style="background-color: #f5f5f5; color: #].src = arrlitUrl[this.index];
<span style="color: #2
<span style="color: #3
//每当鼠标移出li标签时，隐藏缩略图
<span style="color: #4
Oli[i].onmouseout = function () {
<span style="color: #5
this.getElementsByTagName('img')[<span style="background-color: #f5f5f5; color: #].style.display = 'none';
<span style="color: #6
<span style="color: #7
//鼠标点击时更换图片为对应的图片
<span style="color: #8
Oli[i].onclick = function () {
<span style="color: #9
Oimg.src = arrUrl[this.index];
<span style="color: #0
turnactive(this.index);
<span style="color: #1
<span style="color: #2
<span style="color: #3
<span style="color: #4
<span style="color: #5
<span style="color: #6 &/head&
<span style="color: #7
<span style="color: #8 &body&
<span style="color: #9
&p id="p1"&带缩略图的图片轮换&/p&
<span style="color: #0
&div id="box"&
<span style="color: #1
&a href="javascript:;" id="prev"&&lt&/a&
<span style="color: #2
&a href="javascript:;" id="next"&&gt&/a&
<span style="color: #3
&img src="img/bassist.jpg" id="img" /&
<span style="color: #4
&ul id="btn"&
<span style="color: #5
&li class="active"&
<span style="color: #6
&img src="img/loader_ico.gif" /&
<span style="color: #7
<span style="color: #8
<span style="color: #9
&img src="img/loader_ico.gif" /&
<span style="color: #0
<span style="color: #1
<span style="color: #2
&img src="img/loader_ico.gif" /&
<span style="color: #3
<span style="color: #4
<span style="color: #5
&img src="img/loader_ico.gif" /&
<span style="color: #6
<span style="color: #7
<span style="color: #8
<span style="color: #9 &/body&
<span style="color: #0
<span style="color: #1 &/html&
html结构：
图片框 box
小圆圈 li& 》缩略图
前后切换prev 和 next
css 布局：
标题和图片框正常放；
前后切换的btn需要用相对定位absolute放到图片框的左右两侧，添加hover颜色变换
小圆圈组ul放在图片框正中下方，li均匀排列；添加calss：active样式设置选中li；
缩略图相对定位absolute到对应的小圆圈li上方。
默认缩略图不显示display：none；
javascript：
首先用两个数组放对应图片路径，大图和缩略图；也可以只用一组图片，只是在css中设置一下缩略图的大小就好。
然后获取大图标签Oimg，小圆圈数组Oli，前一张Oprev，后一张Onext；
给Oprev和Onext添加点击事件，用num来记录当前为第几张作为判断条件，超出数值做相应处理，然后改变Oimg的图片路径即可。
最后给每个小圆圈Oli添加事件，因为js先执行for循环为每个Oli注册事件，而事件执行是等用户操作触发的，所以需要添加索引index来记录是第几个，在事件函数中使用。
鼠标移入：显示Oli下对应的缩略图display：block；设置图片路径；
鼠标移出：隐藏Oli下对应的缩略图display：none；
鼠标点击：修改Oimg的图片路径显示对应的图片。
注意：Oimg显示为第几张图片，对应的第几个小圆圈Oli需要显示，我们定义一个函数turnactive（i），只需传入序号即可将其他小圆圈OIi的active样式去除，设置第i个Oli为active（这就是定义样式active的原因）。
阅读(...) 评论()院领导集体
中国科学院大学
上海科技大学
《中国科学院院刊》（中文版）是中国科学院主办的以战略与决策研究为主的科技综...
《科学通报》是自然科学综合性学术刊物，力求及时报道自然科学各领域具有创新性...
覆盖数学、物理、化学、生命科学、地球科学、信息科学、技术科学与天文学等学科...
近几年，电信诈骗层出不穷，日益猖獗，不仅造成了人民群众钱...
中国自古就有“民以食为天”的说法，“吃”可谓是头等大事，...
作为“天宫一号”的“继承者”，天宫二号即将进行的各类实验...
我国首颗微重力科学实验卫星——“实践十号”已于...
注册有奖的游戏:专家：期货服务产业将发挥新作用
我要分享 &
文章来源：中国科学报&&&&发布时间：日 04:46&&【字号：&&&&&&】
　入場券。不過，相同的失誤在2012年倫敦奧運會重演，在決賽第9槍還領先對手1環多的情況下，埃蒙斯的最後一槍隻打出7.6環，將幾乎到手的銀牌拱手送給韓國選手金鐘鉉，隻獲得瞭一枚銅牌。講完這個故事，我問學弟學妹：聽完這個故事，有什麼感想呢？這時候大多數人都說：埃蒙斯心態不好才失敗瞭，我也正是因為沒有好心態才學不好啊！我則說瞭下面的兩段話：埃蒙斯因為心態不好導致的失誤確實令人惋惜，但是在世界上60多億人。
　缺乏的不是知識，而是學而不厭的態度；我們缺少的不是理想，而是身體力行的實踐。如果你想快點成名，那麼就得慢點睡覺；如果你想快點長智，那麼就得慢點驕傲。如果你想慢點老化，那麼你就得快點學習；(.13.)如果你想慢點淘汰，那麼就得快點邁步。如果你能把做事當鍛煉，把忙碌當享受，把挫折當成長，把吃虧當收獲，把不幸當噩夢，把成功當往事，那麼，你的生活就會感到無比寬慰，無比自在！也許，永遠沒有那一天，前程如朝霞。
　諸葛亮隨身攜帶，一則不忘夫妻恩愛，二則對行軍作戰大有裨益，三則告誡他息怒，也就是控制情緒。《三國演義》中諸葛亮設空城計的時候，有一個基本的道具就是琴。他端坐在城頭，四門大開，神閑氣定地在那兒彈琴。通過彈琴向下屬傳達瞭信心，也向氣勢洶洶的司馬懿傳達瞭一個信息我有準備。琴和棋是中國管理者們修養靜氣和展示靜氣的常用工具，裡邊暗藏很深的哲學道理。比如，曾國藩從辦團練起兵一直到去世前，無論公務多繁忙，軍情多。
　衣出門，我們全球女性感謝你啊。那時候，我們都在背後笑她該吃藥瞭。事實證明，該吃藥的是我們。師姐讀研的時候，非要跟導師去臺灣參加一個學術會議，導師是特溫柔敦厚的老先生，不好意思拒絕，就帶她去瞭。然後，師姐搞定瞭一個臺大的教授，教授給師姐發瞭邀請函，邀請她去臺大訪問一年。師姐去瞭臺灣，認識瞭一個法國的教授，直接去法國一所大學訪問瞭一年。我們以為師姐要成功上位，成為法國教授的正牌夫人瞭。人傢跟一個瑞士小。
　那段時間裡，馬雲過的是一種被人視為騙子的生活。有人在杭州的大排檔裡見到馬雲。馬雲喝得微醺，十足一個跟一大幫人神侃瞎吹的小市民。在他身上完全看不到杭州人的安靜和從容。但是，馬雲的網站為上網的企業帶來瞭客戶，他的網站盈利瞭。在中國網際網路大潮風高浪急之時，馬雲開始有瞭自己的想法。他決定做一個和世界上所有電子商務網站不同的2網站，他不做那15%大企業的生意，隻做85%中小企業的生意，如果把企業也分成富人。
　接待外國元首的貼身翻譯。2009年，張立勇出任中國青少年責任與成長大講堂組委會主席，他帶著一幫志同道合的精英青年，將事業幹得風生水起，並獲得瞭中國十大傑出學習青年等多項國傢級榮譽。從廚師到大講堂組委會主席，這是張立勇的傳奇，也是卑微父親張宗彬的驕傲。年過六旬的張宗彬被江西崇義縣一傢單位聘為值班員，每當有人問他兒子在幹嗎，這位挺直瞭腰桿的父親會反問：知道清華大學那個自學成才的饅頭神嗎？人傢說：知道啊。
（责任编辑：贾静雯）