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

javascript无缝全屏轮播

2015-12-21 15:22 603 查看

虽然平时能利用插件来实现，但是总是觉得，如果连个无缝轮播都写不出来，还玩个毛线；

其实现在还真的是玩毛线，因为代码都是别人的，不过嘛，很快就变成是我的啦！

代码还没封装成插件，其实我也还没弄清楚。

下面有很多注释的，如果路过的你认为有错误，请指出来啊，使劲拍。

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
html,body{
margin:0px;
padding:0px;
}
.wrap{
width: 1920px;
height: 450px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.list{
position: absolute;
}
img{
width: 1920px;
height: 450px;
float: left;
}
a{
text-decoration: none;
position: absolute;
top:100px;
display: inline-block;
width: 85px;
line-height: 70px;
background: rgba(3,3,3,.3);
color: #fff;
font-weight: 700;
font-size: 50px;
text-align: center;
display: none;
}
.buttons{
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
span{
width: 15px;
height: 15px;
border-radius: 50%;
display: inline-block;
cursor: pointer;
border: 1px solid #fff;
}
span~span{
margin-left: 20px;
}
.light{
background-color: #fff;
}
</style>
</style>
</head>
<body>
<div class="wrap" id="wrap">
<div class="list" id="list" style="left:-1920px;">
<img src="4.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="1.jpg">
</div>
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next" style="right:0;">></a>
<div class="buttons" id="buttons">
<span class="light"></span>
<span ></span>
<span ></span>
<span ></span>
</div>
</div>
</body>
</html>

<script type="text/javascript">
window.onload = function(){
var index = 1;
var b = false;
var timer;
var wrap = document.getElementById('wrap');
var list = document.getElementById('list');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var buttons = document.getElementById('buttons');
var dots = document.getElementsByTagName('span');
var width = list.getElementsByTagName('img')[0].width;
var length = dots.length;

//初始化
list.style.width = (length * width +2*width)+ 'px';

//给span添加索引
function addIndex(){
for(i = 0 ; i < dots.length ; i++){
dots[i].setAttribute('index',i+1) ;

}
}
addIndex();

//左右按钮鼠标滑入显示
wrap.onmouseover = function(){
prev.style.display = 'block';
next.style.display = 'block';
stop();
};

//左右按钮鼠标滑出隐藏
wrap.onmouseout = function(){
prev.style.display = 'none';
next.style.display = 'none';
play();
};

//上一张
function prevImg(){
//防止连续滚动出现bug
if(b){
return;
}

//上一张函数
slider(width);

//索引，pagination用到
index--;
if(index < 1){
index = length;
}else if(index > length){
index = 1;
}

//pagination函数
pagination();
}

//下一张
function nextImg(){
//防止连续滚动出现bug
if(b){
return;
}
//上一张函数
slider(-width);

//索引，pagination用到
index++;
if(index < 1){
index = length;
}else if(index > length){
index = 1;
}

//pagination函数
pagination();
}

//上一张，下一张，触发其他函数变化
function btn(e){
if(b){
return;
}
//兼容ff，ie
e = window.e || e;
var target = e.target ? e.target : e.srcElement;
if(target.nodeName.toLowerCase() == 'span'){
var index1 = target.getAttribute('index');
//获取目标索引图片和当前图片的距离
var offset = (index - index1) * width;
slider(offset);
index = index1;
pagination();
}
}

//切换核心函数
function slider(offset){

b = true ;
//完成时间
var time = 500;
//间隔时间
var inter = 5;
//间隔时间内的移动距离，需要优先级限制，不然会出现问题（6/3/1）与（6/（3/1））结果不一

var speed = Math.ceil(offset/(time/inter));

//每次运动后的距离
var left = parseInt(list.style.left) + offset;

//运动函数
var go = function(){

//当前left
var curLeft = parseInt(list.style.left);

//当滑动出处于中间，并且left没有完成动画时
if((speed > 0 && curLeft < left) || (speed < 0 && curLeft > left)){

//运动（根据speed，的正负，决定左右方向）
list.style.left =curLeft + speed + 'px';
//延迟动画，是否执行取决于条件，也就是距离是否返程

setTimeout(go,inter);

}
//当处于两端的时候
else{

//首先执行完成运动函数
list.style.left = left + 'px';
//根据left的值，决定是否重新设置left;
//当滑到最右
if(left < -(width * length)){
list.style.left = -width + 'px';
}
//当滑到最左
else if(left > -width){
list.style.left = -(width * length) + 'px';
};
b = false;
};
};
go();
};

//绑定dom
function addEvent(element, event, listener){
//兼容ff,ie
if(element.addEventListener){
element.addEventListener(event,listener,false);
}else{
element.attachEvent('on'+event,listener);
};
};

//触发点击事件
addEvent(prev,'click',prevImg);
addEvent(next,'click',nextImg);
addEvent(buttons,'click',btn)

//分页函数
function pagination(){

//遍历span,找出当前点亮的span
for( i = 0 ; i< dots.length ; i++){
if(dots[i].className == 'light'){
dots[i].className = '';
//跳出循环，执行循环后的函数
break;
};
};
//使span索引为当前index-1（span的索引从0开始）的点亮
dots[index -1].className = 'light';
};

//自动轮播
function play(dire,interval){
interval = interval || 3000;
if(dire == 'left'){
timer = setInterval(prevImg,interval);
}else{
timer = setInterval(nextImg,interval);
}
};
play('right',3000);

//终止轮播
function stop(){
clearInterval(timer);
};

//全屏滚动，图片居中；
function center(){
var viewWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var imgWidth = width;
var posCenter = (imgWidth - viewWidth) / 2;

wrap.style.left = -posCenter + 'px';
}
window.onresize = center;

};
</script>

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

标签：

相关文章推荐

新的分享

章节导航