`

轮播图的实现原理

 
阅读更多

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

分享到：
| css元素水平放置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    本文实例为大家分享了jQuery实现轮播图及其原理的具体代码，供大家参考，具体内容如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" name="viewport" content="width=device-width,...

    微信小程序 轮播图实现原理及优化详解

    主要介绍了微信小程序 轮播图实现原理及优化详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    携程_携程移动端_移动端轮播图_源码

    【移动端轮播图实现原理与携程案例分析】 在移动互联网时代，用户界面的交互性和视觉效果成为了吸引用户的重要因素，而移动端轮播图作为一种常见的网页元素，被广泛应用于各种应用程序和网站，包括携程移动端。它...

    轮播图的实现

    在本文中，我们将深入探讨轮播图的实现原理、常用技术以及实际应用。 首先，轮播图的实现可以基于各种前端技术，如HTML、CSS和JavaScript。HTML用于构建基础结构，CSS用于样式设计，而JavaScript则负责动态效果和...

    轮播图片的实现源码

    下面我们将深入探讨轮播图片的实现原理、常见技术以及源码分析。 1. **轮播图片的基本结构** 轮播图片通常由以下几个部分组成： - 图片容器：存放所有待展示图片的区域。 - 图片列表：包含所有轮播图片的元素。 ...

    轮播图实现网络图片加载优化点击事件

    - 自动播放：轮播图可以设置定时器自动切换，以展示下一幅图片。 - 滑动切换：用户可以通过点击左右箭头或者手势滑动来切换图片。 - 图片适应：轮播图应能适应不同的屏幕尺寸，保持图片的适当比例显示。 2. **...

    Android 简单的轮播图

    在Android开发中，轮播图（Carousel）是一种常见的UI组件，通常用于展示一系列图片或...在这个项目"陈诗毅-lunbotu-4.23"中，你可以找到具体实现的代码和注释，通过学习和理解，加深对Android轮播图实现原理的理解。

    轮播图大全

    2. **轮播图实现原理**： - **滑动机制**：通过改变图片或内容的可见性，模拟出平滑过渡的效果，通常包括左右滑动、自动播放、手动控制等功能。 - **定时器**：为了实现自动播放，需要使用JavaScript的`...

    小米轮播图.zip

    2. **轮播图实现原理**：轮播图通常包含一组图片或内容，通过自动或手动切换显示其中的一张。本项目可能使用了定时器（`setInterval`）来实现自动轮播，同时提供导航按钮或滑动指示器供用户手动切换。 3. **CSS样式...

    ajax实现透明度轮播图可点击-悬浮停止.rar

    10. **数据传输优化**：如果轮播图图片数量较大，可以考虑使用AJAX分页加载，或者采用懒加载技术，只在图片进入视口时才加载，以减少页面加载时间和网络带宽的消耗。 综上所述，"ajax实现透明度轮播图可点击-悬浮...

    jQuery实现的轮播图

    实现自动轮播，点击索引切换图片，点击左右按钮实现切换图片

    Android轮播图的实现

    本文将深入探讨如何在Android中实现一个具备风格定制和图片描述功能的轮播图。 首先，我们需要理解轮播图的基本原理。轮播图主要由一组图片或视图组成，通过定时器或用户交互进行自动或手动切换。实现这个功能，...

    一个不错的js轮播图网页特效

    下面将详细介绍JS轮播图的实现原理、常见功能以及如何创建一个基本的轮播图。 1. **轮播图实现原理** 轮播图的基本原理是通过改变图片或内容的显示状态，模拟出平滑过渡的效果。通常使用JavaScript来控制定时器，...

    JS 实现3D立体效果的首页轮播图

    你可以参考其中的代码示例和解释，进一步理解3D轮播图的实现原理和技巧。 总的来说，使用JavaScript实现3D立体轮播图是一个结合了前端技术、视觉设计和用户体验的综合项目。通过理解并实践这些知识点，开发者不仅...

    HTML实现3D轮播图

    `transition`属性则可以设定元素在状态变化时的过渡效果，让轮播图在切换图片时平滑过渡。此外，`perspective`属性可以设置观察者的虚拟距离，增加3D立体感。 JavaScript通常用于控制轮播图的动态行为，如自动播放...

    自己按照步骤实现的轮播图片功能

    轮播图的核心在于定时器（Timer）和图片切换逻辑。通常，我们会使用ViewPager配合PagerAdapter来实现页面的滑动，同时利用 Handler 或 Timer 定时切换页面，达到图片自动播放的效果。在这个过程中，我们需要注意以下...

    ViewPager和Handler结合使用实现轮播图

    本项目“ViewPager和Handler结合使用实现轮播图”就是利用这两种关键元素来创建一个自动滚动的图片展示功能，并且增加了状态指示器，即小圆点，以提示用户当前显示的是轮播图中的哪一张。 首先，我们要理解...

    一种基于原生JavaScript的焦点轮播图简易实现.pdf

    轮播图既能按一定时间间隔自动轮播，也方便用户选择查看某张特定图片，当切换到某张图片时，在图片底部区域显示图片相关的文字说明信息。 为了实现焦点轮播图，需要将图片分为上一张、下一张和指定张三个部分，并...

Magicbox
Global site tag (gtag.js) - Google Analytics