特效 左右滑动轮播图jQuery思路
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; border: 0; } .all { width: 500px; height: 200px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } .screen { width: 500px; height: 200px; overflow: hidden; position: relative; } .screen li { width: 500px; height: 200px; overflow: hidden; float: left; } .screen ul { position: absolute; left: 0; top: 0px; width: 3000px; } .all ol { position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; } .all ol li { float: left; width: 20px; height: 20px; background: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } .all ol li.current { background: yellow; } #arr { display: none; } #arr span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; } </style> </head> <body> <div class="all" id='box'> <div class="screen"> <ul> <li><img src="images/1.jpg" width="500" height="200"/></li> <li><img src="images/2.jpg" width="500" height="200"/></li> <li><img src="images/3.jpg" width="500" height="200"/></li> <li><img src="images/4.jpg" width="500" height="200"/></li> <li><img src="images/5.jpg" width="500" height="200"/></li> </ul> <ol> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> <script src="jquery-1.12.2.js"></script> <script> $(function(){ var n=0; var $li=$(".screen ul li"); //声明变量减少服务器的请求次数 var $ul=$(".screen ul"); var $oli=$(".screen ol li"); var $arr=$("#arr"); var imgWidth=$li.width(); // var timer=null; //克隆第一个图片 var oLi=$li.eq(0).clone(true); //把克隆的图片加到ul后面 $ul.append(oLi); var size=$li.size(); //获取li的个数 // console.log(size); //滑过数字小图标大图跟着动 $oli.mouseenter(function(){ n=$(this).index(); tab(); }) //点击右箭头移动轮播图 $("#box #arr #right").click(function(){ toRight(); }) //点击左箭头移动轮播图 $("#box #arr #left").click(function(){ toLeft(); }) //指到盒子上左右箭头出现 离开隐藏 $("#box").hover(function(){ $arr.css("display","block"); clearInterval(timer); },function(){ $arr.css("display","none"); autoPlay(); }) //自动轮播 autoPlay(); function autoPlay(){ timer=setInterval(function(){ toRight(); },1500) } //封装左箭头 function toLeft(){ n--; if(n<0){ $ul.css("left",-size*imgWidth+"px"); n=size-1; } tab(); }; //封装右箭头 function toRight(){ n++; if(n>size){ n=1; $ul.css("left",0); } if(n==size){ $oli.eq(0).addClass("current").siblings().removeClass("current"); } tab(); } //封装移动动画 function tab(){ $ul.stop().animate({left:-imgWidth*n+"px"},200); $oli.eq(n).addClass("current").siblings().removeClass("current"); } }) </script> </body> </html>
