首页手记轮播图小结

轮播图小结

标签：

Html5 JavaScript CSS3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style rel="stylesheet" type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
body{
padding: 20px;
}
.container{
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
border: 3px solid #333;
}
.list{
width: 4200px;
height: 400px;
position: absolute;
z-index: 1;
}
.list img{
float: left;
}
.buttons{
position: absolute;
z-index: 2;
width: 100px;
height: 10px;
bottom: 20px;
left: 250px;
}
.buttons span{
width: 10px;
height: 10px;
border-radius: 50%;
cursor: pointer;
float: left;
border: 1px solid #fff;
margin-right: 5px;
background: #333;
}
.buttons .on{background: orangered;}
.arrow{
text-decoration: none;
color: #fff;
cursor: pointer;
width: 40px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 36px;
position: absolute;
top: 160px;
background: rgba(0,0,0,.3);
z-index: 2;
display: none;
}
.arrow:hover{
background: rgba(0,0,0,.7);
}
.next{
right: 0px;
}
.container:hover .arrow{display: block}
</style>
</head>
<body>
<div class="container" id="container">

<div class="list" id="list" style="left: -600px;">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lb%20(5).jpg" alt="">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lb%20(1).jpg" alt="">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lb%20(2).jpg" alt="">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lb%20(3).jpg" alt="">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lb%20(4).jpg" alt="">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lb%20(5).jpg" alt="">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lb%20(1).jpg" alt="">
</div>

<div class="buttons" id="buttons">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow next">></a>
</div>
</body>
<script type="text/javascript">
function byId(id) {
return typeof (id)==="string"?document.getElementById(id):id;
}

var index=0,
timer,
animated=false,
container=byId("container"),
span=byId("buttons").getElementsByTagName("span"),
len=span.length,
list=byId("list"),
prev=byId("prev"),
next=byId("next");

window.onload=function () {
changeImg();
}

function changeImg() {

  //执行 图片切换函数
  function animate(offset) {
      if(offset==0){
          return;
      }
      animated=true;
      var newLeft=parseInt(list.style.left) + offset;//获取移动目标距离
      var time=300,
          interval=10,
          speed=offset/(time/interval);

      function go() {
          //判断当前速度正负，用来区分向左向右移动，并且判断是否到达目标值，没有则执行移动
          if((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)){
              list.style.left = parseInt(list.style.left)+speed+'px';
              setTimeout(go,interval);
          }else {
              //如若达到目标值，则直接赋值即可
              list.style.left = newLeft+'px';
              if(newLeft<-3000){
                  list.style.left=-600+'px';
              }
              if(newLeft >-600){
                  list.style.left=-3000+'px';
              }
              animated=false;
          }
      }
      go();

  }
  //显示对应按钮样式
  function showButton() {
      for(var i=0;i<len;i++){
          span[i].className="";
      }
      span[index].className="on";
  }

  prev.onclick=function () {
      index--;
      if (index < 0){
          index=4;
      }
      if(animated){
          return;
      }
      animate(600);
      showButton();
  }
  next.onclick=function () {
      index++;
      if (index>len-1){
          index=0;
      }
        if(animated){
          return;
        }
      animate(-600);
      showButton();
  }

  //遍历按钮，给每个按钮绑定一个事件
  for(var i=0;i<len;i++){
      if(animated){
          return;
      }
      span[i].setAttribute("idx",i);
      span[i].onclick=function () {
          var myIdx=parseInt(this.getAttribute("idx"));//获取点击的索引
          var offset=-600*(myIdx-index);//计算点击索引 和 当前索引的距离
          index=myIdx;//需要 把点击的索引赋值给index ,记住现有的索引。
          animate(offset);
          showButton();
      }
  }

  container.onmouseover=function () {
      if(timer){
          clearInterval(timer);
      }
  }
  container.onmouseout=function () {
      timer=setInterval(function () {
          next.onclick();
      },3000)
  }

}

</script>
</html>

点击查看更多内容