欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery+css实现简单的图片轮播效果

程序员文章站 2023-02-23 23:37:03
开发过程中需要用到图片轮播的插件,在网上找了几个插件之后还是决定自己码一个,比较简洁的功能,以后说不定还会有用。 ps: 功能比较简单,整个框并不能根据图片的大小...

开发过程中需要用到图片轮播的插件,在网上找了几个插件之后还是决定自己码一个,比较简洁的功能,以后说不定还会有用。

ps:

功能比较简单,整个框并不能根据图片的大小自动调节,这里所用的图片是1170*500的,如果需要改成其他大小的图片,自行修改.pic-list下img的宽度。

.pic-list中的宽度为整个横幅的宽度,如果需要轮播的图片数量很多,.pic-list的宽度应大于数量*单张宽度,

html

<div class="banner">
    <!--第一张图片为最后一张,用来做轮播连接使用,所以一开始显示的第一章,应是第二张图片,这里图片的宽度为1170px,所以一开始left为-1170px,同理最后一张图也为第一张图。-->
  <div 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="">
  </div>
  <div id="buttons">
    <!-- 确保span的数量跟img数量一样多,不包括第一张img和最后一张img-->
    <span class='on'></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <a href="javascript:;" class="arrow" id="prev"><</a>
  <a href="javascript:;" class="arrow" id="next">></a>
</div>

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;
      }
      $('#buttons span').eq(currentpic-1).addclass('on').siblings().removeclass('on');
    }
  });

  next.on('click',function(){
    if(!flag){
      calpx(-1170);
      currentpic++;
      if (currentpic > picnum) {
        currentpic = 1;
      }
      $('#buttons span').eq(currentpic-1).addclass('on').siblings().removeclass('on');
    }


  });
  $('.banner').on('mouseover',function(){
    stop();
  }).on('mouseout',function(){
    play();
  })
  function nextclick(){
    next.click();
  }
  function play(){
    setint = setinterval(nextclick,2000);
  }
  function stop(){
    clearinterval(setint);
  }

  function calpx(leftpx){
    flag = true;
    var left = parseint($('.pic-list').css('left'));
    var newleft = left+leftpx;
    var time = 300;
    var interval = 10;
    var speed = leftpx/(time/interval);

    function go(){
      var left = parseint($('.pic-list').css('left'));
      if((speed < 0 && left > newleft) || (speed > 0 && left < newleft)){
        $('.pic-list').css('left', (left + speed) + 'px');
        settimeout(go,interval);
      }else{
        flag = false;
        if( newleft > -1170){
          newleft = picmaxwidth;
        }else if (newleft < picmaxwidth ) {
          newleft = -1170;
        }
        $('.pic-list').css('left',newleft + 'px');
      }
    }
    go();

  }
  play();

});

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