JQuery图片轮播实例
Posted royal6
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery图片轮播实例相关的知识，希望对你有一定的参考价值。
html+CSS代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片轮播</title> <style> *{ margin:0; padding:0;} ul{ list-style:none;} .clear{ clear:both;} #box{ width:500px; height:320px; margin:100px auto; border:#999 5px solid; position:relative; overflow:hidden; } .m_unit{ width:10000px; height:320px; position:absolute; left:0px; top:0px; } .m_unit ul{overflow:hidden; list-style:none;} .m_unit ul li{float:left;} .btn{} .btn .btn_icon{ width:60px; height:60px; overflow:inherit; background:url(images/btn.png) no-repeat;} .btn #b_left{ position:absolute;top:50%;left:0;} .btn #b_right{ position:absolute;top:50%;right:0; background-position:-60px 0;} .dot{position:absolute; bottom:5px; right:10px;} .dot ul li{ width:20px; height:20px; float:left; margin-right:2px; background:#000; opacity:0.3;} .dot ul .initial{ background:#F00;opacity:0.8;} </style> </head> <body> <div id="box"> <div class="m_unit"> <ul> <li><a href="#"><img src="images/a1.png"/></a></li> <li><a href="#"><img src="images/a2.png"/></a></li> <li><a href="#"><img src="images/a3.png"/></a></li> <li><a href="#"><img src="images/a4.png"/></a></li> </ul> <div class="clear"></div> </div> <div class="btn"> <div id="b_left" class="btn_icon"></div> <div id="b_right" class="btn_icon"></div> </div> <div class="dot"> <ul> <li class="initial"></li> <li></li> <li></li> <li></li> </ul> </div> </div> </body> </html>
javascript+JQuery代码：
<!--导入JQuery--> <script src="js/jquery-1.12.4.min.js"></script> <script> //获取图片长度 var imgLength = $(‘.m_unit ul li‘).length; //拼接假0 $(‘.m_unit ul‘).append($(‘.m_unit ul li‘).eq(0).clone()); //信号量 var idx =0; //自动轮播 var timer = setInterval(rightBtn,2000); //鼠标进入box $(‘#box‘).mouseenter(function(){ clearInterval(timer); }); //鼠标离开box $(‘#box‘).mouseleave(function(){ timer = setInterval(rightBtn,2000); }); //右按钮的点击事件 $(‘#b_right‘).click(rightBtn); function rightBtn(){ idx++; $(‘.m_unit‘).animate({‘left‘:-500 * idx},1000,function(){ if(idx > imgLength-1){ idx = 0; $(this).css(‘left‘,‘0px‘); } }); dotChange(); } //左按钮的点击事件 $(‘#b_left‘).click(function(){ idx--; if(idx < 0){ idx =imgLength-1; $(‘.m_unit‘).css(‘left‘,-500 * imgLength); } $(‘.m_unit‘).animate({‘left‘:-500 * idx},1000); dotChange(); }); //设置小圆点击事件 $(‘.dot ul li‘).each(function(i) { $(this).click(function(){ idx =i; $(‘.m_unit‘).animate({‘left‘:-500 * idx},1000); dotChange(); }); }); //设置小红点跟随轮播 function dotChange(){ var idxx=idx; if(idxx > imgLength-1) idxx=0; $(‘.dot ul li‘).eq(idxx).css({‘background‘:‘#F00‘,‘opacity‘:0.8}).siblings().css({‘background‘:‘#000‘,‘opacity‘:0.3}); } </script>
以上是关于JQuery图片轮播实例的主要内容，如果未能解决你的问题，请参考以下文章