jQuery와 CSS를 사용하여 이미지 캐러셀 효과를 구현하는 방법에 대한 간단한 예

이 글은 간단한 이미지 캐러셀 효과를 얻기 위해 주로 jquery+css를 소개합니다. 관심 있는 친구들은 이를 참고할 수 있습니다.

개발 과정에서 이미지 캐러셀 플러그인을 사용해야 합니다. 여러 플러그인을 사용해 본 후, 비교적 간단한 기능을 가지고 있어 나중에 유용하게 사용할 수 있는 플러그인을 직접 코딩하기로 결정했습니다.

ps:

기능은 비교적 간단합니다. 사진 크기에 따라 전체 프레임을 자동으로 조정할 수 없습니다. 여기에 사용된 사진은 1170*500입니다. 다른 사진 크기로 변경해야 하는 경우 수정하세요. 사진 목록 너비 아래에 있는 img입니다.

.pic-list의 너비는 전체 배너의 너비입니다. 회전해야 할 그림이 많은 경우 .pic-list의 너비는 숫자 * 단일 너비,

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 = $('#next');
  var prev = $('#prev');
  var flag = false;

  prev.on('click',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();

});

위 내용은 jQuery와 CSS를 사용하여 이미지 캐러셀 효과를 구현하는 방법에 대한 간단한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!