脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery轮播图

jQuery实现轮播图及其原理详解

 更新时间：2020年04月12日 11:40:03   作者：心晴安夏  
这篇文章主要为大家详细介绍了jQuery实现轮播图及其原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jQuery实现轮播图及其原理的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title>JQuery轮播图</title>
 <style>
 *{
 padding:0;
 margin:0;
 }
 .container{
 width:600px;
 height:400px;
 overflow: hidden;
 position:relative;
 margin:0 auto;
 }
 .list{
 width:3000px;
 height:400px;
 position:absolute;

 }
 .list>img{
 float:left;
 width:600px;
 height:400px;
 }
 .pointer{
 position:absolute;
 width:100px;
 bottom:20px;
 left:250px;
 }
 .pointer>span{
 cursor:pointer;
 display:inline-block;
 width:10px;
 height:10px;
 background: #7b7d80;
 border-radius:50%;
 border:1px solid #fff;
 }
 .pointer .on{
 background: #28a4c9;
 }
 .arrow{
 position:absolute;
 text-decoration:none;
 width:40px;
 height:40px;
 background: #727d8f;
 color:#fff;
 font-weight: bold;
 line-height:40px;
 text-align:center;
 top:180px;
 display:none;
 }
 .arrow:hover{
 background: #0f0f0f;
 }
 .left{
 left:0;
 }
 .right{
 right:0;
 }
 .container:hover .arrow{
 display:block;
 }
 </style>
</head>

<body>
 <div class="container">
 <div class="list" style="left:0px;">
 <!--<img src="../static/image/photo1.jpg" alt="5"/>-->
 <img src="../static/image/banner.jpg" alt="1"/>
 <img src="../static/image/slide1.jpg" alt="2"/>
 <img src="../static/image/slide1.jpg" alt="3"/>
 <img src="../static/image/slide1.jpg" alt="4"/>
 <img src="../static/image/photo1.jpg" alt="5"/>
 <!--<img src="../static/image/banner.jpg" alt="1"/>-->
 </div>
 <div class="pointer">
 <span index="1" class="on"></span>
 <span index="2"></span>
 <span index="3"></span>
 <span index="4"></span>
 <span index="5"></span>
 </div>
 <a href="#" rel="external nofollow" rel="external nofollow" class="arrow left">&gt;</a>
 <a href="#" rel="external nofollow" rel="external nofollow" class="arrow right">&lt;</a>
 </div>

 <script src="../static/js/jquery-3.2.1.min.js"></script>
 <script>
 var imgCount = 5;
 var index = 1;
 var intervalId;
 var buttonSpan = $('.pointer')[0].children;//htmlCollection 集合
 //自动轮播功能 使用定时器
 autoNextPage();
 function autoNextPage(){
 intervalId = setInterval(function(){
 nextPage(true);
 },3000);
 }
 //当鼠标移入 停止轮播
 $('.container').mouseover(function(){
 console.log('hah');
 clearInterval(intervalId);
 });
 // 当鼠标移出，开始轮播
 $('.container').mouseout(function(){
 autoNextPage();
 });
 //点击下一页 上一页的功能
 $('.left').click(function(){
 nextPage(true);
 });
 $('.right').click(function(){
 nextPage(false);
 });
 //小圆点的相应功能 事件委托
 clickButtons();
 function clickButtons(){
 var length = buttonSpan.length;
 for(var i=0;i<length;i++){
 buttonSpan[i].onclick = function(){
 $(buttonSpan[index-1]).removeClass('on');
 if($(this).attr('index')==1){
 index = 5;
 }else{
 index = $(this).attr('index')-1;
 }
 nextPage(true);

 };
 }
 }
 function nextPage(next){
 var targetLeft = 0;
 //当前的圆点去掉on样式
 $(buttonSpan[index-1]).removeClass('on');
 if(next){//往后走
 if(index == 5){//到最后一张，直接跳到第一张
 targetLeft = 0;
 index = 1;
 }else{
 index++;
 targetLeft = -600*(index-1);
 }

 }else{//往前走
 if(index == 1){//在第一张，直接跳到第五张
 index = 5;
 targetLeft = -600*(imgCount-1);
 }else{
 index--;
 targetLeft = -600*(index-1);
 }

 }
 $('.list').animate({left:targetLeft+'px'});
 //更新后的圆点加上样式
 $(buttonSpan[index-1]).addClass('on');


 }


 </script>
</body>

</html>

效果图：

原理：

页面结构方面：

将轮播图容器设置成相对定位，宽度设置成图片的宽度；容器中分为四部分：轮播的图片；点击的小按钮；前一张；后一张

样式方面：

  • 轮播图容器为相对定位，宽度/高度设置成图片的宽度/高度，设置overflow为hidden；
  • 容器中的每一部分都设置成绝对定位，放到相应的位置；
  • 轮播图片的容器宽度设置成所有图片的宽度和，left开始先设置为0；
  • 每张图片宽度一样，都设成左浮动，左右图片都在一行排列，所以轮播图的实质是装有图片的容器的移动，每次移动的距离为一张图片的宽度，这样每次就只显示一张图片；
  • 前一张/后一张设置成display为none，当鼠标移入总容器时，再设置成display为block

功能方面：

自动轮播为一个定时循环机制setInteval，鼠标移入，循环停止，移除循环继续；

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • jQuery中remove()方法用法实例

    jQuery中remove()方法用法实例

    这篇文章主要介绍了jQuery中remove()方法用法,以三个不同的实例形式分别演示了remove()方法删除元素的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • Java框架SSH结合Easyui控件实现省市县三级联动示例解析

    Java框架SSH结合Easyui控件实现省市县三级联动示例解析

    这篇文章主要为大家详细介绍了Java框架SSH结合Easyui控件实现省市县三级联动示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • jquery-easyui关闭tab自动切换到前一个tab

    jquery-easyui关闭tab自动切换到前一个tab

    考虑到用户体验，当用户关闭tab时，自动切换到前一个tab不至于让用户看到空的界面。
    2010-07-07
  • JQUERY设置IFRAME的SRC值的代码

    JQUERY设置IFRAME的SRC值的代码

    有时候需要设置iframe的src属性，下面是基于jquery的实现代码。
    2010-11-11
  • jquery数组之存放checkbox全选值示例代码

    jquery数组之存放checkbox全选值示例代码

    使用jquery数组可以存放checkbox全选值，下面有个不错的示例，感兴趣的朋友可以参考下
    2013-12-12
  • jquery 延迟执行实例介绍

    jquery 延迟执行实例介绍

    延迟执行在某些特殊的情况下还是蛮有用的，实现的方法也很简单，本文有个不错的示例，有需要的朋友可以参考下，希望对大家有所帮助
    2013-08-08
  • 利用jquery正则表达式在页面验证url网址输入是否正确

    利用jquery正则表达式在页面验证url网址输入是否正确

    这篇文章主要介绍了关于利用jquery正则表达式在页面验证url网址输入是否正确的相关资料，文中给出了完整的示例代码，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
    2017-04-04
  • jQuery remove()过滤被删除的元素（推荐）

    jQuery remove()过滤被删除的元素（推荐）

    jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。下面通过实例代码给大家介绍jQuery remove()过滤被删除的元素，需要的的朋友参考下吧
    2017-07-07
  • 手写简单的jQuery雪花飘落效果实例

    手写简单的jQuery雪花飘落效果实例

    这篇文章主要给大家介绍了关于手写简单的jQuery雪花飘落的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2018-04-04
  • Jquery UI震动效果实现原理及步骤

    Jquery UI震动效果实现原理及步骤

    如果你想你的博客页面某些部分引起读者的注意，你可以使这些部分震动，如广告等等，今天这篇文章将介绍怎样使你的页面中的元素震动起来,感兴趣的你可不要错过了哦，或许对你学习jquery ui 有所帮助
    2013-02-02

最新评论