jQuery实现简单轮播图解析
沉沙 2018-06-28 来源 : 阅读 1434 评论 0

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

简要教程

本文讲解了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频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程