轮播图

淩亂°似流年 2022-05-23 09:38 314阅读 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>
    
    /**animate.js
     * Created by tiger.
     */
    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];
      }
    }