原生js轮播图-蒲公英云

原生js轮播图

Bertha 。 2022-05-28 12:21 353阅读 0赞

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style> * { margin: 0; padding: 0; } .box1 { margin: 100px auto; width: 670px; height: 320px; /*border:1px solid red;*/ position: relative; } .box1 ul li { list-style: none; width: 670px; height: 320px; /*display: none;*/ position:absolute; opacity:0; } .box1 ul li.cur1{ opacity:1; filter:alpha(opacity=0); } .box1 ul li img { width: 670px; height: 320px; } .box2 { position: absolute; width: 100%; top: 50%; margin-top: -27px; left: 0; cursor: pointer; z-index: 3; } .box2 .left { float: left; width: 55px; height: 55px; background: url(images/slide-btnL.png); } .box2 .right { float: right; width: 55px; height: 55px; background: url(images/slide-btnR.png); } .box1 ol { position:absolute; left:50%; margin-left: -68px; bottom: 10px; width: 135px; } .box1 ol li { list-style: none; float: left; width: 7px; height: 7px; border-radius: 6px; background: url(images/ico.png) no-repeat -138px -133px; margin: 0 10px; cursor: pointer; } .box1 ol li.cur2 { background: url(images/ico.png) no-repeat -125px -133px; } </style>
</head>
<body>
    <div class="box1" id="box1">
        <ul>
            <li class="cur1"><a href="#"><img src="images/aaa.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/bbb.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/ccc.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/ddd.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/eee.jpg" alt=""/></a></li>
        </ul>
        <div class="box2">
            <span class="left"></span>
            <span class="right"></span>
        </div>
        <ol>
            <li class="cur2"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script src="js/animate.js"></script>
    <script> // 1/获取元素 var box1 = document.getElementById("box1"); var ullis = box1.children[0].children; var spans = box1.children[1]; var leftArr=spans.children[0]; var rightArr=spans.children[1]; var ollis = box1.children[2].children; //事件监听 var count=0; var timer=null; for (var i = 0; i < ollis.length; i++) { ollis[i].index=i; ollis[i].onclick= function () { for(var i = 0; i < ollis.length; i++){ ollis[i].className=""; animate(ullis[i],{ "opacity":0}) } ollis[this.index].className="cur2"; count=this.index animate(ullis[count],{ "opacity":1}) } } rightArr.onclick=function (){ if(ullis[count].isanimate) return; animate(ullis[count],{ "opacity":0}); count++; if(count>=ullis.length){ count=0; } for (var i = 0; i < ullis.length; i++) { ollis[i].className = ""; } ollis[count].className = "cur2"; animate(ullis[count],{ "opacity":1}); } leftArr.onclick=function (){ if(ullis[count].isanimate) return; animate(ullis[count],{ "opacity":0}); count--; if(count<0){ count=ullis.length-1; } for (var i = 0; i < ullis.length; i++) { ollis[i].className = ""; } ollis[count].className = "cur2"; animate(ullis[count],{ "opacity":1}); } box1.onmouseover=function(){ clearInterval(timer); } box1.onmouseout=function(){ autoMove(); } autoMove() function autoMove(){ clearInterval(timer); timer=setInterval(function(){ rightArr.click(); },1500) } </script>
</body>
</html>
/** * Created by yoyo on 2017-02-16. */
function animate(tag,obj,fn){ 
  clearInterval(tag.timer);
  tag.isanimate=true;
  tag.timer=setInterval(function () { 
    var flag=true;
    for(var k in obj){
      if(k=="opacity"){
        var target=obj[k]*100;
        var leader=getStyle(tag,k)*100||0;
        var step=(target-leader)/20;
        step=step > 0 ?Math.ceil(step): Math.floor(step);
        leader=leader+step;
        tag.style[k]=leader/100;
        tag.style.filter="alpha(opacity=" + leader + ")";
      }else if(k=="zIndex"){
        target.style.zIndex=obj[k];
      }else{
        var target=obj[k];
        var leader=getStyle(tag,k);
        var step=(target-leader)/10;
        step=step > 0 ?Math.ceil(step): Math.floor(step);
        leader=leader+step;
        tag.style[k]=leader+"px";
      }
      if(target!=leader){
        flag=false
      }
    }
    if(flag){
      clearInterval(tag.timer);
      tag.isanimate=false;
      fn&&fn();
    }
  },40)
}
function getStyle(tag,attr){ 
  if(tag.currentStyle){
    return tag.currentStyle[attr];
  }else{
    return getComputedStyle(tag, null)[attr];
  }
}