轮播图的实现原理

心已赠人 2022-05-18 01:41 194阅读 0赞

## 一、实现轮播图最主要的就是定时器 （setInterval 函数和 clearInterval 函数），他们分别是定时和清除定时。 ##

## 二 、html代码如下： ##

<div class="warp"> <div class="mod-tab"> <ul id="list"> <li class="tab-con" style="opacity: 1"> <span class="pic"> <a href="#" style="background-image: url(image/1.jpg)"></a> </span> </li> <li class="tab-con" style="opacity: 0"> <span class="pic"> <a href="#" style="background-image: url(image/2.jpg)"></a> </span> </li> <li class="tab-con" style="opacity: 0"> <span class="pic"> <a href="#" style="background-image: url(image/3.jpg)"></a> </span> </li> <li class="tab-con" style="opacity: 0"> <span class="pic"> <a href="#" style="background-image: url(image/4.jpg)"></a> </span> </li> <li class="tab-con" style="opacity: 0"> <span class="pic"> <a href="#" style="background-image: url(image/5.jpg)"></a> </span> </li> <li class="tab-con" style="opacity: 0"> <span class="pic"> <a href="#" style="background-image: url(image/6.jpg)"></a> </span> </li> <li class="tab-con" style="opacity: 0"> <span class="pic"> <a href="#" style="background-image: url(image/7.jpg)"></a> </span> </li> <li class="tab-con" style="opacity: 0"> <span class="pic"> <a href="#" style="background-image: url(image/8.jpg)"></a> </span> </li> </ul> <div id="gb-tab" class="gb-tab"> <a href="javascript:;" class="item2"></a> <a href="javascript:;" class="item"></a> <a href="javascript:;" class="item"></a> <a href="javascript:;" class="item"></a> <a href="javascript:;" class="item"></a> <a href="javascript:;" class="item"></a> <a href="javascript:;" class="item"></a> <a href="javascript:;" class="item"></a> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div> </div> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript" src="index.js"></script>

上面是用八张图实现的轮播的html图。

## 三、css代码如下： ##

.warp{ width: 100%; }
    .mod-tab{ width: 100%; min-width: 1200px; height: 383px; margin: 0 auto 30px; position: relative; }
    .gb-tab-pn{ overflow: hidden; height: 383px; position: relative; }
    ul{ list-style: none; }
    .tab-con{ height: 383px; width: 100%; position: absolute; top: 0; left: 0; }
    .pic{ height: 383px; width: 100%; }
    .pic a{ display: block; width: 100%; height: 383px; background-position: center center; background-repeat: no-repeat; }
    .gb-tab{ overflow: hidden; position: absolute; z-index: 60; bottom: 0; height: 40px; width: 100%; text-align: center; }
    .gb-tab .item{ display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin: 6px; color: #6ff; background-color: #003c49; text-align: center; line-height: 16px; }
    .item2{ display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin: 6px; color: #6ff; background-color: #ffffff; text-align: center; line-height: 16px; }
    
    .gb-tab a:hover{ background-color: #ffffff; }
    .on{ background-color: #ffffff; }
    .arrow{ position: absolute; top: 171px; z-index: 99; display: none; width: 40px; height: 40px; font-size: 36px; font-weight: bold; line-height: 39px; text-align: center; color: #fff; background-color: RGBA(0, 0, 0, .3); cursor: pointer; }
    .arrow:hover { background-color: RGBA(0, 0, 0, .7); }
    .warp:hover .arrow { display: block; }
    #prev { left: 20px; }
    #next { right: 20px; }

css代码主要是用来定位。

## 四、js代码如下： ##

var list = $('#list .tab-con'); //获取与图片相关的<li>对象
    var container = $('.mod-tab');   //获取整个轮播图容器对象
    var index = 1;                   //指当前图片对象
    var timer;                       //定时对象
    var buttons = $('#gb-tab a');    //获取图片下面的按钮对象
    var prev = $('#prev');           //获取左按钮对象
    var next = $('#next');           //获取右按钮对象
    var stateNext = true;
    var statePrev = true;
    
    $(document).ready(function(){ 
        container.mouseover(function(){     //用于鼠标进入轮播图区域停止轮播
            stop();
        });
        container.mouseout(function(){      //用于鼠标离开轮播图区域开始轮播
            play();
        });
        for (var i = 0; i < buttons.length; i++) {  //循环绑定下面按钮的点击事情
            (function (i) { 
                buttons[i].onclick = function () { 
                    index = i + 1;
                    imgShow();
                    buttonsShow();
                }
            })(i)
        }
        prev.click(function () {             //点击左按钮轮播图片事件。利用延时器解决无限点击问题。
            if(statePrev){
                index -= 1;
                if (index < 1) {
                    index = 8
                }
                imgShow();
                buttonsShow();
                statePrev = false;
                setTimeout(function(){ 
                    statePrev = true;
                },2000)
            }
        });
    
        next.click(function () { 
            //由于上边定时器的作用，index会一直递增下去，我们只有8个小圆点，所以需要做出判断
            if(stateNext){
                index += 1;
                if (index > 8) {
                    index = 1
                }
                imgShow();
                buttonsShow();
                stateNext = false;
                setTimeout(function(){ 
                    stateNext = true
                },2000)
            }
        });
    });
    
    function play() {                     //开始轮播函数
        //重复执行的定时器
        timer = setInterval(function () { 
            index += 1;
            if (index > 8) {
                index = 1
            }
            imgShow();
            buttonsShow();
        }, 4000)
    }
    
    function stop() {                    //停止轮播函数
        clearInterval(timer);
    }
    
    function imgShow(){                  //图片显示函数
        for (var i = 0; i < list.length; i++) {
            if (list.eq(i).css('opacity') == 1) {
                list.eq(i).fadeTo(1000,0);
            }
        }
        list.eq(index - 1).fadeTo(1000,1);
    }
    
    function buttonsShow() {            图片下面按钮的显示函数。
        //将之前的小圆点的样式清除
        for (var i = 0; i < buttons.length; i++) {
            if (buttons[i].className == "item2") {
                buttons[i].className = "item";
            }
        }
        buttons[index - 1].className = "item2";
    }
    play();

## 五、总结 ##

在html ，css 已经写好的情况下。最主要的就是js的功能问题了。轮播图的功能步骤如下：

1.先让图片轮播起来。基本就是写一个 play函数里面加定时器，每次使图片的index对象加一，当index大于最大值时，设置index等于第 一张图片.这样轮播图就动起来了。

1.  轮播图动起来基本就是只显示一张图片隐藏其他的图片。我上面使用的是opacity 。
2.  图片下面的按钮。主要就是使下面的按钮与上面的图片一一对应。然后点击下面的按钮显示对应的图片。
3.  左右的上一张和下一张按钮。点击左边的上一张按钮图片向前显示，实现原理就是使 index 对象减一。点击左边的下一张按钮图片向后显示，实现原理就是使 index 对象加一。
4.  对应上一张和下一张连续点击的问题就是给这两个按钮加上延时器。
5.  当鼠标放在轮播图区域时停止轮播，实现原理就是清除定时器，离开开始轮播就是加上定时器。

发表评论取消回复

表情：

评论列表（有 0 条评论，194人围观）

还没有评论，来说两句吧...

相关阅读

相关轮播图的多种实现及原理

【写在前面】最近，在自己的项目中遇到了很多轮播图。当然，这里的很多，并非数量多，指的是种类很多，即多种实现。然后我觉得有不少小技巧，就决定写一篇文章讲解一下。

￡神魔★判官ぃ/ 2022年12月31日 06:22/ 0 赞/ 91 阅读

相关轮播图实现html,html、css、js实现轮播图

2017-03-13 今天把轮播图的知识1过了一下，写了一个比较简单的轮播图，给大家参考一下。查看具体的效果点击这个链接： http://gjhnstxu.me/%E8

落日映苍穹つ/ 2022年10月10日 09:46/ 0 赞/ 296 阅读

相关 html中简单轮播图实现原理,常见轮播效果及其实现原理

常见轮播效果及其实现原理说明：本项目只做最基础的原理分析与最简单的应用场景。 1. 简单做法：css定位 + js滑动动画思路：在同一个父容器内， 1. 通过改

痛定思痛。/ 2022年10月05日 12:44/ 0 赞/ 172 阅读

相关 html中简单轮播图实现原理,jQuery实现一个简单的轮播图

jQuery实现一个简单的轮播图发布时间：2020-08-25 02:23:35 来源：脚本之家阅读：100 作者：nameless-212 html代码：轮

逃离我推掉我的手/ 2022年10月05日 12:44/ 0 赞/ 186 阅读

相关图片轮播html实现原理,简单轮播图的实现及原理讲解（js）

0.最终效果预览 ![366e374e108d][] 鼠标未触及区域时(自动滚动中) ![366e374e108d][] 鼠标触及区域后 (停止滚动，显示按钮) 基本

叁歲伎倆/ 2022年10月05日 10:57/ 0 赞/ 256 阅读

相关轮播图的实现

轮播图的实现, 已封装轮播轮播图在网页搭建中经常遇到, 与轮播有关的卡片滑块也常见, 所以有必要理解其中的原理轮播图HTML中应包含几个部分?

深碍√TFBOYSˉ_/ 2022年05月22日 22:54/ 0 赞/ 214 阅读

相关轮播图的实现原理

一、实现轮播图最主要的就是定时器（setInterval 函数和 clearInterval 函数），他们分别是定时和清除定时。二、html代码如下：

心已赠人/ 2022年05月18日 01:41/ 0 赞/ 195 阅读

相关简单轮播图实现原理详解

轮播图实现思路：第一步：设计轮播图片的容器； <div id="myCarousel" class="carousel" data-ride="carousel"> 注

快来打我*/ 2022年05月17日 11:15/ 0 赞/ 161 阅读

相关轮播图的实现

简单轮播图实现（H5+CS3+JS&JQuery）最终效果图如下：每2000毫秒自动轮播，鼠标划入显示左右按钮；进行手动点击按钮左右切换。划出隐藏按钮并继续进行

阳光穿透心脏的1/2处/ 2022年04月02日 13:52/ 0 赞/ 195 阅读

相关轮播图的实现

轮播图的实现 <view> <swiper class='swipers' indicatorDots='true' interval=

清疚/ 2021年09月17日 00:20/ 0 赞/ 483 阅读