简要教程

本文讲解了jQuery实现简单轮播图，该jquery轮播图仅用40多行js代码就可以实现，轮播图带前后导航按钮，分页圆点导航按钮，并可以自动进行播放。

 使用方法

在页面中引入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>

实现该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');
}

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！