JS_图片轮播事件

用JavaScript实现一个简单的图片轮播事件。

主要的思想是把需要显示的图片显示出来，不需要的隐藏，然后使用自己封装的代码动画显示出来（setInterval）

贴上代码：

html

 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>

html代码

css:

 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 }

css代码

common.js:

 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 }

common.js

function.js

  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="./images/'+jsonObj[i]+'"></div>';
105         }else{
106             btn_container.innerHTML += "<li></li>";
107             img_container.innerHTML += '<div class="img_part"><img src="./images/'+jsonObj[i]+'"></div>';
108         }            
109     }
110 }

function.js

script.js

 1 window.onload=function(){
 2     var change_btn = getClassName("change_btn")[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
 3     var chang_len = change_btn.length;
 4     
 5     
 6     var jsonObj =["banner-1.png","banner-2.png","banner-3.png"];
 7     //动态生成图片
 8     addImages(jsonObj,jsonObj.length,true);
 9 
10     //触发图片轮播    
11     bannerChange();
12 
13     //鼠标点击事件
14     changeImg();
15 
16 }

（还有JQ实现图片轮播，代码相对简介，复用率高。效果大同小异：http://www.cnblogs.com/adelina-blog/p/5917095.html）

由于涉及到图片的问题，所以就PO上一张截图供效果参考：

以上内容，如有错误请指出，不甚感激。

posted @ 2016-09-19 14:41 FIONA-SUN 阅读(2004) 评论(0) 编辑收藏举报

刷新页面返回顶部

FIONA-SUN

JS_图片轮播事件

公告