jQuery实现大图轮播

2019-11-19 17:36:22

字体：大中小

来源：转载

供稿：网友

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为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0 showNumber.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>

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

上一篇：Nodejs+Socket.io实现通讯实例代码

下一篇：使用ionic在首页新闻中应用到的跑马灯效果的实现方法