源码：

<!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. Selenium Grid的Java调用方法

    java -jar selenium-server-standalone-.jar -role hub explorer http://192.168.1.173:4444/grid/console ...

  2. Eclipse版本列表

    https://wiki.eclipse.org/Older_Versions_Of_Eclipse http://blog.csdn.net/jaycee110905/article/details ...

  3. Git—学习笔记1

    Git是一种分布式版本控制工具,现阶段比较流行的版本控制工具主要分为:集中式版本控制工具盒分布式版本控制工具. 集中式版本控制工具:SVN和CVS为代表 集中式版本控制系统(每次都得从SVN服务器数据 ...

  4. Node 多页面请求

    //功能:创建web服务器接收客户请求// http://127.0.0.1:8080/index 准备// http://127.0.0.1:8080/news 准备// public/index. ...

  5. ios微信浏览器中video视频播放问题

    微信ios只支持几种特定的视频格式,一般使用mp4格式的视频(腾讯官方就是用的这种视频格式)

  6. 周刷题第二期总结(Longest Substring Without Repeating Characters and Median of Two Sorted Arrays)

    这周前面刷题倒是蛮开心,后面出了很多别的事情和问题就去忙其他的,结果又只完成了最低目标. Lonest Substring Without Repeating Characters: Given a ...

  7. elk认证模块x-pack安装

    一.elasticsearch安装x-pack elasticsearch/bin/elasticsearch-plugin install x-pack ######## -> Downloa ...

  8. SpringBoot(十六)_springboot整合JasperReport6.6.0

    现在项目上要求实现套打,结果公司里有个人建议用JaperReport进行实现,就进入这个东西的坑中.好歹经过挣扎现在已经脱离此坑中.现在我也是仅能实现读取数据库数据转成pdf进行展示,包括中文的展示. ...

  9. BZOJ3697采药人的路径——点分治

    题目描述 采药人的药田是一个树状结构,每条路径上都种植着同种药材.采药人以自己对药材独到的见解,对每种药材进行了分类.大致分为两类,一种是阴性的,一种是阳性的.采药人每天都要进行采药活动.他选择的路径 ...

  10. 洛谷P2619 [国家集训队2]Tree I（带权二分，Kruscal，归并排序）

    洛谷题目传送门 给一个比较有逼格的名词--WQS二分/带权二分/DP凸优化(当然这题不是DP). 用来解决一种特定类型的问题: 有\(n\)个物品,选择每一个都会有相应的权值,需要求出强制选\(nee ...