无限轮播
2017-11-02 本文已影响0人
流着万条永远的河
demo
轮播有好多种实现方法，当然，如果说是靠控制元素的隐藏消失和出现，这不算是轮播，轮播有种动起来的意思，就是要有一个窗口，有一个带状区块，一点一点从这个窗口移走，每次一动，窗口的展示内容就不一样的。
比较简单的轮播就是从头移动到另一头，再移动的话，就突然移动到开头的那里，这里一直用这个带状元素的left的值操控的，所以它相对于那个父元素窗口是绝对定位的哦。它里面的子元素li，我用了浮动，然后把它的宽用Jquary计算出来，就是所有的li的宽的和了，这样它就成一个条了。
演示就是,打开页面，然后看看页面是否禁止脚本了，允许这个脚本运行。
然后是自动轮播的展示，点击下面的四个bar的任何一个，就停止自动轮播了。
这个轮播主要是滚动的效果，效果用了animate的实现。
然后会想到，我这个是四个图片轮播，从第一个滚到第四个，再滚就是第一个图了，怎么滚？在第四张图后面生成一个节点，这节点同第一个节点一样的，然后就到了第一张的画面了，但是实际上是第五张，但是，动画已经有了，animate运行了嘛，然后这里立刻把ul的left用JS的css设置为到第一张图出现的那个距离嘛，因为这样设置，没有动画的效果，跟就是在第五张一样的效果，又有了动画，又滚回了第一张的位置。
同理，第一张在窗口，再按向前，应该是第四张出来的，这时候要有滚动的动画，用animate,所以也应该在第一张前面加一个节点，跟第四张的一样的。同理，这时候相当于-1的位子了，再滚就要出现第三张，所以也立刻操作ul的css的left，等同于第四张图出现在窗口的位置。然后，再向前就名正言顺了哦。
这里写的是组件，是要复用的，所以，需要原型对象的知识，new一个出来，然后，把容器当成参数传进去，并设定值保存就可以了。
我犯的错误：
animate的应用，是异步的，但是代码中的一些处理就是需要动画执行完后再进行，否则就出错了，我调试了半天都查不出错哪里，最终对着对着才想明白的，这里就是要用animate里的回调函数写紧接着干什么的。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>无限轮播</title>
<style>
html,
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
position: relative;
top: 100px;
margin: 0 auto;
width: 300px;
height: 250px;
border: 1px solid;
overflow: hidden;
margin-bottom: 30px;
}
.box ul {
padding: 0;
margin: 0;
position: absolute;
}
.box li {
list-style: none;
float: left;
width: 300px;
height: 250px;
}
.box ul:after {
content: '';
display: block;
clear: both;
}
.box a {
text-decoration: none;
display: block;
}
.box img {
width: 300px;
height: 250px;
}
.box span {
font-size: 30px;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
color: cornflowerblue;
position: absolute;
font-weight: 900;
margin-top: -15px;
top: 50%;
border: 1px solid #fff;
border-radius: 50%;
transition: all 1.2s;
opacity: .6;
text-align: center;
cursor: pointer;
}
.box span:hover {
color: antiquewhite;
opacity: .9;
}
.pre {
left: 30px;
}
.next {
right: 30px;
}
.barbox {
position: absolute;
text-align: center;
bottom: 40px;
width: 100%;
}
.bar {
display: inline-block;
background: #000;
border: 1px solid #fff;
width: 25px;
height: 5px;
border-radius: 5px;
opacity: 0.5;
margin-right: 10px;
transition: all 1.2s;
cursor: pointer;
}
.bar:hover {
opacity: 1;
}
.active {
background: #fff;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="box">
<ul>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
<span class="pre"><</span>
<span class="next">></span>
<div class="barbox">
<div class="bar active"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
<div class="box">
<ul>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
<span class="pre"><</span>
<span class="next">></span>
<div class="barbox">
<div class="bar active"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
<script>
function roll($box) {
this.init($box)
this.bind()
this.autoplay()
}
roll.prototype = {
init: function($box) {
this.$box = $box
this.index = 0
this.doing = false
this.liwid = this.$box.find('li').outerWidth(true)
this.licount = this.$box.find('li').length
this.$box.find('ul').append(this.$box.find('li').first().clone())
this.$box.find('ul').prepend(this.$box.find('li').last().clone())
this.$box.find('ul').width(this.liwid * (this.licount + 2))
this.$box.find('ul').css('left', -this.liwid)
},
bind: function() {
var self = this
this.$box.find('.next').on('click', function() {
console.log('nxt,,,')
self.playnext(1)
}),
this.$box.find('.pre').on('click', function() {
console.log('pre,,,')
self.playpre(1)
}),
this.$box.find('.bar').on('click', function() {
self.stopauto()
console.log($(this).index())
self.active($(this))
var index = $(this).index()
if (index > self.index) {
self.playnext(index - self.index)
} else if (index < self.index) {
self.playpre(self.index - index)
}
})
},
playnext: function(leng) {
var self = this
if (self.doing) return;
self.doing = true
self.$box.find('ul').animate({
left: '-=' + self.liwid * leng
}, function() {
self.index += leng
if (self.index === self.licount) {
self.$box.find('ul').css('left', -self.liwid)
self.index = 0
}
self.active(self.$box.find('.bar').eq(self.index))
self.doing = false
})
},
playpre: function(leng) {
var self = this
if (self.doing) return;
self.doing = true
self.$box.find('ul').animate({
left: '+=' + self.liwid * leng
}, function() {
self.index -= leng
if (self.index < 0) {
self.$box.find('ul').css('left', -self.liwid * self.licount)
self.index = self.licount - 1
}
//console.log(self.index)
self.active(self.$box.find('.bar').eq(self.index))
self.doing = false
})
},
active: function(node) {
node.addClass('active').siblings().removeClass('active')
},
autoplay: function() {
var self = this
self.clock = setInterval(function() {
self.playnext(1)
}, 1500)
},
stopauto: function() {
clearInterval(this.clock)
}
}
new roll($('.box').eq(0))
new roll($('.box').eq(1))
/*function roll($box) {
this.init($box)
this.bind()
}
roll.prototype = {
constructor: roll,
init: function($box) {
this.$box = $box
this.$ul = this.$box.find('ul')
this.$pre = this.$box.find('.pre')
this.$next = this.$box.find('.next')
this.$li = this.$box.find('ul >li')
this.$bar = this.$box.find('.bar')
this.index = 0
this.$liwid = this.$li.outerWidth(true)
this.$licount = this.$li.length
this.$ul.append(this.$li.first().clone())
this.$ul.prepend(this.$li.last().clone())
this.$ul.width(this.$liwid * (this.$licount + 2))
this.$ul.css(
'left', -this.$liwid
)
},
bind: function() {
var self = this
this.$next.on('click', function() {
//console.log('next,,,')
self.playnext()
})
this.$pre.on('click', function() {
console.log('pre,,,')
self.playpre()
})
this.$bar.on('click', function() {
console.log($(this).index())
var index = $(this).index()
self.active($(this))
self.$ul.animate({
left: '-=' + self.$liwid * (index - self.index)
})
self.index = index
})
},
playnext: function() {
var self = this
console.log('eeee', self.$ul.css('left'))
self.$ul.animate({
left: '-=' + this.$liwid
})
self.index += 1
// console.log(self.index, self.$licount)
if (self.index === self.$licount) {
self.$ul.css({
left: '-' + self.$liwid
})
//self.$ul.css('left', -self.$liwid)
self.index = 0
console.log(self.index, self.$ul.css('left'))
}
self.active(self.$bar.eq(self.index))
console.log('eeee', self.$ul.css('left'))
},
playpre: function() {
var self = this
self.$ul.animate({
left: '+=' + this.$liwid
})
self.index -= 1
if (self.index = -1) {
self.$ul.css('left', self.$liwid * (self.$licount))
self.index = self.$licount - 1
}
self.active(self.$bar.eq(self.index))
//console.log(self.index, self.$licount)
//console.log('eeee', self.$ul.css('left'))
},
active: function(node) {
node.addClass('active').siblings().removeClass('active')
}
}
new roll($('.box').eq(0))
new roll($('.box').eq(1))*/
</script>
</body>
</html>
