您的位置：首页 > Web前端 > JQuery

jquery实现轮播图效果

2017-02-13 12:01 831 查看

效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slider</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#slideshow{
position: relative;
width: 512px;
height: 384px;
margin: 0 auto;
overflow: hidden;
}
#slideshow>ul,#slideshow>ul>li,#slideshow-nav{
position: absolute;
}
#slideshow>ul>li{
list-style: none;
}
#slideshow-nav{
bottom: 20px;
width: 100%;
text-align: center;
}
#slideshow-nav>span{
display: inline-block;
width: 15px;
height: 15px;
margin: 0 7px;
font-size: 0;
background-color: rgba(255,255,255,.3);
border-radius: 50%;
user-select: none;
-webkit-user-select: none;
transition: all .5s;
-webkit-transition: all .5s;
cursor: pointer;
}
#slideshow-nav>span.active{
background-color: #fff;
}
</style>
</head>
<body>
<div id="slideshow">
<ul>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231154e8ab2zanwd59a2w2.jpg" alt="gakki is mine"></li>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236ugj2glgcl6g66gg4.jpg" alt="gakki is mine"></li>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236c26bx5bbfp6kazzm.jpg" alt="gakki is mine"></li>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236oqd8i8q158ojr0i7.jpg" alt="gakki is mine"></li>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236o1iud19lkz11wqja.jpg" alt="gakki is mine"></li>
</ul>
<div id="slideshow-nav"></div>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var timer = null,
curindex = 0,
duration = 2000,
speed = 500;
var $imgWrap = $('#slideshow>ul');
var totalIndex = $imgWrap.find('li').length;
var width = $('#slideshow').width();
//insert navigate span, let img in order
$('#slideshow').find('ul>li').each(function(index){
$(this).css('left', width*index + 'px');
$('#slideshow-nav').append('<span>' + (index+1) + '</span>');
})
//
$('#slideshow-nav>span').eq(0).addClass('active');
//auto slide
var move = function(){
curindex += 1;
if (curindex===totalIndex) {
curindex = 0;
}
// current span add classname "active"
$('#slideshow-nav>span').each(function(index) {
$(this).removeClass('active')
}).eq(curindex).addClass('active');
//auto slide
$imgWrap.animate({
'left': width*curindex*(-1)+'px',
}, speed)
//一开始没加"timer = ",这个bug耽误了不少时间
timer = setTimeout(move,duration+speed);
};
//init
timer = setTimeout(move,duration);
//click event
$('#slideshow-nav>span').on('click', function(event) {
event.preventDefault();
/* Act on the event */
clearTimeout(timer);
$imgWrap.stop(true, true);
curindex = $(this).index() - 1;
move();
});
})
</script>
</body>
</html>

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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 轮播图

相关文章推荐

新的分享

章节导航