准备工作：

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

完成功能：

　　1、自动轮播

　　2、手动轮播

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

JQuery插件地址:

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

效果图：

完整代码：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          .outer {
  8.              width: 590px;
  9.              height: 470px;
  10.              margin: 80px auto;
  11.              position: relative;
  12.          }
  13.  
  14.          .img li {
  15.              position: absolute;
  16.              list-style: none;
  17.              top: 0px;
  18.              left: 0px;
  19.          }
  20.  
  21.          .num {
  22.              position: absolute;
  23.              bottom: 15px;
  24.              left: 120px;
  25.              list-style: none;
  26.          }
  27.  
  28.          .num li {
  29.              display: inline-block;
  30.              width: 18px;
  31.              height: 18px;
  32.              background-color: white;
  33.              border-radius: 50%;
  34.              text-align: center;
  35.              line-height: 18px;
  36.              margin-left: 10px;
  37.          }
  38.  
  39.          .btn {
  40.              position: absolute;
  41.              top: 50%;
  42.              width: 30px;
  43.              height: 60px;
  44.              background-color: lightgray;
  45.              color: white;
  46.              text-align: center;
  47.              line-height: 60px;
  48.              font-size: 30px;
  49.              opacity: 0.6;
  50.              margin-top: -30px;
  51.              display: none;
  52.          }
  53.  
  54.          .left_btn {
  55.              left: 0px;
  56.          }
  57.  
  58.          .right_btn {
  59.              right: 0px;
  60.          }
  61.  
  62.          .outer:hover .btn {
  63.              display: block;
  64.          }
  65.  
  66.          .num .active {
  67.              background-color: red;
  68.          }
  69.      </style>
  70.  </head>
  71.  <body>
  72.  <div class="outer">
  73.      <ul class="img">
  74.          <li><a href="#"><img src="data:images/0.jpg" alt=""></a></li>
  75.          <li><a href="#"><img src="data:images/1.jpg" alt=""></a></li>
  76.          <li><a href="#"><img src="data:images/2.jpg" alt=""></a></li>
  77.          <li><a href="#"><img src="data:images/3.jpg" alt=""></a></li>
  78.          <li><a href="#"><img src="data:images/4.jpg" alt=""></a></li>
  79.          <li><a href="#"><img src="data:images/5.jpg" alt=""></a></li>
  80.          <li><a href="#"><img src="data:images/6.jpg" alt=""></a></li>
  81.          <li><a href="#"><img src="data:images/7.jpg" alt=""></a></li>
  82.      </ul>
  83.      <ul class="num">
  84.          <!--<li class="active"></li>-->
  85.          <!--<li></li>-->
  86.          <!--<li></li>-->
  87.          <!--<li></li>-->
  88.          <!--<li></li>-->
  89.          <!--<li></li>-->
  90.          <!--<li></li>-->
  91.          <!--<li></li>-->
  92.      </ul>
  93.      <div class="left_btn btn"> <</div>
  94.      <div class="right_btn btn"> ></div>
  95.  </div>
  96.  </body>
  97.  <script src="jquery-3.3.1.min.js"></script>
  98.  <script>
  99.      var i = 0;
  100.      // 通过JQuery获取img标签下li的个数，然后自动创建num标签下的按钮标签li
  101.      var $img_num = $(".img li").length;
  102.      for (var j = 0; j < $img_num; j++) {
  103.          $(".num").append("<li>");
  104.      }
  105.      $(".num li").eq(0).addClass("active");
  106.  
  107.      // 手动轮播，绑定事件
  108.      $(".num li").mouseover(function () {
  109.          i = $(this).index();
  110.          console.log(i);
  111.          $(this).addClass("active");
  112.          $(this).siblings().removeClass("active"); // 取消其他标签按钮的active
  113.          $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
  114.      })
  115.  
  116.      // 自动轮播
  117.      var c = setInterval(GO_R,1500)
  118.  
  119.      function GO_R() {
  120.          if (i == $img_num-1)
  121.          {
  122.              i = -1;
  123.          }
  124.          i++;
  125.          $(".num li").eq(i).addClass("active")
  126.          $(".num li").eq(i).siblings().removeClass("active")  // 取消其他标签按钮的active
  127.          $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
  128.      }
  129.      function GO_L(){
  130.          if (i == 0)
  131.          {
  132.              i = $img_num;
  133.          }
  134.          i--;
  135.          $(".num li").eq(i).addClass("active")
  136.          $(".num li").eq(i).siblings().removeClass("active")  // 取消其他标签按钮的active
  137.          $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
  138.      }
  139.      // 悬浮，清除计时器
  140.      $(".outer").hover(function () {
  141.          clearInterval(c)
  142.      },function () {
  143.          c = setInterval(GO_R,1500)
  144.      })
  145.  
  146.      // button 加定播
  147.      // 绑定一
  148.      $(".right_btn").click(GO_R)
  149.      // 绑定二
  150.      // $(".right_btn").bind("click",GO_R)
  151.  
  152.      $(".left_btn").click(GO_L)
  153.  
  154.  </script>
  155.  </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. 16 ， CSS 边框与边界

    1.CSS 中边框的使用 2.CSS 中边界的使用 16.1 CSS 中边框的使用 属性名称 属性值 说明 border-color 十六进制 可依序设置上,右,下,左线颜色 英文名称 border- ...

  2. 运维DBA要不要学python

    运维DBA要不要学python 我个人认为是:要 现在python在运维数据库的工作中主要用在 1.编写一些运维脚本 2.编写运维管理平台 3.研究互联网大厂的运维脚本/工具并应有 特别是运维开源数据 ...

  3. SQLite新建数据库及txt文件（CSV文件）导入

    1.安装准备: Windows系统环境: 安装:SQLiteExpert  及 官网的SQLite tool  我们要用到其中的SQLite.exe       地址:https://www.sqli ...

  4. postgreSQL 玩转josnb (长期更新)

    json和jsonb的操作符 jsonb额外操作符 json创建函数 json处理函数 函数 返回类型 描述 示例 结果 json_array_length(json) jsonb_array_len ...

  5. Exchange-重建见证服务器和目录

    问题描述: 在升级Exchange 2013 CU22检查群集节点状态的过程中发现群集组处于失败状态,具体报错信息如下:警告:数据库可用性组"***"见证处于失败状态.数据库可用性 ...

  6. 使用WSL吧

    WSL(Windows Subsystem for Linux)已经装在电脑上好一阵子了,谁如果还没装的,可以看看本文,至少知道个大概,觉得有用的话知道该如何做. 简介 WSL简单说就是一个能让你在W ...

  7. 识别率很高的java文字识别技术

    java文字识别程序的关键是寻找一个可以调用的OCR引擎.tesseract-ocr就是一个这样的OCR引擎,在1985年到1995年由HP实验室开发,现在在Google.tesseract-ocr ...

  8. 如何为ASP.NET Core设置客户端IP白名单验证

    原文链接:Client IP safelist for ASP.NET Core 作者:Damien Bowden and Tom Dykstra 译者:Lamond Lu 本篇博文中展示了如何在AS ...

  9. springboot~@Valid注解对嵌套类型的校验

    @Valid注解可以实现数据的验证,你可以定义实体,在实体的属性上添加校验规则,而在API接收数据时添加@valid关键字,这时你的实体将会开启一个校验的功能,具体的代码如下,是最基本的应用: 实体: ...

  10. SpringBoot基础系列-SpringCache使用

    原创文章,转载请标注出处:<SpringBoot基础系列-SpringCache使用> 一.概述 SpringCache本身是一个缓存体系的抽象实现,并没有具体的缓存能力,要使用Sprin ...