js实现京东轮播图效果

2019-11-19 16:12:54

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js实现京东轮播图效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    body,ul,li{padding:0;margin:0;}    li{list-style-type:none;}    .wrap{      position:relative;      width:480px;      height:260px;      margin:100px auto;    }    .wrap>ul>li{position:absolute;display:none;}    /*隐藏所有的li*/    .wrap img{width:480px;height:260px;}    .wrap li:first-child{display:block;}/*显示第一个*/    .arrow{      width:480px;      height:60px;      position:absolute;      top:50%;      margin-top:-30px;      display:none;    }    .arrow>span{      font-size:24pt;      line-height:60px;      display:inline-block;      width:36px;      background-color:#CEE5E8;      text-align:center;      cursor:pointer;      opacity:0.5;      border-radius:5px;/*显示圆框*/      -webkit-border-radius:5px;      -moz-border-radius:5px;      color:black;    }    .wrap:hover .arrow{      display:block;    }    .arrow>span:last-child{      float:right;    }  </style></head><body><div class="wrap">  <!--图片部分-->  <ul>    <li>      <a href="javascript:void(0)">        <img src="images/1.jpg"/>      </a>    </li>    <li>      <a href="javascript:void(0)">        <img src="images/2.jpg"/>      </a>    </li>    <li>      <a href="javascript:void(0)">        <img src="images/3.jpg"/>      </a>    </li>    <li>      <a href="javascript:void(0)">        <img src="images/4.jpg"/>      </a>    </li>  </ul>  <!--按钮部分-->  <div class="arrow">    <span><</span>    <span>></span>  </div></div></body><script src="jquery-1.12.0.min.js"></script><script>  $(function(){    var count = 0;    function change() {      count++;      if( count == $(".wrap>ul>li").length){        count = 0;      }      $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();    }    var myTimer = setInterval(change,4000);    function reRun(){      myTimer = setInterval(change,4000);    }    /*注意jquery中setInterval函数不要加引号和(),否则会报缺少对象*/    $(".arrow>span").eq(0).click(function(){      clearInterval(myTimer);      /*清除计时器，目的在于不会因点击按钮时setInterval事件仍旧执行*/      count--;      if( count == -1){        count = $(".wrap>ul>li").length - 1;      }      $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();      setTimeout(reRun,0);      /*重新启动计时器，保证不点击按钮是能正常切换*/    });    $(".arrow>span").eq(1).click(function(){      clearInterval(myTimer);      count++;      if( count == $(".wrap>ul>li").length){        count = 0;      }    $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();      setTimeout(reRun,0);    });  });</script></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：MUI实现上拉加载和下拉刷新效果

下一篇：jquery实现一个全局计时器(商城可用)