这是一款jquery简单轮播图代码。该jquery轮播图仅用40多行js代码就可以实现，轮播图带前后导航按钮，分页圆点导航按钮，并可以自动进行播放。

使用方法

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

HTML结构

该轮播图的HTML结构如下：

  

            

               

                  

                      
Slide #1
                      Sub-title #1
                  
                
                  
               
               

                  

                      
Slide #2
                      Sub-title #2
                  
                  
               
               

                  

                      
Slide #3
                      Sub-title #3
                  
                  
               
               

                  

                      
Slide #4
                      Sub-title #4
                  
                  
               
               

                  

                      
Slide #5
                      Sub-title #5
                  
                  
               
            
             
            

            

            

            
            

              

              
            
             
  

                

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

该jquery轮播图的原文地址为：https://codepen.io/AndreCortellini/pen/kxwmj