jquery特效简单轮播图代码下载

分享 :

网盘下载链接:

提取密码: suik
复制提取密码
这是一款jquery简单轮播图代码。该jquery轮播图仅用40多行js代码就可以实现,轮播图带前后导航按钮,分页圆点导航按钮,并可以自动进行播放。
  • 详情
    文件来源

    网络收集

    更新日期

    2018-01-02

    适用平台

    All

    系统位数

    ALL

    文件格式

    zip

    文件语言

    中文

    文件授权

    免费

    下载次数

    18次

    这款jquery简单轮播图代码效果如下:

  • 使用说明

    在页面中引入jquery和样式文件style.css。

    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="path/to/jquery.min.js"></script>
    

    HTML结构

    该轮播图的HTML结构如下:

    <div id="wrapper">
      <div id="slider-wrap">
                <ul id="slider">
                   <li data-color="#1abc9c">
                      <div>
                          <h3>Slide #1</h3>
                          <span>Sub-title #1</span>
                      </div>                
                      <i class="fa fa-image"></i>
                   </li>
                   <li data-color="#3498db">
                      <div>
                          <h3>Slide #2</h3>
                          <span>Sub-title #2</span>
                      </div>
                      <i class="fa fa-gears"></i>
                   </li>
                   <li data-color="#9b59b6">
                      <div>
                          <h3>Slide #3</h3>
                          <span>Sub-title #3</span>
                      </div>
                      <i class="fa fa-sliders"></i>
                   </li>
                   <li data-color="#34495e">
                      <div>
                          <h3>Slide #4</h3>
                          <span>Sub-title #4</span>
                      </div>
                      <i class="fa fa-code"></i>
                   </li>
                   <li data-color="#e74c3c">
                      <div>
                          <h3>Slide #5</h3>
                          <span>Sub-title #5</span>
                      </div>
                      <i class="fa fa-microphone-slash"></i>
                   </li>
                </ul>
                 <!--控制按钮-->
                <div class="btns" id="next"><i class="fa fa-arrow-right"></i></div>
                <div class="btns" id="previous"><i class="fa fa-arrow-left"></i></div>
                <div id="counter"></div>
                 
                <div id="pagination-wrap">
                  <ul>
                  </ul>
                </div>
                <!--控制按钮-->
      </div>
    </div>
    

    JavaScript

    实现该jquery轮播图的js代码如下:

    //current position
    var pos = 0;
    //number of slides
    var totalSlides = $('#slider-wrap ul li').length;
    //get the slide width
    var sliderWidth = $('#slider-wrap').width();
    $(document).ready(function(){
      /*****************
       BUILD THE SLIDER
      *****************/
      //set width to be 'x' times the number of slides
      $('#slider-wrap ul#slider').width(sliderWidth*totalSlides);
       //next slide   
      $('#next').click(function(){
        slideRight();
      });
       
      //previous slide
      $('#previous').click(function(){
        slideLeft();
      });
      /*************************
       //*OPTIONAL SETTINGS
      ************************/
      //automatic slider
      var autoSlider = setInterval(slideRight, 3000);
       
      //for each slide 
      $.each($('#slider-wrap ul li'), function() { 
         //set its color
         var c = $(this).attr("data-color");
         $(this).css("background",c);
          
         //create a pagination
         var li = document.createElement('li');
         $('#pagination-wrap ul').append(li);    
      });
       
      //counter
      countSlides();
       
      //pagination
      pagination();
       
      //hide/show controls/btns when hover
      //pause automatic slide when hover
      $('#slider-wrap').hover(
        function(){ $(this).addClass('active'); clearInterval(autoSlider); }, 
        function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); }
      );
    });
     
    /***********
     SLIDE LEFT
    ************/
    function slideLeft(){
      pos--;
      if(pos==-1){ pos = totalSlides-1; }
      $('#slider-wrap ul#slider').css('left', -(sliderWidth*pos));  
       
      //*> optional
      countSlides();
      pagination();
    }
    /************
     SLIDE RIGHT
    *************/
    function slideRight(){
      pos++;
      if(pos==totalSlides){ pos = 0; }
      $('#slider-wrap ul#slider').css('left', -(sliderWidth*pos)); 
      countSlides();
      pagination();
    }
    /************************
     //*> OPTIONAL SETTINGS
    ************************/
    function countSlides(){
      $('#counter').html(pos+1 + ' / ' + totalSlides);
    }
     
    function pagination(){
      $('#pagination-wrap ul li').removeClass('active');
      $('#pagination-wrap ul li:eq('+pos+')').addClass('active');
    } ```               
    
  • 相关下载