本文小编为大家详细介绍“怎么使用jQuery实现圆点图片轮播效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么使用jQuery实现圆点图片轮播效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
代码实现如下 :
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script> //引入jquery (css代码未贴)
<script type="text/javascript">
$(function(){
var rcd=0; //代表图片和li标签编号的全局变量
// 滑动函数
function slide(){
rcd++;
if(rcd==4){ //右滑倒最后一张时,将图片设定为第一张的位置,即将滑动的图片设定为第二张(rcd=1)
$('#sld').css({'left':'0'});
rcd=1;
};
var dis = rcd*(-1210)+'px'; //这里的1210是每张图片的宽度,rcd和dis的关系就是编号和div left值的关系
$('#sld').stop().animate({'left':dis},1000) //设定left
if (rcd==3) { //当切换到最后一张时(一共4张图片),将左下方的标签样式也改成与第一张一样的
$('#fix ul li').eq(0).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
}else{
$('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'}) //不是最后一张那么就正常执行
}
}
// 设定定时器,开始轮播
var timer = setInterval(slide,2000);
var st; //声明倒计时函数变量名
// 绑定li鼠标点击事件
$('#fix ul li').click(function(){
clearInterval(timer); //清除定时器(同下一行)
clearTimeout(st);
var rcd = $(this).index(); //获得点击的li的编号
var dis =rcd*(-1210)+'px'; //获得该编号对应的div的left值
$('#sld').stop().animate({'left':dis},500) //开始运动
$('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'}) //设置当前li样式,其他li变为初始值
st = setTimeout(function(){ //设置定时器,若3秒内没有鼠标点击操作,就重新设置轮播定时器
timer = setInterval(slide,2000);
},3000)
});
// 左图标点击事件
$('#fix .lt').click(function(){
clearInterval(timer);
clearTimeout(st);
rcd--; //点击前的编号-1
if(rcd==-1){ //如果rcd减后值为-1,那么将div的left设置为最后一张图显示的值,并将rcd设置为倒数第二张的编号
$('#sld').css({'left':'-3630px'});
rcd=2;
};
var dis = rcd*(-1210)+'px';
$('#sld').stop().animate({'left':dis},1000) //运动
if (rcd==3) { //与前面相同
$('#fix ul li').eq(0).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
}else{
$('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
}
st = setTimeout(function(){
timer = setInterval(slide,2000);
},3000)
})
// 右图标点击事件
$('#fix .rt').click(function(){
clearInterval(timer);
clearTimeout(st);
slide(); //右图标点击一次与滑动函数一致
st = setTimeout(function(){
timer = setInterval(slide,2000);
},3000)
})
// 给#fix div加鼠标移入事件
$('#fix').mouseenter(function(){
$('#fix a').css({'display':'block'}); //鼠标移入时,向左向右图标显示
})
// 给#fix div加鼠标移出事件
$('#fix').mouseleave(function(){
$('#fix a').css({'display':'none'}); //鼠标移出时,向左向右图标隐藏
})
})
</script>
</head>
<body>
<div id="fix">
<div id="sld">
<img src="轮播图/ph2.png"/>
<img src="轮播图/ph3.jpg"/>
<img src="轮播图/ph4.jpg"/>
<img src="轮播图/ph2.png"/>
</div>
<ul>
<li >iPhone6</li>
<li>Mate9</li>
<li>vivo X9</li>
</ul>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="lt"><img src="轮播图/left.png"/></a> //阻止浏览器的默认跳转
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="rt"><img src="轮播图/right.png"/></a>
</div>
</body>读到这里，这篇“怎么使用jQuery实现圆点图片轮播效果”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
