Ein einfaches Beispiel für die Implementierung des Bildkarusselleffekts mit jQuery und CSS-js-Tutorial-php.cn

Ein einfaches Beispiel für die Implementierung des Bildkarusselleffekts mit jQuery und CSS

黄舟

Freigeben： 2017-08-13 10:14:22

Original

1888 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich jquery + CSS vorgestellt, um einen einfachen Bildkarusselleffekt zu erzielen, der einen gewissen Referenzwert hat.

Das Bildkarussell muss im Entwicklungsprozess-Plug-in verwendet werden. Nachdem ich im Internet nach mehreren Plug-Ins gesucht hatte, beschloss ich, eines selbst zu programmieren. Es hat eine relativ einfache Funktion und könnte in Zukunft nützlich sein.

ps:

Die Funktion ist relativ einfach. Der gesamte Rahmen kann nicht automatisch an die Größe des Bildes angepasst werden Um es auf eine andere Bildgröße zu ändern, ändern Sie die Breite von img unter .pic-list selbst.

Die Breite in .pic-list ist die Breite des gesamten Banners. Wenn viele Bilder gedreht werden müssen, sollte die Breite von .pic-list größer sein als die Zahl * Einzelbreite ,

html

<p class="banner">
    <!--第一张图片为最后一张，用来做轮播连接使用，所以一开始显示的第一章，应是第二张图片，这里图片的宽度为1170px，所以一开始left为-1170px，同理最后一张图也为第一张图。-->
  <p class="pic-list" style="left: -1170px">
    <img src="/static/img/4.jpg" alt="">
    <img src="/static/img/1.jpg" alt="">
    <img src="/static/img/2.jpg" alt="">
    <img src="/static/img/3.jpg" alt="">
    <img src="/static/img/4.jpg" alt="">
    <img src="/static/img/1.jpg" alt="">
  </p>
  <p id="buttons">
    <!-- 确保span的数量跟img数量一样多，不包括第一张img和最后一张img-->
    <span class=&#39;on&#39;></span>
    <span></span>
    <span></span>
    <span></span>
  </p>
  <a href="javascript:;" class="arrow" id="prev"><</a>
  <a href="javascript:;" class="arrow" id="next">></a>
</p>

Nach dem Login kopieren

css

.banner{
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;

}
.banner a{
  text-decoration: none;
}
.banner .pic-list{
  width: 10000px;
  height: 500px;
  position: absolute;
  z-index: 1;
}
.banner .pic-list img{
  width: 1170px;
  float: left;
}
#buttons{
  position: absolute;
  z-index: 2;
  height: 10px;
  bottom: 20px;
  left: 550px;

}
#buttons span{
  cursor: pointer;
  float: left;
  border: 1px solid #fff;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  margin-right: 5px;
}
#buttons .on{
  background: orange;
}
.arrow{
  cursor: pointer;
  line-height: 36px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 2;
  top: 200px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  display: none;
}
.banner:hover .arrow{display: block;}

#prev{
  left: 20px;
}
#next{
  right:20px;
}

Nach dem Login kopieren

$(document).ready(function(){
  var picNum = 4;//图片数量，根据实际修改
  var picWidth = 1170;//图片的宽度，根据实际修改
  var picMaxWidth = -1 * picNum * picWidth;
  var currentPic = 1;
  var next = $(&#39;#next&#39;);
  var prev = $(&#39;#prev&#39;);
  var flag = false;

  prev.on(&#39;click&#39;,function(){
    if(!flag){
      calPx(1170);
      currentPic--;
      if (currentPic < 1) {
        currentPic = picNum;
      }
      $(&#39;#buttons span&#39;).eq(currentPic-1).addClass(&#39;on&#39;).siblings().removeClass(&#39;on&#39;);
    }
  });

  next.on(&#39;click&#39;,function(){
    if(!flag){
      calPx(-1170);
      currentPic++;
      if (currentPic > picNum) {
        currentPic = 1;
      }
      $(&#39;#buttons span&#39;).eq(currentPic-1).addClass(&#39;on&#39;).siblings().removeClass(&#39;on&#39;);
    }


  });
  $(&#39;.banner&#39;).on(&#39;mouseover&#39;,function(){
    stop();
  }).on(&#39;mouseout&#39;,function(){
    play();
  })
  function nextClick(){
    next.click();
  }
  function play(){
    setInt = setInterval(nextClick,2000);
  }
  function stop(){
    clearInterval(setInt);
  }

  function calPx(leftPx){
    flag = true;
    var left = parseInt($(&#39;.pic-list&#39;).css(&#39;left&#39;));
    var newLeft = left+leftPx;
    var time = 300;
    var interval = 10;
    var speed = leftPx/(time/interval);

    function go(){
      var left = parseInt($(&#39;.pic-list&#39;).css(&#39;left&#39;));
      if((speed < 0 && left > newLeft) || (speed > 0 && left < newLeft)){
        $(&#39;.pic-list&#39;).css(&#39;left&#39;, (left + speed) + &#39;px&#39;);
        setTimeout(go,interval);
      }else{
        flag = false;
        if( newLeft > -1170){
          newLeft = picMaxWidth;
        }else if (newLeft < picMaxWidth ) {
          newLeft = -1170;
        }
        $(&#39;.pic-list&#39;).css(&#39;left&#39;,newLeft + &#39;px&#39;);
      }
    }
    go();

  }
  play();

});

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEin einfaches Beispiel für die Implementierung des Bildkarusselleffekts mit jQuery und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!