JQuery 图片轮播，详细注释说明，让你一看就会！
准备工作：
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 图片轮播，详细注释说明，让你一看就会！的更多相关文章
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- jquery图片轮播插件slideBox
效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...
- Jquery 图片轮播实现原理总结
Jquery 图片轮播实现原理总结 以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下. 首先说下,我在网上找的例子全是用的UL ...
- jquery 图片轮播demo实现
转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...
- jquery图片轮播效果(unslider)
今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...
- Jquery图片轮播和CSS图片轮播
学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...
- jQuery 图片轮播的代码分离
以前遇到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号. html代码,以及对应的css代码: <div id=&q ...
- jquery图片轮播-插件
更新内容: 1. 页面结构和css样式必定类似下边放置 2. 点击左右按钮,实现左右滑动. 3. 这一般用于多个图片轮播使用,简化并优化代码. 若因不同需求,均可自行将插件scrollimgplus. ...
随机推荐
- Tomcat更新方法
tomcat更新方法最简单的就是上官网下载最新版的压缩包,然后用新版本的 lib 文件替换掉旧版本的 lib 文件 具体方法(偷懒做个搬运工):https://jingyan.baidu.com/ar ...
- Spring Boot获取前端页面参数的几种方式总结
Spring Boot的一个好处就是通过注解可以轻松获取前端页面的参数,之后可以将参数经过一系列处理传送到后台数据库. 获得的方式有很多种,这里稍微总结一下,大致分为以下几种: 1.指定前端url请求 ...
- LOJ #6050. 「雅礼集训 2017 Day11」TRI
完全不会的数学神题,正解留着以后填坑 将一个口胡的部分分做法,我们考虑计算格点多边形(包括三角形)面积的皮克公式: \[S=a+\frac{1}{2}b-1\text({a为图形内部节点个数,b为边界 ...
- 《iOS 11 安全区域适配总结》
本文来自于腾讯Bugly公众号(weixinBugly),作者:sonialiu,未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/W1_0VrchCO50owhJ ...
- ReactiveSwift源码解析(五) SignalProtocol的observe()、Map、Filter延展实现
上篇博客我们对Signal的基本实现以及Signal的面向协议扩展进行了介绍, 详细内容请移步于<Signal中的静态属性静态方法以及面向协议扩展>.并且聊了Signal的所有的g功能扩展 ...
- [AI开发]视频多目标跟踪高级版(离自动驾驶又‘近’了一点点)
**本文恐怕不是完全的标题党** 视频多目标跟踪需要解决的关键点是前后两帧之间的Target Association,这是最难的环节(没有之一).第T帧检测到M个目标,第T+S(S>=1)帧检测 ...
- 从Android源码修改cpu信息
cpuinfo 网上的文章都是怎么查看/proc/cpuinfo,一直以为这种东西没法改呢,我还是太天真了./proc/cpuinfo是个文件,只读,想直接写肯定不行的.今天研究了一下,发现它的输出逻 ...
- 一行一行手敲webpack4配置
代码:github 一.webpack4--基本配置 这一部分通过webpack的基本配置,使用loader对图片和样式进行打包,从而了解webpack4简单的用方法,保证自己能够配置正确,提升学习动 ...
- 距离度量以及python实现(一)
1. 欧氏距离(Euclidean Distance) 欧氏距离是最易于理解的一种距离计算方法,源自欧氏空间中两点间的距离公式. (1)二维平面上两点a(x1,y1)与b(x2,y2)间 ...
- Linux相关学习笔记-文件系统
在Linux的文件系统中, 相应的文件都按其作用分门别类地放在相关的目录中 以下是最近整理学习的一些, linux中的文件存放 /bin 二进制可执行命令 /dev 设备特殊文件 // 外部设备文件 ...