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. ...
随机推荐
- 【php性能优化】关于写入文件操作的取舍方案
对于使用php对文件进行写入操作有两种方案一种使用 file_put_contents() 和 fopen()/fwrite()/fclose() 两种方案至于应该怎么选,我觉得应该分情况选择,下面是 ...
- PHP 单例模式优点意义及如何实现
一.什么是单例模式? 1.含义 作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统全局地提供这个实例.它不会创建实例副本,而是会向单例类内部存储的实例返回一个引用. 2. ...
- openlayers4 入门开发系列之台风轨迹篇
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- 你在为谁工作——IT帮深圳分站2019年3月线下活动回顾
对于工作,在每个人的心中,它所占的份量都是不一样的.有的人活着是为了工作,有的人工作是为了更好的生活. 在3月24日下午,北京.上海与深圳三地我们同步举办了关于工作这个话题的沙龙活动. 我们深圳分站参 ...
- ASP.NET Aries 高级开发教程：主题样式及多语言（标签化控制）
前言: 最新ASP.NET Aries升级到V5.2.0以上之后,之前的样式和多语言机制,有了重大的升级机制,这篇就简单介绍一下. 1.控制开关 在配置维护那里,新增了两个控制项: 2.如何添加主题 ...
- PEACHPIE 0.9.11 版本发布，可以上生产了
PeachPie在官方博客(https://www.peachpie.io/2018/10/release-0911-visual-studio.html)发布了PeachPie的0.9.11版本 - ...
- Linux 桌面玩家指南：18. 使用 Docker 隔离自己的开发环境和部署环境
特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记数学公式的开始和结束.如果某条评论中出现了两个$,MathJax 会将两个$之 ...
- 抽象类（abstract class）与接口（interface）的异同
抽象类:如果一个类中包含抽象方法,那么这个类就是抽象类.在Java语言中,可以通过把类或类中的某些方法声明为abstract(abstract只能修饰类或方法,不能修饰属性)来表示一个类是抽象类. 接 ...
- Java遍历List集合的4种方式
public class Test { public static void main(String[] args) { // 循环遍历List的4中方法 List<String> str ...
- Activity 之使用
Activity 之使用 本文内容 1. 使用 Activity 显式简单界面 2. Activity 之间的跳转 2.1 startActivity 2.3 startActivityForResu ...