轮播图的实现原理

来源：互联网发布：化学反应软件编辑：程序博客网时间：2024/04/30 01:43

一。实现轮播图最主要的就是定时器（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等于第一张图片.这样轮播图就动起来了。

2. 轮播图动起来基本就是只显示一张图片隐藏其他的图片。我上面使用的是opacity 。

3. 图片下面的按钮。主要就是使下面的按钮与上面的图片一一对应。然后点击下面的按钮显示对应的图片。

4. 左右的上一张和下一张按钮。点击左边的上一张按钮图片向前显示，实现原理就是使 index 对象减一。点击左边的下一张按钮图片向后显示，实现原理就是使 index 对象加一。

5. 对应上一张和下一张连续点击的问题就是给这两个按钮加上延时器。

6. 当鼠标放在轮播图区域时停止轮播，实现原理就是清除定时器，离开开始轮播就是加上定时器。

代码所在地：https://git.oschina.net/huangzuomin/lunbotu.git

轮播图封装后可以直接用，下载地址：https://git.oschina.net/huangzuomin/carouselFigure.git

阅读全文

0 0