Home  >  Article  >  Web Front-end  >  A simple example of how to implement image carousel effect with jQuery and css

A simple example of how to implement image carousel effect with jQuery and css

黄舟
黄舟Original
2017-08-13 10:14:221828browse

This article mainly introduces jquery+css to achieve a simple image carousel effect, which has certain reference value. Interested friends can refer to it

Image carousels need to be used in the development process plug-in, after looking for several plug-ins on the Internet, I decided to code one myself. It has a relatively simple function and may be useful in the future.

ps:

The function is relatively simple. The entire frame cannot be automatically adjusted according to the size of the picture. The picture used here is 1170*500. If you need to change it to another size of picture , modify the width of img under .pic-list by yourself.

The width in .pic-list is the width of the entire banner. If there are a lot of pictures that need to be rotated, the width of .pic-list should be greater than the number * single width,

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>

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;
}

js


##

$(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();

});

The above is the detailed content of A simple example of how to implement image carousel effect with jQuery and css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn