1 <div class="content"> 2         <div class="img_change"> 3             <div id="img_container"></div> 4              5             <div class="bottom_part"> 6                 <div class="bottom_img"> 7                     <ul> 8                         <li><a href="###" class="bot_img1"></a></li> 9                         <li><a href="###" class="bot_img2"></a></li>10                         <li><a href="###" class="bot_img3"></a></li>11                         <li><a href="###" class="bot_img4"></a></li>12                         <li><a href="###" class="bot_img5"></a></li>13                     </ul>14                 </div>15                 <div class="change_btn">16                     <ul id="btn_container"></ul>17                 </div>18             </div>19         </div>20     </div>

 1 .content{ 2     width: 700px; 3     margin:100px auto; 4 } 5 .img_change{ 6     width: 731px; 7     height: 300px; 8     position: relative; 9 }10 .img_part{11     position: absolute;12     display: none;13     opacity: 0;14 }15 .bottom_part{16     width: 731px;17     height: 80px;18     background-color:rgba(123,132,131,0.6); 19     position: absolute;20     bottom: 0;21     left: 0;22 }23 .change_btn ul{24     list-style: none;25     text-align: right;26     margin-top:50px;27     margin-right: 20px;28 }29 .change_btn>ul>li{30     display: inline-block;31     width:25px;32     height: 10px;33     background: #1e443f;34     cursor: pointer;35     opacity: 0.8;36     margin-right: 10px;37 }38 .active{39     background: #d7d7d7 !important;40 }41 .bottom_img ul{42     list-style: none;43     margin-top: 8px;44 }45 .bottom_img ul li{46     float: left;47     width: 65px;48     height: 65px;49     margin-left: 30px;50 }51 .bottom_img ul li a{52     display: inline-block;53     width: 100%;54     height: 100%;55     background: url(../images/btn_index_a.png) no-repeat;56 }57 .bottom_img ul li a.bot_img2{58     background-position: -68px 0px;59 }60 .bottom_img ul li a.bot_img3{61     background-position: -136px 0px;62 }63 .bottom_img ul li a.bot_img4{64     background-position: -204px 0px;65 }66 .bottom_img ul li a.bot_img5{67     background-position: -272px 0px;68 }

 1 function objAnim(){ 2     var defalutSpeed = 50; 3  4     //淡入 5     this.fadeIn = function(obj,speed,callback,flag){ 6         var num = Math.floor(window.getComputedStyle(obj,false).opacity*10); 7         var speed = speed || defalutSpeed; 8  9         if (flag == 0) {10             callback(obj);11         }12 13         if(num == 10){14             return;15         }16         else{17             var timer = setInterval(function(){18                 num += 1;19                 obj.style.opacity = num/10;20                 if(num == 10){21                     clearInterval(timer);22                     if(flag == 1){23                         callback(obj)    24                     }25                 }26             },speed);27         }28     };29 30     //淡出31     this.fadeOut = function(obj,speed,callback,flag){32         var num = Math.floor(window.getComputedStyle(obj,false).opacity*10);33         var speed = speed || defalutSpeed;34 35         if (flag == 0) {36             callback(obj);37         }38 39         if(num == 0){40             return;41         }42         else{43             var timer = setInterval(function(){44                 num -= 1;45                 obj.style.opacity = num/10;46                 if(num == 0){47                     clearInterval(timer);48                     if(flag == 1){49                         callback(obj);    50                     }51                 }52             },speed);53         }54             55     };56 57     //显示58     this.show = function(obj){59         obj.style.display = "block";60     }61 62     //隐藏63     this.hide = function(obj){64         obj.style.display = "none";65     }66 }

  1 //获取className  2 function getClassName(clsName,oParent){  3     var oParent = oParent?document.getElementById(oParent):document;  4     var eles =[];  5     var element = oParent.getElementsByTagName("*");  6   7     for(var i =0;i<element.length;i++){  8         if(clsName == element[i].className){  9             eles.push(element[i]); 10         } 11     } 12  13     return eles; 14 } 15  16  17 var currentIdx = 0; 18 var animator = new objAnim(); 19  20 //图片轮播 21 function bannerChange(speed){ 22     var img_part = getClassName("img_part"); 23  24     //对第一个进行处理 25     animator.fadeIn(img_part[currentIdx],0,animator.show,0); 26     //循环轮播 27     cycleChange(); 28 } 29  30 //循环轮播事件 31 var change_timer =null; 32 function cycleChange(speed){ 33     var img_part = getClassName("img_part"); 34     var speedChange = speed | 4000; 35     var nextIdx; 36     currentIdx = 0; 37  38     change_timer = setInterval(function(){ 39  40         nextIdx = (currentIdx==img_part.length-1)?0:currentIdx+1; 41  42         switchImg(currentIdx,nextIdx); 43  44         // nextIdx = (nextIdx==img_part.length-1)?0:nextIdx+1; 45         // currentIdx = (currentIdx==img_part.length-1)?0:currentIdx+1; 46         currentIdx = nextIdx; 47  48     },speedChange) 49 } 50  51 //绑定鼠标事件 52 function changeImg(){ 53     var change_btn = getClassName("change_btn")[0].getElementsByTagName("ul")[0].getElementsByTagName("li"); 54     var change_len = change_btn.length; 55      56     for(var i = 0;i<change_len;i++){ 57         (function(m){ 58             change_btn[i].onclick = function(){ 59                 if(m != currentIdx){ 60                     var nextIdx = m; 61                     switchImg(currentIdx,nextIdx); 62                     clearInterval(change_timer); 63                     cycleChange(); 64                     currentIdx = nextIdx; 65                 } 66             } 67         })(i) 68     } 69 } 70  71 //图片的切换调用 72 function switchImg(currentIdx,nextIdx){ 73     var img_part = getClassName("img_part"); 74     var change_btn = getClassName("change_btn")[0].getElementsByTagName("ul")[0].getElementsByTagName("li"); 75      76     //隐藏当前的页面 77     //效果正常(切换) 78     animator.fadeOut(img_part[currentIdx],50,animator.hide,1); 79     //效果明显 80     //animator.hide(img_part[currentIdx]) 81     //img_part[currentIdx].style.opacity = "0" 82     change_btn[currentIdx].className = ""; 83  84     //显示下一个页面 85     animator.fadeIn(img_part[nextIdx],100,animator.show,0); 86     change_btn[nextIdx].className = "active"; 87  88 } 89  90 //动态生成按钮和图片 91 function addImages(jsonObj,count,isClearCtn){ 92     var cnt = count; 93     var img_container = document.getElementById("img_container"); 94     var btn_container = document.getElementById("btn_container"); 95  96     if(isClearCtn){ 97         btn_container.innerHTML = ""; 98         img_container.innerHTML = ""; 99     }100 101     for(var i=0;i<cnt;i++){102         if(i == 0){103             btn_container.innerHTML += ‘<li class="active"></li>‘;104             img_container.innerHTML += ‘<div class="img_part"><img src="http://www.mamicode.com/images/‘+jsonObj[i]+‘"></div>‘;105         }else{106             btn_container.innerHTML += "<li></li>";107             img_container.innerHTML += ‘<div class="img_part"><img src="http://www.mamicode.com/images/‘+jsonObj[i]+‘"></div>‘;108         }            109     }110 }