suchen

Heim >Web-Frontend >js-Tutorial >Wie realisiert js den JD-Karusselleffekt?

Wie realisiert js den JD-Karusselleffekt?

零下一度
零下一度Original
2017-07-02 10:22:591569Durchsuche

Dieser Artikel stellt Ihnen hauptsächlich den in JS implementierten JS-Karusselleffekt im Detail vor. Er hat einen gewissen Referenzwert.

Das Beispiel in diesem Artikel zeigt Ihnen die JS-Implementierung von JD . Der spezifische Code für den Karusselleffekt dient als Referenz. Der spezifische Inhalt lautet wie folgt: 


<!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>
<p 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>
  <!--按钮部分-->
  <p class="arrow">
    <span><</span>
    <span>></span>
  </p>
</p>
</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>

Das obige ist der detaillierte Inhalt vonWie realisiert js den JD-Karusselleffekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispielfreigabe einer MUI-Implementierung von Pull-up-Laden und Pull-down-AktualisierungNächster Artikel：Beispielfreigabe einer MUI-Implementierung von Pull-up-Laden und Pull-down-Aktualisierung

In Verbindung stehende Artikel

Mehr sehen