幻灯片/轮播

简单轮播图jQuery代码

阿里云

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

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="css/style.css">
  2. <script type="text/javascript" src="path/to/jquery.min.js"></script>

HTML 结构

该轮播图的 HTML 结构如下:

  1. <div id="wrapper">
  2.   <div id="slider-wrap">
  3.             <ul id="slider">
  4.                <li data-color="#1abc9c">
  5.                   <div>
  6.                       <h3>Slide #1</h3>
  7.                       <span>Sub-title #1</span>
  8.                   </div>                
  9.                   <i class="fa fa-image"></i>
  10.                </li>
  11.                <li data-color="#3498db">
  12.                   <div>
  13.                       <h3>Slide #2</h3>
  14.                       <span>Sub-title #2</span>
  15.                   </div>
  16.                   <i class="fa fa-gears"></i>
  17.                </li>
  18.                <li data-color="#9b59b6">
  19.                   <div>
  20.                       <h3>Slide #3</h3>
  21.                       <span>Sub-title #3</span>
  22.                   </div>
  23.                   <i class="fa fa-sliders"></i>
  24.                </li>
  25.                <li data-color="#34495e">
  26.                   <div>
  27.                       <h3>Slide #4</h3>
  28.                       <span>Sub-title #4</span>
  29.                   </div>
  30.                   <i class="fa fa-code"></i>
  31.                </li>
  32.                <li data-color="#e74c3c">
  33.                   <div>
  34.                       <h3>Slide #5</h3>
  35.                       <span>Sub-title #5</span>
  36.                   </div>
  37.                   <i class="fa fa-microphone-slash"></i>
  38.                </li>
  39.             </ul>
  40.              <!--控制按钮-->
  41.             <div class="btns" id="next"><i class="fa fa-arrow-right"></i></div>
  42.             <div class="btns" id="previous"><i class="fa fa-arrow-left"></i></div>
  43.             <div id="counter"></div>
  44.  
  45.             <div id="pagination-wrap">
  46.               <ul>
  47.               </ul>
  48.             </div>
  49.             <!--控制按钮-->
  50.   </div>
  51. </div>

JavaScript

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

  1. //current position
  2. var pos = 0;
  3. //number of slides
  4. var totalSlides = $('#slider-wrap ul li').length;
  5. //get the slide width
  6. var sliderWidth = $('#slider-wrap').width();
  7. $(document).ready(function(){
  8.   /*****************
  9.    BUILD THE SLIDER
  10.   *****************/
  11.   //set width to be 'x' times the number of slides
  12.   $('#slider-wrap ul#slider').width(sliderWidth*totalSlides);
  13.    //next slide   
  14.   $('#next').click(function(){
  15.     slideRight();
  16.   });
  17.  
  18.   //previous slide
  19.   $('#previous').click(function(){
  20.     slideLeft();
  21.   });
  22.   /*************************
  23.    //*OPTIONAL SETTINGS
  24.   ************************/
  25.   //automatic slider
  26.   var autoSlider = setInterval(slideRight, 3000);
  27.  
  28.   //for each slide 
  29.   $.each($('#slider-wrap ul li'), function() { 
  30.      //set its color
  31.      var c = $(this).attr("data-color");
  32.      $(this).css("background",c);
  33.  
  34.      //create a pagination
  35.      var li = document.createElement('li');
  36.      $('#pagination-wrap ul').append(li);    
  37.   });
  38.  
  39.   //counter
  40.   countSlides();
  41.  
  42.   //pagination
  43.   pagination();
  44.  
  45.   //hide/show controls/btns when hover
  46.   //pause automatic slide when hover
  47.   $('#slider-wrap').hover(
  48.     function(){ $(this).addClass('active'); clearInterval(autoSlider); }, 
  49.     function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); }
  50.   );
  51. });
  52.  
  53. /***********
  54.  SLIDE LEFT
  55. ************/
  56. function slideLeft(){
  57.   pos--;
  58.   if(pos==-1){ pos = totalSlides-1; }
  59.   $('#slider-wrap ul#slider').css('left', -(sliderWidth*pos));  
  60.  
  61.   //*> optional
  62.   countSlides();
  63.   pagination();
  64. }
  65. /************
  66.  SLIDE RIGHT
  67. *************/
  68. function slideRight(){
  69.   pos++;
  70.   if(pos==totalSlides){ pos = 0; }
  71.   $('#slider-wrap ul#slider').css('left', -(sliderWidth*pos)); 
  72.   countSlides();
  73.   pagination();
  74. }
  75. /************************
  76.  //*> OPTIONAL SETTINGS
  77. ************************/
  78. function countSlides(){
  79.   $('#counter').html(pos+1 + ' / ' + totalSlides);
  80. }
  81.  
  82. function pagination(){
  83.   $('#pagination-wrap ul li').removeClass('active');
  84.   $('#pagination-wrap ul li:eq('+pos+')').addClass('active');
  85. }

简单轮播图 jQuery 代码

已有 728 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(2)

评论:

2 条评论,访客:0 条,博主:0 条
  1. 菜鸟dw
    菜鸟dw发布于: 

    图片放那里?

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!