源码：

<!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="#" class="arrow left">&gt;</a>

        <a href="#" 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实现轮播图及其原理的更多相关文章

  1. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  2. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  3. 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...

  4. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

  5. jquery优化轮播图2

    继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  6. jquery改造轮播图1

    g改造轮播图1:https://www.cnblogs.com/huanghuali/p/8677338.html <!DOCTYPE html> <html lang=" ...

  7. jQuery无缝轮播图思路详解-唯品会

    效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...

  8. jQuery封装轮播图插件

    // 布局要求,必须有一个容器,图片和两个按钮,布局方式自定,小圆点样式固定 // <div class="all"> // <img src="img ...

  9. 自己随意写了个简单的依赖jquery的轮播图

    //轮播图 function Switcher(obj){ this.box = $(obj.box); this.width = this.box.width(); this.banner = $( ...

随机推荐

  1. PAT L2-021 点赞狂魔

    https://pintia.cn/problem-sets/994805046380707840/problems/994805058485469184 微博上有个“点赞”功能,你可以为你喜欢的博文 ...

  2. SQLserver 一种简单的GUI方式创建DBlink copy 表数据的方法

    1. 在sqlserver 上面使用GUI的方式创建dblink 首先打开查询分析器 在如下的位置处右键 -新建连接服务器 输入需要copy数据的服务器 输入ip地址 然后建立连接 在打开查询分析器进 ...

  3. hive-site.xml

    https://cwiki.apache.org/confluence/display/Hive/AdminManual+MetastoreAdmin#AdminManualMetastoreAdmi ...

  4. WPF 如何控制右键菜单ContextMenu的弹出

    在具体做一些项目的时候,有时候需要需要先左键点击某个节点,然后再右键点击节点的时候才弹出右键菜单,所以直接右键点击时需要禁用掉右键菜单,这里比如我们为Grid添加了ContextMenu,但是我们需要 ...

  5. HTML DOM 節點

    節點: 整個html文檔是文檔節點: 注釋為注釋節點: 文本為文本節點: html元素為元素節點: html包含的內容為html節點. 節點間的關係: 父節點,子節點和同胞節點. html節點為根節點 ...

  6. LODOP打印控件关联输出各内容

    Lodop打印控件利用SET_PRINT_STYLEA里面的“LinkedItem”可以把多个独立的内容关联起来,让它们顺序打印.这样,就可以实现很多效果,例如一些内容紧跟着表格下方输出,关联表格后就 ...

  7. 一本通1546【NOIP2011】选择客栈

    1546:NOIP2011 选择客栈 时间限制: 1000 ms         内存限制: 524288 KB 题目描述 丽江河边有 n 家很有特色的客栈,客栈按照其位置顺序从 1 到 n 编号. ...

  8. BZOJ1785[USACO 2010 Jan Gold 3.Cow Telephones]——贪心

    题目描述 奶牛们建立了电话网络,这个网络可看作为是一棵无根树连接n(1 n 100,000)个节点,节点编号为1 .. n.每个节点可能是(电话交换机,或者电话机).每条电话线连接两个节点.第i条电话 ...

  9. python 模块和包

    一,模块 1,什么是模块? 常见的场景: 一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py 的后缀. 但其实 import 加载的模块分为四个通用类别: 1,使用pyt ...

  10. Linux LVM逻辑卷配置过程详解（创建，增加，减少，删除，卸载）

    Linux LVM逻辑卷配置过程详解 许多Linux使用者安装操作系统时都会遇到这样的困境:如何精确评估和分配各个硬盘分区的容量,如果当初评估不准确,一旦系统分区不够用时可能不得不备份.删除相关数据, ...