jQuery实现大图轮播
css样式：
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.slideShow{
width:620px;
height:700px;/*其实就是图片的高度*/
border:1px#eeeeeesolid;
margin:100pxauto;
position:relative;
overflow:hidden;/*此处需要将溢出框架的图片部分隐藏*/
}
.slideShowul{
width:2500px;
position:relative;/*此处需注意relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShowulli{
float:left;/*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
width:620px;
}
.slideShow.showNav{/*用绝对定位给数字按钮进行布局*/
position:absolute;
right:10px;
bottom:5px;
text-align:center;
font-size:12px;
line-height:20px;
}
.slideShow.showNavspan{
cursor:pointer;
display:block;
float:left;
width:20px;
height:20px;
background:#ff5a28;
margin-left:2px;
color:#fff;
}
.slideShow.showNav.active{
background:#b63e1a;
}
js代码规范：
<scriptsrc="../../../jQuery/js/jquery-2.1.4.js"></script><scripttype="text/javascript">
$(document).ready(function(){
varslideShow=$(".slideShow"),//获取最外层框架的名称
ul=slideShow.find("ul"),
showNumber=slideShow.find(".showNavspan"),//获取按钮
oneWidth=slideShow.find("ulli").eq(0).width();//获取每个图片的宽度
vartimer=null;//定时器返回值，主要用于关闭定时器
variNow=0;//iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
showNumber.on("click",function(){//为每个按钮绑定一个点击事件
$(this).addClass("active").siblings().removeClass("active");//按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
varindex=$(this).index();//获取哪个按钮被点击，也就是找到被点击按钮的索引值
iNow=index;
ul.animate({"left":-oneWidth*iNow,//注意此处用到left属性，所以ul的样式里面需要设置position:relative;让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定
})
});
functionautoplay(){
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> <divclass="slideShow"> <!--图片布局开始--> <ul> <li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"><imgsrc="images/view/111.jpg"/></a></li> <li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"><imgsrc="images/view/112.jpg"/></a></li> <li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"><imgsrc="images/view/113.jpg"/></a></li> <li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"><imgsrc="images/view/114.jpg"/></a></li> </ul> <!--图片布局结束--> <!--按钮布局开始--> <divclass="showNav"> <spanclass="active">1</span> <span>2</span> <span>3</span> <span>4</span> </div> <!--按钮布局结束--> </div> </body>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！