准备工作：

　　1、准备几张大小相同的图片

完成功能：

　　1、自动轮播

　　2、手动轮播

　　3、点击二侧按钮前后切换图片

JQuery插件地址:

链接：https://pan.baidu.com/s/1zNl2-zulPurl1Tqiu4jo6Q
提取码：2ir4

效果图：

完整代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .outer {

             width: 590px;

             height: 470px;

             margin: 80px auto;

             position: relative;

         }

         .img li {

             position: absolute;

             list-style: none;

             top: 0px;

             left: 0px;

         }

         .num {

             position: absolute;

             bottom: 15px;

             left: 120px;

             list-style: none;

         }

         .num li {

             display: inline-block;

             width: 18px;

             height: 18px;

             background-color: white;

             border-radius: 50%;

             text-align: center;

             line-height: 18px;

             margin-left: 10px;

         }

         .btn {

             position: absolute;

             top: 50%;

             width: 30px;

             height: 60px;

             background-color: lightgray;

             color: white;

             text-align: center;

             line-height: 60px;

             font-size: 30px;

             opacity: 0.6;

             margin-top: -30px;

             display: none;

         }

         .left_btn {

             left: 0px;

         }

         .right_btn {

             right: 0px;

         }

         .outer:hover .btn {

             display: block;

         }

         .num .active {

             background-color: red;

         }

     </style>

 </head>

 <body>

 <div class="outer">

     <ul class="img">

         <li><a href="#"><img src="data:images/0.jpg" alt=""></a></li>

         <li><a href="#"><img src="data:images/1.jpg" alt=""></a></li>

         <li><a href="#"><img src="data:images/2.jpg" alt=""></a></li>

         <li><a href="#"><img src="data:images/3.jpg" alt=""></a></li>

         <li><a href="#"><img src="data:images/4.jpg" alt=""></a></li>

         <li><a href="#"><img src="data:images/5.jpg" alt=""></a></li>

         <li><a href="#"><img src="data:images/6.jpg" alt=""></a></li>

         <li><a href="#"><img src="data:images/7.jpg" alt=""></a></li>

     </ul>

     <ul class="num">

         <!--<li class="active"></li>-->

         <!--<li></li>-->

         <!--<li></li>-->

         <!--<li></li>-->

         <!--<li></li>-->

         <!--<li></li>-->

         <!--<li></li>-->

         <!--<li></li>-->

     </ul>

     <div class="left_btn btn"> <</div>

     <div class="right_btn btn"> ></div>

 </div>

 </body>

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

 <script>

     var i = 0;

     // 通过JQuery获取img标签下li的个数，然后自动创建num标签下的按钮标签li

     var $img_num = $(".img li").length;

     for (var j = 0; j < $img_num; j++) {

         $(".num").append("<li>");

     }

     $(".num li").eq(0).addClass("active");

     // 手动轮播，绑定事件

     $(".num li").mouseover(function () {

         i = $(this).index();

         console.log(i);

         $(this).addClass("active");

         $(this).siblings().removeClass("active"); // 取消其他标签按钮的active

         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

     })

     // 自动轮播

     var c = setInterval(GO_R,1500)

     function GO_R() {

         if (i == $img_num-1)

         {

             i = -1;

         }

         i++;

         $(".num li").eq(i).addClass("active")

         $(".num li").eq(i).siblings().removeClass("active")  // 取消其他标签按钮的active

         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

     }

     function GO_L(){

         if (i == 0)

         {

             i = $img_num;

         }

         i--;

         $(".num li").eq(i).addClass("active")

         $(".num li").eq(i).siblings().removeClass("active")  // 取消其他标签按钮的active

         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

     }

     // 悬浮，清除计时器

     $(".outer").hover(function () {

         clearInterval(c)

     },function () {

         c = setInterval(GO_R,1500)

     })

     // button 加定播

     // 绑定一

     $(".right_btn").click(GO_R)

     // 绑定二

     // $(".right_btn").bind("click",GO_R)

     $(".left_btn").click(GO_L)

 </script>

 </html>

JQuery 图片轮播，详细注释说明，让你一看就会！的更多相关文章

  1. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  2. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  3. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  4. jquery图片轮播插件slideBox

    效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...

  5. Jquery 图片轮播实现原理总结

    Jquery 图片轮播实现原理总结 以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下. 首先说下,我在网上找的例子全是用的UL ...

  6. jquery 图片轮播demo实现

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...

  7. jquery图片轮播效果(unslider)

    今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...

  8. Jquery图片轮播和CSS图片轮播

    学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...

  9. jQuery 图片轮播的代码分离

    以前遇到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号. html代码,以及对应的css代码: <div id=&q ...

  10. jquery图片轮播-插件

    更新内容: 1. 页面结构和css样式必定类似下边放置 2. 点击左右按钮,实现左右滑动. 3. 这一般用于多个图片轮播使用,简化并优化代码. 若因不同需求,均可自行将插件scrollimgplus. ...

随机推荐

  1. vue中路由按需加载的几种方式

    使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...

  2. RadioButton监听事件

    RadioButton为单选按钮,他需要与RadioGroup配合使用 对应的布局代码: <?xml version="1.0" encoding="utf-8&q ...

  3. JVM之GC算法、垃圾收集算法——标记-清除算法、复制算法、标记-整理算法、分代收集算法

    标记-清除算法 此垃圾收集算法分为“标记”和“清除”两个阶段: 首先标记出所有需要回收的对象,在标记完成后统一回收所有被标记对象,它的标记过程前面已经说过——如何判断对象是否存活/死去 死去的对象就会 ...

  4. 织梦5.7sp1最新问题：后台不显示编辑器

    1.在后台的“系统基本参数”里修改“站点设置”的“网页主页链接:空”. 2.修改“核心设置”DedeCMS安装目录:空“. 3.试试,问题解决.

  5. MongoDB 4.0 开发环境搭建集群

    环境准备 Liunx 服务器一台 以下示例为单机版安装集群, 没有分片 MongoDB 安装 1.下载 MongoDB tgz 安装包: 可以从下载中心下载: https://www.mongodb. ...

  6. Ocelot 资源汇总

    前言 最近一两年.NET Core的关注度持续上升, 微服务及云原生应用开发上采用.NET Core也越来越多,Ocelot 作为.NET Core平台下一款开源的API 网关开发库越来越得到社区的认 ...

  7. 面试题解：输入一个数A，找到大于A的一个最小数B，且B中不存在连续相等的两个数字

    玄魂工作室秘书 [玄魂工作室]      昨天发的算法有一处情况没考虑到,比如加一后有进位,导致又出现重复数字的情况,修正后今天重新发一次.     比如输入99,那B应该是101 因为100有两个连 ...

  8. PHP获取远程http或ftp文件的md5值

    PHP获取本地文件的md5值: md5_file("/path/to/file.png"); PHP获取远程http文件的md5值: md5_file("https:// ...

  9. 使用xUnit为.net core程序进行单元测试(1)

    导读 为什么要编写自动化测试程序(Automated Tests)? 可以频繁的进行测试 可以在任何时间进行测试,也可以按计划定时进行,例如:可以在半夜进行自动测试. 肯定比人工测试要快. 可以更快速 ...

  10. Linux 进程终止后自动重启

    /opt/a.sh #! /bin/bash ps -ef | grep python3 a.py | grep -v grep | grep python3 if [ $? -ne 0 ] then ...