1
![]()
Paste_Image.png
Paste_Image.png
抽象出play函数，根据传入的图片索引决定显示哪一张图片
- 多次点击问题: 触发时加锁，动效完毕后回调开锁。
- 自动播放下点击打断定时问题： 触发主动跳转时先清除计时器，动效完毕后回调创建新的自轮播定时器。
2
关键代码
</head>
<body>
<div class="carousel">
<ul class="img-ct" style="width: 1920px; left: -320px;"><li data-id="3"><a href="#"></a></li>
<li data-id="0"><a href="#"></a></li>
<li data-id="1"><a href="#"></a></li>
<li data-id="2"><a href="#"></a></li>
<li data-id="3"><a href="#"></a></li>
<li data-id="0"><a href="#"></a></li></ul>
<a class="pre arrow" href="#"><</a>
<a class="next arrow" href="#">></a>
<ul class="bullet">
<li class="active"></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
</ul>
</div>
<script>
var $imgCt = $('.carousel .img-ct')
var $imgs = $('.carousel .img-ct >li')
var $preBtn = $('.carousel .pre')
var $nextBtn = $('.carousel .next')
var $bullets = $('.carousel .bullet li')
var pageIndex = 0
var isAnimate = false
var imgCount = $imgs.length
var imgWidth = $imgs.width()
$imgCt.append($imgs.first().clone())
$imgCt.prepend($imgs.last().clone())
$imgCt.width((imgCount + 2) * imgWidth)
$imgCt.css({left: -imgWidth})
$nextBtn.click(function(){
playNext(1)
})
$preBtn.click(function(){
playPre(1)
})
$bullets.click(function(){
var index = $(this).index()
console.log(index)
if(index > pageIndex) {
playNext(index - pageIndex)
}else if(index < pageIndex){
playPre(pageIndex - index)
}
})
function playNext(len) {
console.log('playNext', len)
if(isAnimate) return
isAnimate = true
$imgCt.animate({
left: '-='+len*imgWidth
}, function(){
pageIndex += len
if(pageIndex === imgCount) {
pageIndex = 0
$imgCt.css({left: -imgWidth})
}
console.log(pageIndex)
setBullet()
isAnimate = false
})
}
function playPre(len) {
$imgCt.animate({
left: '+='+len*imgWidth
}, function(){
pageIndex -= len
if(pageIndex < 0){
pageIndex = imgCount - 1
$imgCt.css({left: -imgCount*imgWidth})
}
setBullet()
})
}
function setBullet(){
$bullets.removeClass('active')
.eq(pageIndex)
.addClass('active')
}
</script>
</body></html>
3自动放映渐变效果
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>无线轮播</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
html,body,ul,li,p{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.carousel{
position: relative;
width: 310px;
height: 206px;
overflow: hidden;
}
.carousel .img-ct{
position: relative;
}
.carousel .img-ct img{
width: 310px;
height: 206px;
}
.carousel .img-ct:after{
content: ' ';
display: block;
clear: both;
}
.carousel .img-ct li{
position: absolute;
display: none;
}
.arrow{
position: absolute;
top: 50%;
margin-top: -15px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
border-radius: 30px;
box-shadow: 0 0 2px #999;
opacity: 0.8
}
.arrow:hover {
opacity: 1;
}
.pre{
left: 10px;
}
.next{
right: 10px;
}
ul.bullet {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
ul.bullet li {
width: 16px;
height: 4px;
border-radius: 2px;
background: #fff;
display: inline-block;
cursor: pointer;
}
ul.bullet li.active {
background: #666;
}
</style>
</head>
<body>
<div class="carousel">
<ul class="img-ct">
<li data-id="0" style="display: none;"><a href="#"></a></li>
<li data-id="1" style="display: none;"><a href="#"></a></li>
<li data-id="2" style="display: list-item; opacity: 1;"><a href="#"></a></li>
<li data-id="3" style="display: list-item; opacity: 0;"><a href="#"></a></li>
</ul>
<a class="pre arrow" href="#"><</a>
<a class="next arrow" href="#">></a>
<ul class="bullet">
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class="active"></li>
</ul>
</div>
<script type="text/javascript">
//$(function(){
var $ct = $('.img-ct'),
$items = $ct.children(),
$pre = $('.pre'),
$next = $('.next'),
$bullet = $('.bullet'),
imgWidth = $items.width(),
imgCount = $ct.children().size();
var curIdx = 0;
var isAnimate = false;
$next.on('click', function(){
playNext();
});
$pre.on('click', function(){
playPre();
});
$bullet.find('li').on('click', function(){
var idx = $(this).index();
play(idx);
});
play(0);
autoPlay();
function playNext(){
play((curIdx+1)%imgCount)
}
function playPre(){
play((imgCount+curIdx-1)%imgCount)
}
function play(idx){
if(isAnimate) return;
isAnimate = true;
$items.eq(curIdx).fadeOut(500);
$items.eq(idx).fadeIn(500, function(){
isAnimate = false;
});
curIdx = idx;
setBullet();
}
function setBullet(){
$bullet.children().removeClass('active')
.eq(curIdx).addClass('active');
}
function stopAuto(){
clearInterval(clock);
}
function autoPlay(){
clock = setInterval(function(){
playNext();
}, 2000);
}
//});
</script>
</body></html>
