jQuery实现大图轮播

css样式：

*{ margin: 0; padding: 0;}ul{ list-style:none;}.slideShow{ width: 620px; height: 700px; /*其实就是图片的高度*/ border: 1px #eeeeee solid; margin: 100px auto; position: relative; overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/}.slideShow ul{ width: 2500px; position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/}.slideShow ul li{ float: left; /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/ width: 620px;}.slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/ position: absolute; right: 10px; bottom: 5px; text-align:center; font-size: 12px;line-height: 20px;}.slideShow .showNav span{ cursor: pointer; display: block; float: left; width: 20px; height: 20px; background: #ff5a28; margin-left: 2px; color: #fff;}.slideShow .showNav .active{ background: #b63e1a;}

js代码规范：

<script src="../../../jQuery/js/jquery-2.1.4.js"></script> <script type="text/javascript">$（document）.ready（function（）{ var slideShow=$（".slideShow"）,//获取最外层框架的名称 ul=slideShow.find（"ul"）,showNumber=slideShow.find（".showNav span"）,//获取按钮 oneWidth=slideShow.find（"ul li"）.eq（0）.width（）; //获取每个图片的宽度 var timer=null;//定时器返回值，主要用于关闭定时器 var iNow=0;//iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0showNumber.on（"click",function（）{ //为每个按钮绑定一个点击事件 $（this）.addClass（"active"）.siblings（）.removeClass（"active"）; //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉var index=$（this）.index（）;//获取哪个按钮被点击，也就是找到被点击按钮的索引值iNow=index;ul.animate（{ "left":-oneWidth*iNow,//注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定 }）}）; function autoplay（）{ timer=setInterval（function（）{//打开定时器iNow++;//让图片的索引值次序加1，这样就可以实现顺序轮播图片 if（iNow>showNumber.length-1）{ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始iNow=0; }showNumber.eq（iNow）.trigger（"click"）; //模拟触发数字按钮的click },2000）; //2000为轮播的时间}autoplay（）;slideShow.hover（ function（）{clearInterval（timer）;},autoplay）; 另外注意setInterval的用法比较关键。}）</script>

主体代码：

<body> <div class="slideShow"><！--图片布局开始--><ul><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/111.jpg"/></a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/112.jpg" /></a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/113.jpg" /></a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/114.jpg" /></a></li></ul><！--图片布局结束--><！--按钮布局开始--><div class="showNav"><span class="active">1</span><span>2</span><span>3</span><span>4</span></div><！--按钮布局结束--> </div></body>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！