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

JavaScript练习（三）简单的轮播器原理代码

2015-11-07 14:12 615 查看
这个只是我练习用的原理代码，没有什么好看的特效和精明的代码，那些想要明白轮播是怎么个原理的朋友可以参考一下，自己试验试验。唉，现在的我还写不出精妙的代码，一起努力吧。

轮播有两种思想：

1：用一个数组来放图片，用下标控制（不实用）。

2：overflow：hiden的方法，用left值来控制显示的东西。

我写的是第二种，写的可能不是很好（兼容啊，容错啊），希望有高人可以指点一二，谢谢了。

（写了一个left，right 和轮播可以自己当练习来用）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var _left=document.getElementById("left"),
_moveul=document.getElementById("move_ul");
var i=0;
_left.onclick=function(){
if(i<5){
var left=parseInt(_moveul.offsetLeft,10),
leftadd=left-300;
_moveul.style.left=leftadd+"px";
i++;
}else{
_moveul.style.left=0;
i=0;
}
}
}
</script>
<style>
*{
padding:0;
margin:0;
list-style: none;
}
#test{
position:relative;
height:300px;
width:300px;
left:100px;
box-shadow: 1px 1px 12px #666666;
overflow: hidden;
}
.move_ul{
position:absolute;
left:0;
width:1800px;
transition: all .2s ease-in-out 0s;
}
.move_ul>li{
float:left;

}
.move_ul>li>img{
width:300px;
height:300px;
}
</style>
</head>
<body>
<div id="test">
<ul id="move_ul" class="move_ul">
<li><img src="imags/1.jpg"/></li>
<li><img src="imags/2.jpg" /></li>
<li><img src="imags/3.jpg"/></li>
<li><img src="imags/4.jpg"/></li>
<li><img src="imags/5.jpg"/></li>
<li><img src="imags/6.jpg"/></li>
</ul>
</div>
<button id="left">Left</button>
</body>
</html>


（图片自己添加吧~~不明白可以留言哦）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航