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. ...
随机推荐
- css中的position（定位）
一.position语法与结构 position语法: position : static absolute relative position参数:static : 无特殊定位,对象遵循HTML定位 ...
- 安装windows 10到固态硬盘实践记录
1.前提 由于之前一直用的机械硬盘,电脑用了几年是越来越慢,所以打算买个SSD,装个新系统,其他的机械硬盘都当从盘用 2.准备工作 SSD :256G 3星的 WIN10正版光盘一张 外置光驱一个 3 ...
- vue 对列表数组删除和增加
很重要,一定要好好研究 https://cn.vuejs.org/v2/guide/list.html#%E6%9B%BF%E6%8D%A2%E6%95%B0%E7%BB%84
- python检测字符串乱码
import chardet f=open('test.txt','rb') f_read=f.read() f_charInfo=chardet.detect(f_read) print(f_cha ...
- LOJ #6041. 「雅礼集训 2017 Day7」事情的相似度
我可以大喊一声这就是个套路题吗? 首先看到LCP问题,那么套路的想到SAM(SA的做法也有) LCP的长度是它们在parent树上的LCA(众所周知),所以我们考虑同时统计多个点之间的LCA对 树上问 ...
- 使用kubeadm平滑地升级kubenetes集群(v1.10.2到v1.10.3)
写在前面 kubernetes是目前最炙手火热的容器管理.调度.编排平台,不仅拥有全面的生态系统,而且还开源.开放自治,谁贡献的多,谁的话语权就大,云提供商都有专门的工程师来从事kubernetes开 ...
- GitHub开源：SQLite 增强组件 Sheng.SQLite.Plus
Github:https://github.com/iccb1013/Sheng.SQLite.Plus Sheng.SQLite.Plus 是一个对直接使用 ADO.NET 方式操作 SQLite ...
- Java地位被撼动？Java与JavaScript的趣事连载
第一回 JavaScript的进攻 公元2014年,Java 第八代国王终于登上了王位. 第一次早朝,国王坐在高高的宝座上,看着毕恭毕敬的大臣,第一次体会到了皇权的威力. 德高望重的IO大臣颤悠悠地走 ...
- [Inside HotSpot] 模板解释器
0. 简介 众所周知,hotspot默认使用解释+编译混合(-Xmixed)的方式执行代码.它首先使用模板解释器对字节码进行解释,当发现一段代码是热点的时候,就使用C1/C2 JIT进行优化编译再执行 ...
- dubbo 序列化机制之 hessian2序列化实现原理分析
对于远程通信,往往都会涉及到数据持久化传输问题.往大了说,就是,从A发出的信息,怎样能被B接收到相同信息内容!小点说就是,编码与解码问题! 而在dubbo或者说是java的远程通信中,编解码则往往伴随 ...