jQuery控制图片墙自动+手动淡入淡出切换
先来看一下效果：http://39.105.101.122/myhtml/Jquery/img_switch/img_switch.html（甄嬛的眼睛有木有变大）
添加一个div（class=container），设置宽度和高度，这里设置了宽800px，高450px。添加居中的定位。在div里面添加一个ul(class="img")列表用来盛放图片，设置ul里面的li标签position为absolute，这时图片会重合在一起，同时设置display为none。图片设置宽度和高度与container相同。在container里面再添加一个ul列表用来盛放下面的一排数字，然后进行相应的定位和设置。添加两个div：left和right，分别是左右两个按钮，进行相应的定位和设置，里面的箭头分别是大于号和小于号。
实现原理：
当鼠标移动到对应的数字上面的时候，用$(this).index()获得数字所在容器里面的序号，然后将序号传递到eq()函数里面获得 li 标签，然后添加函数fadeIn();这样隐藏的图片就显示出来了，同时调用sibling().fadeOut()，让同级的兄弟节点隐藏起来，这样之前显示的图片就隐藏了起来。
添加setInterval()函数，让图片每隔相同的时间变换一次。
我觉得一个主要的问题就是自动切换和手动切换的冲突，当鼠标移动到图片上面的时候应该停止自动切换，在这里用的方法是：
给container添加hover函数，当鼠标移动到container里面的时候用clearInterval()函数去掉时间间隔函数，这样当鼠标移动到图片上面的时候，图片就不会切换了，当鼠标移出的时候添加setInterval()函数。这样图片就能继续切换了。
注意：i 和 t 需要设置成全局变量，这样不同的函数才能共用。i 表示当前显示图片的索引。t 是setInterval的ID。当鼠标移出的时候不用再var一个t了，只需：t=setInterval(time_fun,1500);即可。
eq(n):找到第n个元素
eg：$('li').eq(2).css('background-color', 'red');//设置第二个li标签的背景颜色为红色
index():找到该元素的索引值
有兴趣的研究一下代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>jquery_img_switch</title>
6 </head>
7 <style type="text/css">
8 *{
9 margin: 0;
10 padding: 0;
11 }
12 .container{
13 width: 800px;
14 height: 450px;
15 margin: 100px auto;
16 position: relative;
17 }
18 .container .img{
19 list-style: none;
20 /*position: absolute;*/
21 }
22 .container .img li{
23 position: absolute;
24 display: none;
25
26 }
27 .container .img img{
28 width: 800px;
29 height: 450px;
30 }
31 .container .num{
32 position: absolute;
33 list-style: none;
34 font-size: 0;
35 bottom: 20px;
36 width: 100%;
37 text-align: center;
38 }
39 .container .num li{
40 width: 30px;
41 height: 30px;
42 background: rgba(255,255,255,0.5);
43 border-radius: 50%;
44 color: #000;
45 display: inline-block;
46 line-height: 30px;
47 text-align: center;
48 font-size: 20px;
49 margin-right: 10px;
50 cursor: pointer;
51 }
52 .left, .right{
53 width: 50px;
54 height: 60px;
55 text-align: center;
56 line-height: 60px;
57 background-color: rgba(0,0,0,0.5);
58 color: #fff;
59 position: absolute;
60 top: 50%;
61 margin-top: -30px;
62 font-size: 40px;
63 cursor: pointer;
64 }
65 .left{
66 left: 20px;
67 }
68 .right{
69 right: 20px;
70 }
71 .container .num .active{
72 background: rgba(255,0,0,1);
73 color: #fff;
74 }
75 </style>
76 <script type="text/javascript" src="../jquery-2.2.1.min.js"></script>
77 <script type="text/javascript">
78 var i=0;
79 var t;
80 $(document).ready(function(){
81 $(".container .img li").eq(i).fadeIn().siblings().fadeOut();
82
83 $(".container .num li").on("mouseover",active);
84
85 t=setInterval(time_fun,1500);
86
87 $(".container").hover(in_fun,out_fun);
88
89 $(".container .left").on("click",left_fun);
90 $(".container .right").on("click",right_fun);
91 });
92
93 function time_fun(){
94 i++;
95 if(i==10){
96 i=0;
97 }
98 $(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
99 $(".container .img li").eq(i).fadeIn(300).siblings().fadeOut(300);
100 }
101
102 function in_fun(){
103
104 clearInterval(t);
105 }
106 function out_fun(){
107 t=setInterval(time_fun,1500);
108 }
109 function active(){
111 $(this).addClass("active").siblings().removeClass("active");
112 $(".container .img li").eq($(this).index()).fadeIn(300).siblings().fadeOut(300);
113 i=$(this).index();
114 }
115 function left_fun(){
116 i--;
117 if(i==-1){
118 i=9;
119 }
120 $(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
121 $(".container .img li").eq(i).fadeIn(300).siblings().fadeOut(300);
122 }
123 function right_fun(){
124 i++;
125 if(i==10){
126 i=0;
127 }
128 $(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
129 $(".container .img li").eq(i).fadeIn(300).siblings().fadeOut(300);
130 }
131 </script>
132 <body>
133 <div class="container">
134 <ul class="img">
135 <li ><img src="../../Img/1.jpg"></li>
136 <li><img src="../../Img/2.jpg"></li>
137 <li><img src="../../Img/3.jpg"></li>
138 <li><img src="../../Img/4.jpg"></li>
139 <li><img src="../../Img/5.jpg"></li>
140 <li><img src="../../Img/6.jpg"></li>
141 <li><img src="../../Img/7.jpg"></li>
142 <li><img src="../../Img/8.jpg"></li>
143 <li><img src="../../Img/9.jpg"></li>
144 <li><img src="../../Img/10.jpg"></li>
145 </ul>
146 <ul class="num">
147 <li class="active">1</li>
148 <li>2</li>
149 <li>3</li>
150 <li>4</li>
151 <li>5</li>
152 <li>6</li>
153 <li>7</li>
154 <li>8</li>
155 <li>9</li>
156 <li>10</li>
157 </ul>
158 <div class="left"><</div>
159 <div class="right">></div>
160 </div>
161 </body>
162 </html>
jQuery控制图片墙自动+手动淡入淡出切换的更多相关文章
- jQuery实现图片伦播效果(淡入淡出+左右切换)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- Jquery实现图片左右自动滚动
图片左右滚动的效果想必大家都有见到过吧,其实很简单.在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的. 代码如下:<!DOCTYPE HTML> <html> ...
- jquery控制元素的淡入淡出切换
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JS/JQuery控制图片宽度
function changeImgWidth(){ for (i = 0; i <$('#info img').length; i++) { var imgWidth=$('#info img ...
- jquery控制图片切换
这种js现在用的很多.同时网上的js代码页很多.我直接从网上当了一个来用:代码如下: html <div class="bannerbox"> ...
- js实现页面下拉，区块（文字，图片等）左右淡入淡出效果
html: <div class="box"> <span class="historybox"> </span> < ...
- 【WPF】淡入淡出切换页面
<NavigationWindow x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsof ...
- 图片轮播(淡入淡出)--JS原生和jQuery实现
图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
随机推荐
- 正态分布密度函数的动画演示—R语言
正态分布是概率统计中最重要的一种分布,其重要性我们可以从以下两方面来理解:一方面,正态分布是自然界最常见的一种分布.一般说来,若影响某一数量指标的随机因素很多,而每个因素所起的作用都不太大,则这个指标 ...
- vue指令之事件指令
目录 什么是事件指令 示例 什么是事件指令 事件指的是:点击事件,双击事件,划动事件,焦点事件... 语法 v-on:事件名='函数' # 注意:函数必须写在 methods配置项中 示例 # 点击按 ...
- kubernetes核心实战（九）
14.Ingress 检查是否有安装 [root@k8s-master-node1 ~/yaml/test]# kubectl get pod,svc -n ingress-nginx NAME RE ...
- [Linux]Linux发展历程
古人云,知其然知其所以然.马哲思想指导着我们,任何事物.问题,离不开:为什么(Why,事物从哪里来?).是什么(What,事物的定位?).怎么做(How,到哪里去?)的哲学3问. 继上个月算是相对彻底 ...
- day117:MoFang:宠物栏的功能实现&宠物道具的使用
目录 1.宠物栏的功能实现 2.宠物道具的使用 1.宠物栏的功能实现 1. 宠物的显示 2. 宠物的使用 3. 宠物的饱食度 4. 宠物的开锁 1.服务端提供显示宠物的api接口 orchard/so ...
- Binder机制及底层实现
<1>进程间的内存空间是进程私有的<2>进程间和内核的空间是互通的<3>进程1空间<--->内核空间<-->进程2空间Binder跨进程通信 ...
- C++ 测试框架 GoogleTest 初学者入门篇 丙
theme: channing-cyan *以下内容为本人的学习笔记,如需要转载,请声明原文链接微信公众号「ENG八戒」https://mp.weixin.qq.com/s/RIztusI3uKRno ...
- CVE-2015-5254漏洞复现
1.漏洞介绍. Apache ActiveMQ 是美国阿帕奇(Apache)软件基金会所研发的一套开源的消息中间件,它支持 Java 消息服务,集群,Spring Framework 等.Apache ...
- windows 添加应用的临时签名
我们需要给应用添加数字签名,比如沃通.DigiCert. 申请购买代码签名证书需要一段时间,或者个人开发的应用签名,所以我们需要临时证书. 打开VS-工具-命令行,下面是添加过程 1. 创建一个测试证 ...
- ChatGPT在工业领域的研究与应用探索-数据与工况认知
1. ChatGPT发展现状... 2 2. ChatGPT如何与工业相结合... 2 3. ChatGPT在工业领域的研究与应用... 3 1. ChatGPT发展 ...