jQuery代码实现图片定时轮播

本文给大家分享的是jQuery代码实现图片定时轮播，非常的详细，也很实用，适合jQuery的初学者，有需要的小伙伴参考下。

nbsp;html>

	
		<meta><title></title><script></script><style>
		*{
		 margin: 0;
		 padding: 0;
		}
		ul{
		 list-style: none;
		}
		.slideShow{
		 width: 346px;
		 height: 210px; /*其实就是图片的高度*/
		 border: 1px #eeeeee solid;
		 margin: 100px auto;
		 position: relative;
		 overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
		}
		.slideShow ul{
		 width: 2000px;
		 position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
		}
		.slideShow ul li{
		 float: left; /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
		 width: 346px;
		}
		.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;
		}
	</style><p>
		  <!--图片布局开始-->
		  </p>

  
• @@##@@
  
• @@##@@
  
• @@##@@
  
• @@##@@
  

            

  1   2   3   4   

     <script> $(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 var interval = 4000;//轮播时间间隔 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确定 }) }); timer = setInterval(function(){ //打开定时器 iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片 if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始 iNow=0; } showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click },interval); //4000为轮播的时间 }) </script>

效果图1：

相关推荐：

JS_定时器轮播图

纯JavaScript图片轮播

js定时器实现图片的无缝轮播