准备工作：

　　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. 解决小米手机USB安装apk时AS报错：INSTALL_FAILED_USER_RESTRICTED

    今天,直接用AS在小米手机上运行安装的时候总是报错:INSTALL_FAILED_USER_RESTRICTED,于是乎,通过以下方式解决: 在开发者选项将USB安装打开,然后,哈,解决了.记录一下.

  2. ABP项目依赖图，根据自已生在的Demo项目分析而得

    根据自已生在的Demo项目分析而得 在线学习代码库:https://github.com/AtwindYu/ABPStudy

  3. .Net Core 在Linux服务器下部署程序--(2). 部署前需要安装的软件及SDK

    安装通用软件 : ping , telnet , lrzsz , zip , wget 安装ping软件,用于测试当前服务器与其他服务器之间的网络通畅情况,和Windows的Ping类似 执行ping ...

  4. 千星项目.Net Core 2.1移植填坑记--OpenAuth.Core诞生

    背景 很早就有把OpenAuth.Net----最好用的.net权限管理工作流框架(好吧!我在吹牛

  5. Java　Main参数解析(Args4j)

    最近实现一个工具,Main函数会有很多参数,而且参数类型不同,为了统一解析,网上找到三方工具类Args4j,轻松搞定. 代码实例如下: 定义解析类: import java.io.File impor ...

  6. mysql优化之SQL语句优化

    Mysql优化是一个老生常谈的问题, 优化的方向也优化很多:从架构层;从设计层;从存储层;从SQL语句层; 今天讲解一下从SQL语句层: 这个部分是程序员最容易把控的地方,也是最容易忽视的地方. 一个 ...

  7. Java笔试题库之选题题篇【141-210题】

    141.Struts框架可以支持以下哪种程序开发语言? A.C B.C++ C.Java D.C# 解答:C 142.在Servlet处理请求的方式为. A.以进程的方式 B.以程序的方式 C.以线程 ...

  8. python进程和线程（五）

    python的进程 由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Python提供了非常好用的多进程包m ...

  9. Docker & ASP.NET Core (4)：容器间的连接

    第一篇:把代码连接到容器 第二篇:定制Docker镜像 第三篇:发布镜像 Docker容器间的连接 Docker提供了两种方式可以用来做容器间的连接/通信: Legacy Linking:这种方式使用 ...

  10. Docker 导出&加载镜像

    文章首发自个人网站:https://www.exception.site/docker/docker-save-load-image 本文中,您将学习 Docker 如何导出&加载镜像.当我们 ...