jquery实现轮播图效果
时间：2021-09-12 13:59:58|栏目：jquery|点击： 次
效果如下：
代码如下：
<!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
下一篇：jquery与google map api结合使用 控件,监听器
本文标题：jquery实现轮播图效果
本文地址：http://www.codeinn.net/misctech/174433.html
