jQuery實(shí)現(xiàn)的網(wǎng)站banner圖片無(wú)縫輪播效果完整實(shí)例

更新時(shí)間：2019年01月28日 09:50:42 作者：熊哥club

這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)站banner圖片無(wú)縫輪播效果,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合時(shí)間函數(shù)實(shí)現(xiàn)圖片定時(shí)輪播切換相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)的網(wǎng)站banner圖片無(wú)縫輪播效果。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>圖片輪播</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel=" rel="external nofollow" stylesheet">
<style type="text/css">
  html,body{
    padding: 0;
    margin: 0;
  }
  ul,ul li{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .box{
  }
  #banner{
    position: relative;
    height:auto;
    overflow: hidden;
  }
  #banner ul{
    position:absolute;
  }
  #banner ul li{
    float: left;
  }
  #banner ul li img{
    width: 100%;
    height: 100%;
  }
  #banner #prevBtn,#banner #nextBtn{
    height:80px;
    width:30px;
    background:rgba(0,0,0,0.5);
    position:absolute;
    top:50%;
    margin-top:-40px;
    font-size:30px;
    line-height:80px;
    text-align:center;
    text-decoration:none;
    color:white;
    opacity: 0;
    transition: opacity 0.8s ease;
  }
  #banner #prevBtn{
    left:0;
  }
  #banner #nextBtn{
    right:0;
  }
  #banner:hover #prevBtn,#banner:hover #nextBtn{
    opacity: 1;
  }
  .dot{
    height:10px;
    width:10px;
    border-radius:10px;
    background:#2196f3;
    display:inline-block;
    margin:5px;
  }
  .on{
    background: #009688;
  }
</style>
</head>
<body>
  <div class="box">
    <div id="banner">
      <ul id="banner-wrap">
        <li>
          <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img1.jpg">
        </li>
        <li>
          <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img2.jpg">
        </li>
        <li>
          <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img3.jpg">
        </li>
        <li>
          <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img4.jpg">
        </li>
        <li>
          <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img5.jpg">
        </li>
      </ul>
    </div>
  </div>
  <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script>
  <script type="text/javascript">
    (function($,window,document,undefinen){
      $.fn.bannerSwiper=function(option){
        this.default={
          boxWrap:null,//必填
          nextBtn:false,//是否往下啟動(dòng)按鈕
          prevBtn:false,//是否往上啟動(dòng)按鈕
          autoPlay:false,//是否啟動(dòng)自動(dòng)播放
          times:3000,//自動(dòng)輪播的時(shí)間間隔,
          speed:600,//點(diǎn)擊按鈕是切換的速度
          circle:false,//是否啟動(dòng)小圓點(diǎn)
          circleAlign:"center",//小圓點(diǎn)的對(duì)其方式
          circleClick:false//小圓點(diǎn)是否可以點(diǎn)擊
        }
        var self=this;
        this.time=null;
        this.options=$.extend({},this.default,option);
        self.flag=true;
        // 插件入口
        this.init=function(){
          this.bulid();
        }
        this.bulid=function(){
          var self=this;
          var wrap=self.options.boxWrap;
          self.num=1;
          self.nowTime=+new Date();
          self.width=$(window).width();
          var firstImg=$(wrap).find('li').first();
          var lastImg=$(wrap).find('li').last();
          $(wrap).append(firstImg.clone());
          $(wrap).prepend(lastImg.clone());
          self.length=$(wrap).find('li').length;
          $(wrap).width(self.width*self.length);
          $(wrap).find('li').width(self.width)
          $(wrap).parent().height(480);
          $(wrap).parent().width(self.width);
          $(wrap).css({'left':-self.width*self.num})
          // 是否啟動(dòng)自動(dòng)輪播
          if(self.options.autoPlay){
            self.plays();
          }
          // 是否啟動(dòng)按鈕
          if(self.options.nextBtn){
            self.NextBtn();
          }
          // 是否啟動(dòng)按鈕
          if(self.options.prevBtn){
            self.prevBtn();
          }
          // 是否啟動(dòng)小圓點(diǎn)
          if(self.options.circle){
            self.circle()
          }
          if(self.options.circleClick){
            self.clickCircle();
          }
        }
        // // 鼠標(biāo)移入時(shí)
        self.on('mouseenter',function(){
          self.stops();
        })
        // 鼠標(biāo)移出時(shí)
        self.on('mouseleave',function(){
          self.plays(1);
        })
        // 開始計(jì)時(shí)器，自動(dòng)輪播
        this.plays=function(){
          var self=this;
          // self.stops();
          console.log('play')
          this.time=setInterval(function(){
            self.go(-self.width)
          },self.options.times);
        }
        // 停止計(jì)時(shí)器
        this.stops=function(){
          console.log('stop');
          clearInterval(self.time)
        }
        // 手動(dòng)創(chuàng)建按鈕元素
        this.prevBtn=function(){
          var self=this;
          var ele=$("<a href='javascript:;' id='prevBtn'><</a>");
          self.append(ele);
          $('#prevBtn').bind("click",function(){
            self.go(self.width);
          })
        }
        // 手動(dòng)創(chuàng)建按鈕元素
        this.NextBtn=function(){
          var self=this;
          var ele=$("<a href='javascript:;' id='nextBtn'>></a>");
          self.append(ele)
          $('#nextBtn').bind("click",function(){
            self.go(-self.width);
          })
        }
        // 手動(dòng)創(chuàng)建小圓點(diǎn)
        this.circle=function(){
          var self=this;
          var ele=$('<div id="circle-wrap"></div>');
          for(var i=0;i<self.length-2;i++){
            $('<a class="dot" href="javascript:;" rel="external nofollow" ></a>').appendTo(ele)
          }
          ele.css({
            "position":"absolute",
            'bottom':'0',
            'right':'0',
            'left':'0',
            'height':'20px',
            "padding":"0 10px",
            'text-align':self.options.circleAlign
          });
          self.append(ele);
          self.playCircle(this.num-1);
        }
        //小圓點(diǎn)指定當(dāng)前項(xiàng)
        this.playCircle=function(num){
          $('#circle-wrap').find('.dot').eq(num).addClass('on').siblings().removeClass('on');
        }
        // 點(diǎn)擊小圓點(diǎn)
        this.clickCircle=function(){
          var self=this;
          $('#circle-wrap').find('.dot').on('click',function(){
            self.num=$(this).index()+1;
            self.circlePlay()
          })
        }
        // 點(diǎn)擊小圓點(diǎn)，圖片切換
        this.circlePlay=function(){
          self.flag=true;
          if(self.flag){
            self.flag=false;
            $(self.options.boxWrap).stop().animate({
              'left':-self.num*self.width
            },self.options.speed,function(){
              self.flag=true;
            });
          }
          self.playCircle(this.num-1);
        }
        // 點(diǎn)擊按鈕，進(jìn)行輪播,以及自動(dòng)輪播
        this.go=function(offset){
          var self=this;
          if(self.flag){
            self.flag=false;
             if(offset<0){
               self.num++;
               if(self.num>self.length-2){
                 self.num=1;
               }
             }
             if(offset>0){
               self.num--;
               if(self.num<=0){
                self.num=self.length-2
               }
             }
             if(Math.ceil($(self.options.boxWrap).position().left)<-(self.length-2)*self.width){
              $(self.options.boxWrap).css({
                'left':-self.width
              });
            }
            if(Math.ceil($(self.options.boxWrap).position().left)>-self.length){
              $(self.options.boxWrap).css({
                'left':-self.width*(self.length-2)
              })
            }
            self.playCircle(this.num-1);
            $(self.options.boxWrap).stop().animate({
              'left':$(self.options.boxWrap).position().left+offset
            },self.options.speed,function(){
              self.flag=true;
            });
          }
        }
        this.init();
      }
    })(jQuery,window,document)
    $('#banner').bannerSwiper({
      boxWrap:"#banner-wrap",
      nextBtn:true,
      prevBtn:true,
      autoPlay:true,
      circle:true,
      circleClick:true
    })
  </script>
</body>
</html>

運(yùn)行效果：