您的位置：首页 > Web前端 > JavaScript
js实现按钮控制图片向左、向右、向上、向下无缝轮播

2017-04-21 17:24 806 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>向左、向右、向上、向下无缝滚动</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}

.button{
width: 640px;
margin: 50px 0 0 80px;
}

.button input{
width: 80px;
height: 40px;
line-height: 40px;
border: none;
outline: none;
background: #8E3E8B;
border-radius: 10px;
color: #fff;
font-size: 14px;
margin-left: 20px;
cursor: pointer;
}

ul,li{list-style: none;}

.js-mask{
width: 640px;
height: 350px;
border: 1px solid black;
position: relative;
overflow: hidden;
margin: 20px 0 0 100px;
}

.js-mask ul{
position: absolute;
top: 0;
left: 0;

}

.js-mask ul  li{
/*  float: left;*/
width: 640px;
height: 350px;
}

.js-mask ul img{
width: 640px;
height: 350px;
display: block;
border: none;
}
</style>
</head>
<body>
<div class="button">
<input type="button" value="向左滚动"/>
<input type="button" value="向右滚动"/>
<input type="button" value="向上滚动"/>
<input type="button" value="向下滚动"/>
</div>
<div class="js-mask">
<ul>
<li><img src="img/1.jpeg" alt="" /></li>
<li><img src="img/2.jpg" alt="" /></li>
<li><img src="img/3.jpg" alt="" /></li>
<li><img src="img/4.jpg" alt="" /></li>
<li><img src="img/5.jpeg" alt="" /></li>
<li><img src="img/6.jpg" alt="" /></li>
</ul>
</div>
</body>
<script type="text/javascript">

(function(){
//获取button
var buttons=document.querySelectorAll('.button input');
//获取ul
var oUl = document.querySelectorAll('.js-mask ul')[0];
// 获取ul里的li进行拼接，然后重新赋给ul
// 由于ul初始时是4张图片的宽度，现在把宽度/高度变成是8张的宽度/高度
oUl.innerHTML+=oUl.innerHTML;
var speed = 6;
var timer;
// 获取li，根据li的宽度/高度重新设置ul的宽度/高度
var oLies = document.querySelectorAll('.js-mask li');// 获取li

//向左滚动
buttons[0].onclick = function(){
clearInterval(timer);
for(var i=0;i<oLies.length;i++){
oLies[i].style.float='left';   //li左浮动
};
oUl.style.width=oLies[0].offsetWidth * oLies.length + 'px';// 设置ul宽度，li的宽度*li的个数
timer=setInterval(function(){
var speed = -6;
if(oUl.offsetLeft <= -oUl.offsetWidth*.5){
oUl.style.left = '0px';    //重置 -oUl.offsetWidth*.5=-640
};
oUl.style.left = oUl.offsetLeft + speed + 'px'; //ul的位置
},100);
};

//向右滚动
buttons[1].onclick = function(){
clearInterval(timer);
for(var i=0;i<oLies.length;i++){
oLies[i].style.float='left';   //li左浮动
};
var speed = 6;
oUl.style.left=oUl.offsetWidth*.5;  //设置初始位置
oUl.style.width=oLies[0].offsetWidth * oLies.length + 'px';// 设置ul宽度，li的宽度*li的个数
timer=setInterval(function(){
if(oUl.offsetLeft >= 0){
oUl.style.left = '-640px';    //重置
};
oUl.style.left = oUl.offsetLeft + speed + 'px'; //ul的位置
},100);
};

//向上滚动
buttons[2].onclick = function(){
clearInterval(timer);
var speed = -6;
oUl.style.height=oLies[0].offsetHeight * oLies.length + 'px';// 设置ul宽度，li的宽度*li的个数
timer=setInterval(function(){
if(oUl.offsetTop<=-oUl.offsetHeight*.5){
oUl.style.top = '0px';
};
oUl.style.top = oUl.offsetTop + speed +'px';
},100);
};

//向下滚动
buttons[3].onclick = function(){
clearInterval(timer);
var speed = 6;
oUl.style.top='-350px';
oUl.style.height=oLies[0].offsetHeight * oLies.length + 'px';// 设置ul宽度，li的宽度*li的个数
timer=setInterval(function(){
if(oUl.offsetTop>=0){
oUl.style.top = '-350px';
};
oUl.style.top = oUl.offsetTop + speed +'px';
},100);
};
})()
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航