jQuery如何實(shí)現(xiàn)的網(wǎng)站banner圖片無縫輪播效果-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)jQuery如何實(shí)現(xiàn)的網(wǎng)站banner圖片無縫輪播效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

為郟縣等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及郟縣網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站制作、成都網(wǎng)站制作、郟縣網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

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

<!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)的對其方式
          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)行效果：

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

jquery是什么

jquery是一個(gè)簡潔而快速的JavaScript庫，它具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫，以便快速開發(fā)網(wǎng)站。

感謝各位的閱讀！關(guān)于“jQuery如何實(shí)現(xiàn)的網(wǎng)站banner圖片無縫輪播效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前題目：jQuery如何實(shí)現(xiàn)的網(wǎng)站banner圖片無縫輪播效果-創(chuàng)新互聯(lián)
地址分享：http://aaarwkj.com/article46/cogjeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、定制開發(fā)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

jQuery如何實(shí)現(xiàn)的網(wǎng)站banner圖片無縫輪播效果-創(chuàng)新互聯(lián)

jquery是什么