摘要:本篇jQuery教程探讨了jQuery如何实现图片轮播效果,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
一个盒子放图片,一个放轮播是的小圆点<div class="list" style=" left:-600px;">
<img src="img/5.jpg">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
</div>
<ul class="dots">
<li class="active dot"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
</ul>
样式设置需注意的是:
.dots要绝对定位
img要浮动
大容器要position: relative; overflow: hidden;
大容器的宽度=img的宽度
自动播放:autoplay
var timer;
function autoPlay(){
timer =setInterval(function () {
for(var i=0;i<=5 i++){
if(i=5){ i=0;}//是为了判断是否到最后一张
$("img").index().eq(i).show().sbilings().hide();
$(".dot").index().eq(i).addclass('"active").sbilings().removedclass('"active");//自动播放的话小圆点也要随着切换
}
},1000)
}
function stopAutoPlay() {
clearInterval(timer);
}
点击播放:clickplayfunction clickplay(){
$(".dot").onclick(function(){var number = $(this).index();
$("img").index().eq(number).show().sbilings().hide();
})
}
本文由职坐标整理发布,更多相关内容,请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号