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

javascript无缝流畅动画轮播，终于让我给搞出来了。

2016-01-05 16:52 671 查看

自己一直想写一个真正能用的轮播图，以前是写过一个，但是不是无缝的轮播，感觉体验很差，这个轮播之前也搞了很多实例，看了很多代码，但是脑子总转不过弯，为什么在运动到一定距离后可以突然转回到原始位置，而没有出现运动情况？为什么我清楚定时器了，还是出现定时器重叠的情况，导致轮播混乱？如何让左右按钮，分页按钮，轮播函数联系起来，在触发一个事件的时候，轮播能正常运行？如何在第一个li的时候向左（上一张）滑动？

平时自己有空就想，试过很多方法，但是始终搞不出来，今天看了别人写的插件，后发现：

1.当ul滚动到最后一张的时候，瞬间回到初始位置，而没有动作，是应为我们都把这个回到初始位置的瞬间当作了运动的一部分了。

2.关于定时器重叠的，问题，以前我试过通过if(timer){clearInterval(timer)}的方法，但是不好用，应为点击分页的时候，还是会出现问题，最后看了别人的代码，发现通过鼠标移入slider之后，清除定时器，可以一劳永逸的解决了这个问题，因为，当鼠标移入slider之后，定时器被清除，而在没有重新启动定时器之前的一切操作，都是在没有自动轮播的情况下进行的。

3.让左右按钮，分页按钮，轮播函数结合，我是这么想的，轮播函数可以独立，然后通过获取当前的offsetLleft，后运动之后的offsetLleft来决定运动距离和方向，然后左右按钮只需通过设置每个li的宽度的正负值传参就可以联系起来，而分页函数和左右函数，则通过index的增减，传参联系起来，分页函数与轮播函数，通过获取当前分页的索引值和点击分页的索引值联系起来，当然这个索引值，可以通过setAttibute和getAttribute来设置获取。

4.关于最后一个问题，我们都知道如果当前页为第一页的时候，如果点击上一张的话，会出现空白，反正就是错，所以我们在初始化的时候，需要在最前面添加最后一个滚动单位（最后一张图片的li），为了让滚动到最后一个li能返回初始位置，也要在ul的最后添加第一个li，如果你觉得，这样会不会影响到分页呢。其实分页我们可以通过独立设置data-index，还有分页的length也可以通过初始化之前的来设置，因为当时并没有添加节点。

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>demo3</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
ul{
padding:0px;
margin:0px;
}
#slider{
width:400px;
height:200px;
position: relative;
margin:400px auto;
overflow: hidden;
border:1px solid #eee;
}
#prev{
width:50px;
height:30px;
line-height: 30px;
color:#fff;
background:#000;
text-align: center;
position: absolute;
opacity:0.5;
left:-200px;
text-decoration: none;
top:50%;
z-index:100;
margin-top:-15px;
}
#next{
opacity:0.5;
text-decoration: none;
z-index:100;
width:50px;
height:30px;
line-height: 30px;
color:#fff;
background:#000;
text-align: center;
position: absolute;
right:-200px;
top:50%;
margin-top:-15px;
}
#slider ul{
height:200px;
position: absolute;
left:0px;
top:0px;
}
#slider ul li{
width:400px;
height:200px;
background:orange;
list-style: none;
text-align: center;
line-height: 200px;
font-size:100px;
font-weight:bold;
color:#fff;
float:left;

}
#slider ol{
list-style-type: none;
position: absolute;
bottom:10px;
padding:0;
margin:0;
width:100%;
text-align: center;
}
#slider ol li{
width:10px;
height:10px;
display: inline-block;
background: #000;
opacity: 0.3;
cursor:pointer;
margin:5px;
border-radius: 50%;

}
#slider ol li.on{
opacity: 0.8;
}
</style>
</head>
<body>
<div id="slider">
<a href="javascript:;" id="prev">prev</a>
<a href="javascript:;" id="next">next</a>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
<ol>
</ol>
</div>
</body>
</html>

javascript

<script type="text/javascript" src="startmove.js"></script>
<script type="text/javascript">
window.onload = function (){
var slider = document.getElementById('slider');
var oUl = slider.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
var liWidth = parseInt(getStyle(oLi[0] , 'width'));
var aNext = document.getElementById('next');
var aPrev = document.getElementById('prev');
var timer = null;
var inter = 3000;
var index = 0;
var oOl = slider.getElementsByTagName('ol')[0];
var pLi = oOl.getElementsByTagName('li');
var b = false;

//初始化
function intSlider(){
for(var i = 0 ; i < oLi.length ; i++){
oLi[i].setAttribute('data-index',i);
}
for( var i = 0 ; i < oLi.length; i++){
var iLi = document.createElement('li');
oOl.appendChild(iLi);
}
for(var i = 0 ; i < pLi.length ; i++){
pLi[i].setAttribute('data-index',i)
}
pLi[0].className = 'on';
var cloneLastLi = oLi[oLi.length-1].cloneNode(true);
var cloneFirstLi = oLi[0].cloneNode(true);
oUl.insertBefore(cloneLastLi,oUl.childNodes[0]);
oUl.appendChild(cloneFirstLi);
oUl.style.left = -parseInt(getStyle(oLi[0] , 'width')) + 'px';
};
intSlider();

//重新设定ul宽度
function getWidth(){
var liWidth = parseInt(getStyle(oLi[0] , 'width'));
oUl.style.width = oLi.length * liWidth + 'px';

};
getWidth();

//鼠标移入移除直接清除了timer，就省了很多清除定时器的麻烦
slider.onmouseover = function() {
if(timer){
clearInterval(timer);
}
startMove(aNext,{right : 20});
startMove(aPrev,{left : 20});

};
slider.onmouseout = function() {
timer = setInterval(nextSlider , inter);
startMove(aNext,{right : -100});
startMove(aPrev,{left : -100});

};

//核心函数
function sliderOffset(offset){
b = true;
//当前left和滚动之后的left
var currentLeft = oUl.offsetLeft;
var afterLeft = currentLeft + offset;

startMove(oUl , {left : afterLeft},function(){
if (oUl.offsetLeft <= -(oUl.offsetWidth) + liWidth) {
oUl.style.left= -liWidth + 'px';
} else if (oUl.offsetLeft >= 0) {
oUl.style.left= -(oLi.length - 2) * liWidth  + 'px';
};

b = false;
});
};

//当前分页函数
function pageSlider(index){
for(var i = 0; i < pLi.length ; i++){
if(pLi[i].className == 'on'){
pLi[i].className = '';
}

}
pLi[index].className = 'on';

};

//分页点击函数
for(var i = 0 ; i< pLi.length ; i++){
pLi[i].onclick = function (){
var index1 = this.getAttribute('data-index');
var offset = (index - index1) * liWidth;
sliderOffset(offset)
index = index1;
pageSlider(index);
}
};

//上一张函数
function nextSlider(){
if(b){
return;
}
sliderOffset(-liWidth)
if(index >= pLi.length-1){
index = 0;
}else{
index++
}
pageSlider(index)
};

//下一张函数
function prevSlider(){
if(b){
return;
}
sliderOffset(liWidth);
if(index <= 0){
index = pLi.length-1;
}else{
index--
}
pageSlider(index);
};

//事件绑定兼容函数
function addEvent(element,event,listener){
if(element.addEventListener){
element.addEventListener(event,listener,false);
}else{
element.attachEvent('on' + event , listener);
}
};

//绑定事件
addEvent(aNext,'click',nextSlider);
addEvent(aPrev,'click',prevSlider);

//样式获取
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr]
}else{
return getComputedStyle(obj,false)[attr]
}
};

//自动轮播
timer = setInterval(nextSlider, inter);
}
</script>

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

标签：

相关文章推荐

新的分享

章节导航