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. ...
随机推荐
- android 请求接口报错 org.apache.http.conn.HttpHostConnectException: Connection to http://192.168.1.90:9090 refused
No Network Security Config specified, using platform defaultI/System.out: org.apache.http.conn.HttpH ...
- JNI实战（三）：JNI 数据类型映射
在JNI实战(二):Java 调用 C 我们了解了JNI的静态注册和动态注册.也知道我们应该使用动态注册来进行JNI函数与Java方法之间的映射. 示例的映射表的数组为如下: static JNINa ...
- python爬虫之selenium、phantomJs
图片懒加载技术 什么是图片懒加载技术 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时 ...
- iptables/mysql设置指定主机访问指定端口
本周,运维告知部署的服务被扫描发现漏洞,涉及的软件分别为mysql,ZooKeeper与Elasticsearch. 因为最近任务繁重,人力资源紧张,因此无法抽出更多时间调整代码,添加权限认证. 与软 ...
- 面向对象（__str__和__repr__方法）
#Author : Kelvin #Date : 2019/1/21 16:19 class App: def __init__(self,name): self.name=name # def __ ...
- nginx 报错502Bad Gateway
场景: 目前在ECS中起了多个node服务,使用forever进程守护,最近,打开线上页面发现报错502 Bad Gateway;同时部分静态资源访问不到.(之前可以的): 解决: 首先查看nginx ...
- KnockoutJS-快速入门
虽然在WPF中接触过MVVM模式,可是刚开始在Web中接触到Knockout.JS让我大吃一惊,简化了好多工作量,原来可能需要一大堆的JS脚本完成的工作量,被释放许多.接触KnockoutJS一年多了 ...
- Java进阶篇设计模式之四 -----适配器模式和桥接模式
前言 在上一篇中我们学习了创建型模式的建造者模式和原型模式.本篇则来学习下结构型模式的适配器模式和桥接模式. 适配器模式 简介 适配器模式是作为两个不兼容的接口之间的桥梁.这种类型的设计模式属于结构型 ...
- Win32对话框程序（1）
之前学C语言是一直都是在控制台下面操作的,面对的都是黑框框,严重的打击了学习的兴趣.后来在TC下进行C语言课程设计,做了图形界面编程,但都是点线面画的…… 中间隔了好长一段时间没有碰过C语言,最近才开 ...
- 详解mybatis配置文件
在前面两篇文章中,大致与大家分享了基于Java的ORM框架,Mybatis基本架构和Mybatis实现CRUD的基本原理与流程,在本篇文章中,继续与大家分享Mybatis配置文件. 通过研究Mybat ...