1、轮播一：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        *{

            padding: 0;

            margin: 0;

        }

        ul{

            list-style: none;

        }

        .slider-list{

            width: 580px;

            overflow: hidden;

            margin: 100px auto;

            position: relative;

        }

        .slider-list .slider-wrapper{

            height: 470px;

        }

        .slider-wrapper ul{

            height: 100%;

            position: relative;

        }

        .slider-wrapper ul li{

            float: left;

            width: 590px;

            height: 470px;

        }

        .slider-wrapper ul li a{

            display: block;

            width: 100%;

            height: 100%;

        }

        .focus-img{

            width: 590px;

            height: 470px;

        }

        button{

            position: absolute;

            width: 24px;

            height: 40px;

            top: 50%;

            line-height: 40px;

            text-align: center;

            background-color: rgba(0,0,0,.2);

            color: white;

            font-size: 30px;

            border: 0;

            outline: none;

            cursor: pointer;

            z-index: 99;

        }

        button.next{

            right: 0;

        }

        button.prev{

            left: 0;

        }

        .slider-index{

            position: absolute;

            bottom: 10px;

            left:250px;

            z-index: 2;

        }

        .slider-index span{

            display: inline-block;

            width: 10px;

            height: 10px;

            border: 2px solid red;

            border-radius: 50%;

        }

        .slider-index span.active{

            background-color: orange;

        }

    </style>

</head>

<body>

<div class="slider-list">

    <div class="slider-wrapper">

        <ul>

        </ul>

    </div>

    <button class="next">></button>

    <button class="prev"><</button>

    <div class="slider-index">

        <span class="active"></span>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

    </div>

</div>

<script type="text/javascript" src="../jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $(function(){

        // 1.获取本地图片数据 590*470

        let imgArr = ['./5.jpg','./1.jpg','./2.jpg','./3.jpg','./4.jpg','./5.jpg','./1.jpg'];

        // 获取图片的宽度

        let imgWidth = 590;

        let len = $('span').length;

        // 2.遍历数据 将图片添加到ul中

        for(let i = 0;i < imgArr.length;i++){

            let width = i*imgWidth;

            $(`<li>

                    <a href="javascript:;">

                        <img src=${imgArr[i]} alt=${i}>

                    </a>

                </li>`).appendTo('.slider-wrapper ul').addClass('slider-item')

        }

        // 设置图片的类名

        $('img').addClass('focus-img');

        // 设置父盒子的总宽度

        $('.slider-wrapper').width((imgArr.length+1)*imgWidth);

        $('.slider-wrapper ul').width((imgArr.length+1)*imgWidth);

        // 初始化

        // 默认显示第一张图片

        init();

        function init(){

            $("ul").css("left",-imgWidth);

        }

        // 下一张

        $('button.next').click(function(event) {

            next();

        });

        // 控制图片显示第几张

        let count  = 1;

        function next(){

            if (count ===len+1) {

                count  = 2;

                $("ul").css("left",-imgWidth);

            }else{

                count++;

            }

            $('.slider-wrapper ul').stop().animate({left:-count*imgWidth},200);

            // 控制轮播图索引改变颜色

            if (count>len) {

                $("span").eq(0).addClass("active").siblings("span").removeClass("active");

            }else{

                $("span").eq(count-1).addClass("active").siblings("span").removeClass("active");

            }

        }

        // 给小圆圈添加点击事件

        $('span').click(function(){

            //自己的样式

            $(this).addClass("active").siblings("span").removeClass("active");

            count = $(this).index()+1;

            $("ul").animate({"left":-count*imgWidth},200);

        });

        setInterval(next,2000);

    })

</script>

</body>

</html>

2、轮播二

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        *{margin: 0;padding: 0;}

        ul,ol{ list-style: none;}

        .wrapper{

            width: 580px;

            height: 240px;

            margin: 100px auto;

            /*overflow: hidden;*/

            position: relative;

        }

        .wrapper ul{

            width: 100%;

            height: 240px;

            overflow: hidden;

        }

        .wrapper ul li{

            float: left;

            width: 580px;

            height: 240px;

        }

        ol{

            position: absolute;

            right: 0;

            bottom: 10px;

            width: 190px;

        }

        ol li{

            float: left;

            width: 20px;

            height: 20px;

            margin: 0 5px;

            text-align: center;

            border-radius: 50%;

            cursor: pointer;

            background-color: #abc;

        }

        ol li.current{

            background-color: pink;

        }

    </style>

    <script type="text/javascript" src="../jquery-3.3.1.min.js"></script>

    <script type="text/javascript">

        $(function () {

            // 根据ol下li的索引号，匹配ul下相对应li的索引号

            $(".wrapper ol li").mouseenter(function () {

                $(this).addClass("current").siblings().removeClass("current");

                $(".wrapper ul li").eq($(this).index()).stop().fadeIn("fast").siblings().stop().fadeOut();

            });

        });

    </script>

</head>

<body>

<div class="wrapper">

    <ul>

        <li><img src="./1.png" alt=""/></li>

        <li><img src="./2.png" alt=""/></li>

        <li><img src="./3.png" alt=""/></li>

        <li><img src="./4.png" alt=""/></li>

        <li><img src="./5.png" alt=""/></li>

    </ul>

    <ol>

        <li class="current">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ol>

</div>

</body>

</html>

jQuery系列（十三）：实现轮播的更多相关文章

  1. jQuery轻量级京东图片轮播代码等

    http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码   查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...

  2. 使用javascript,jquery实现的图片轮播功能

    使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...

  3. jQuery实现todo及轮播图

    内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...

  4. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  5. jQuery美女幻灯相册轮播源代码

    体验效果:http://hovertree.com/texiao/jquery/ 本幻灯片包含小图列表和大图轮播,包含图片标题和详细介绍,详细介绍字数可以很多,每张图片包含链接,可以实现跳转 HTML ...

  6. JQuery slidebox实现图片轮播

    jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...

  7. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  8. JQuery插件之图片轮播插件–slideBox

    来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...

  9. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 基于jQuery的图片左右轮播，基本原理通用

    毕竟新人,写点基础的小东西,希望能和大家沟通交流,提高自己的水平. 这个是应用较多的轮播部分,希望能和大家分享一下思路,拓宽视野. 话不多说,上内容. 我的思路很简单就是通过判断index值的大小变化 ...

随机推荐

  1. 爬虫-selenium 模块-02

    目录 selenium 模块 chromedriver 浏览器驱动下载与存放 PhantomJS 无界面浏览器 标签元素查找方法 xpath 格式用法 获取标签属性 等待元素被加载 元素交互操作 点击 ...

  2. S02_CH14_ EMIO_OLED 实验

    S02_CH14_ EMIO_OLED 实验 本章将使用EMIO模拟OLED的时序来驱动OLED,本方案对米联系列Miz702,Miz702N和Miz701N全兼容. 14.1板载OLED硬件原理 M ...

  3. Kali Linux安装AWVS漏扫工具

    Acunetix是全球排名前三的漏洞发现厂商,其全称(Acunetix Web Vulnerability Scanner)AWVS是业内领先的网络漏洞扫描器,其被广泛赞誉为包括最先进的SQL注入和X ...

  4. 采样方法（二）MCMC相关算法介绍及代码实现

    采样方法(二)MCMC相关算法介绍及代码实现 2017-12-30 15:32:14 Dark_Scope 阅读数 10509更多 分类专栏: 机器学习   版权声明:本文为博主原创文章,遵循CC 4 ...

  5. 贝叶斯优化 Bayesian Optimization

    贝叶斯优化 Bayesian Optimization 2018年07月02日 22:28:06 余生最年轻 阅读数 4821更多 分类专栏: 机器学习   版权声明:本文为博主原创文章,遵循CC 4 ...

  6. 安川机器人Yaskawa

    安川机器人自动回原点 1. 判断机器人是否在安全位置  (立方体干涉区) 2. 读取机器人当前位置  GETS PX000 $PX001 读取基座标下的机器人当前位置并放到位置型变量P000中  $P ...

  7. Mac命令行提示

    之前看到一个大神的终端主题好炫,所以自己也想弄一个.看了很多中文的教程都不是很靠谱,效果并没有实现.不能说人家的不对,只能说自己水平有限.后来直接去看 github 上的官方教程,因为是官方嘛~所以肯 ...

  8. 四款免费好用的Bootstrap ui编辑器

    Bootstrap带来了设计革命,本文介绍的四种免费Bootstrap在线设计工具,可视化所见所得设计网页,然后输出Html/CSS代码,其中有些甚至可以实现拖曳,也有可以设定自己的主题模板Theme ...

  9. Supervisor进程管理配置使用

    Supervisor进程管理 在后台应用中,有时候程序进程会异常中止退出,如果没有一个守护进程去守护这个应用进程我们就需要及时发现并重启进程.如果每一个应用进程都写一个自己的守护进程难免会比较麻烦,而 ...

  10. 第三章、drf框架 - 序列化组件 | Serializer

    目录 第三章.drf框架 - 序列化组件 | Serializer 序列化组件 知识点:Serializer(偏底层).ModelSerializer(重点).ListModelSerializer( ...