准备工作：

　　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. 【学习笔记Part 2● MySQL】

    数据库 为什么要用数据库 如何去存放数据?生活中有各种各样的数据.比如说人的姓名.年龄.成绩等.平时我们记录这些信息都是记在大脑中.人的记忆力有限,不可能什么都记住.所以后来人们把数据记录在石头上–& ...

  2. 实验二 request、out对象使用

    request.out对象使用 一.实验目的 1.掌握代码片段中的注释的应用: 2.掌握JSP脚本标示---Java代码片段的应用. 二.实验内容 1.设计教师与学生不同登陆界面,如下图: 2.验证码 ...

  3. U盘制作微pe工具箱（实战）

    分享人:广州华软 浩言 前言 相信大家平时生活中还是工作上使用电脑的时间还是比较多的,有时候电脑出现故障,比如系统文件损坏,没办法正常开机,或者是开机密码忘了,想要重装系统等,下面我推荐一个U盘启动项 ...

  4. geoserver发布mysql表数据

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.环境部署 Geoserver中并不自带mysql数据发布功能,需要下 ...

  5. T-SQL语法基础

    一.T-SQL语言的分类 DDL-数据定义语言 create-创建 alter-修改 drop-删除(针对对象) DML-数据操作语言 Insert-插入 update-更新 delete-删除(针对 ...

  6. 《SQL CookBook 》笔记-准备工作

    目录 准备 1.建立员工表--EMP 2.建立部门表--DEPT 3.EMP表和DEPT表插入数据 4.建立透视表T1,并插入数据 5.建立透视表T10,并插入数据 第二章 shanzm 准备 1.建 ...

  7. Maven配置ojdbc14-10.2.0.4.0.jar

    对于oralce的jdbc驱动,在maven上搜索到把pom配置复制到pom.xml里进行引用的时候出现下面这种情况 <dependency> <groupId>com.ora ...

  8. 微软推出了Cloud Native Application Bundles和开源ONNX Runtime

    微软的Microsoft Connect(); 2018年的开发者大会 对Azure和IoT Edge服务进行了大量更新; Windows Presentation Foundation,Window ...

  9. POST不同提交方式对应的Content-Type,及java服务器接收参数方式

    POST不同提交方式对应的Content-Type,及java服务器接收参数方式 注:本博客参考了网上的文章结合自己工作总结后所写,主要用于记录自己工作所得,如有错误请批评指正. 简介: Conten ...

  10. EL表达式 if 和 if else语句的写法

    JavaScript的if else大家都不会陌生,但可能很多小伙伴并不知道在jsp文件里,el表达式的if else是怎么写的,下面安利给各位小伙伴 el表达式 if 代码示例 <c:if t ...