轮播（未完待续）
1.结构
eg：
<body>
<div class="container">
<div id="list" style="left: -400px">
</div>
<span id="prew"></span>
<span id="next"></span>
<ul id ="index"><li class="current"></li><li></li><li></li><li></li><li></li></ul>
</div>
</body>2.样式
<style>
*{margin: 0;padding: 0}
ul{
list-style: none;
}
.container{
width: 400px;
height: 600px;
border: 1px solid #ccc;
position: relative;
margin: 100px auto;
overflow: hidden;
}
#list{
width: 2800px;
height: 600px;
position: absolute;
}
#list img{
float: left;
}
#index{
position: absolute;
text-align: center;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
#index li{
display: inline-block;
width: 12px;
height: 12px;
background: lightblue;
border-radius: 50%;
margin-right: 10px;
}
#index .current{
background: hotpink;
}
.container>span{
position: absolute;
width: 40px;
height: 70px;
top: 50%;
background: url("images/icon-slides.png") no-repeat 0 center;
}
.container #next{
right: 0;
background-position-x:-42px ;
}
</style>3.行为
<script>
var list = document.getElementById("list");
var prev = document.getElementById("prew");
var next = document.getElementById("next");
var litages = document.getElementById("index").children;
var Width = list.children[0].offsetWidth;
var timer;
var current_index = 0;
var animated = false;
var oldLeft = parseFloat(list.style.left);
//点击运动封装
function animate(offset){
animated = true;
var newLeft = parseFloat(list.style.left)+offset;
//封装每一次运动的函数
function gosteps(){
var time_leght =300;//运动总时间
var steps = 10;//运动的步数
var everylength =offset/(300/10);//每一步走的长度；
if((everylength<0 && parseFloat(list.style.left)>newLeft) || (everylength>0 && parseFloat(list.style.left)<newLeft)){
list.style.left = parseFloat(list.style.left)+everylength+"px";
setTimeout(gosteps,steps)
}else{
animated = false;
list.style.left = newLeft+"px";
if(newLeft<-2000){
list.style.left = -400+"px";
}
if(newLeft>-400){
list.style.left = -2000+"px";
}
}
}
gosteps();
}
//向前向后点击事件
next.onclick = function(){
current_index++;
if(current_index>4){
current_index = 0;
}
for(var i=0;i<litages.length;i++){
litages[i].className="";
}
litages[current_index].className = "current";
if(!animated){
animate(-400);
}
};
prev.onclick = function(){
current_index--;
if(current_index<0){
current_index = 4;
}
for(var i=0;i<litages.length;i++){
litages[i].className="";
}
litages[current_index].className = "current";
if(!animated){
animate(400);
}
};
// 圆点点击事件
for(var j=0;j<litages.length;j++){
litages[j].index = j;
litages[j].onclick = function(){
current_index =this.index;
for(var k=0;k<litages.length;k++){
litages[k].className = "";
}
this.className= "current";
if(!animated){
list.style.left = -Width*(current_index+1)+"px";
}
}
}
//自动播放
function play(){
timer = setInterval(function(){
next.onclick();
},3000)
}
function stop(){
clearInterval(timer);
}
list.onmouseover =stop;
list.onmouseout = play;
play();
</script>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.10.16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读