JS_图片轮播事件
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS_图片轮播事件相关的知识,希望对你有一定的参考价值。
用javascript实现一个简单的图片轮播事件。
主要的思想是把需要显示的图片显示出来,不需要的隐藏,然后使用自己封装的代码动画显示出来(setInterval)
贴上代码:
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>
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 }
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 }
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 }
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 }
由于涉及到图片的问题,所以就PO上一张截图供效果参考:
以上内容,如有错误请指出,不甚感激。
以上是关于JS_图片轮播事件的主要内容,如果未能解决你的问题,请参考以下文章