轮播图的实现原理_html轮播原理

一。实现轮播图最主要的就是定时器 （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