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结构如下: & ...
随机推荐
- 垃圾回收之G1收集过程
G1 中提供了 Young GC.Mixed GC 两种垃圾回收模式,这两种垃圾回收模式,都是 Stop The World(STW) 的. G1 没有 fullGC 概念,需要 fullGC 时,调 ...
- 商品获价API调用说明：获取商品历史价格信息 代码分享
接口名称:item_history_price 公共参数 名称 类型 必须 描述 key String 是 调用key(必须以GET方式拼接在URL中)(获取测试key和secret接入) secre ...
- 二进制安装Kubernetes（k8s） v1.26.0 IPv4/IPv6双栈
二进制安装Kubernetes(k8s) v1.26.0 IPv4/IPv6双栈 https://github.com/cby-chen/Kubernetes 开源不易,帮忙点个star,谢谢了 介绍 ...
- 部署lnmp环境，安装typecho博客
安装nginx和PHP环境 root@cby:~# apt install nginx php7.4 php7.4-mysql php7.4-fpm 修改nginx配置文件 root@cby:~# v ...
- MySQL笔记之Checkpoint机制
CheckPoint是MySQL的WAL和Redolog的一个优化技术. 一.Checkpoint机制 CheckPoint做了什么事情?将缓存池中的脏页刷回磁盘. checkpoint定期将db b ...
- day06 循环和数据类型的内置方法
循环加数据类型的内置方法 while 循环 for循环 range关键字 数据类型的内置方法 字符串的内置方法 while循环 while + continue #打印0-10的数字不打印6 n=0 ...
- visio秘钥
一.Visio2016专业版永久激活码: Visio 2016 Professional Retail零售版 [Key]:NKVJM-8MTT4-8YDFR-6738M-DPFJH [Key]:W9W ...
- 【Java Se】JDBC
启停服务 net start mysql net stop mysql 登录 mysql -u -p 访问指定IP的mysql mysql -u root -P 3306 -h localhost - ...
- Android Studio 样式和主题背景
样式和主题背景 转载自 Styles and Themes | Android Developers 借助 Android 中的样式和主题背景,您可以将应用设计的细节与界面的结构和行为分开,其 ...
- C# 从0到实战--程序入门：基本程序结构·hello，world
为什么要写博客 某人是一名大学生,到了大二,学院开始教授.Net,从这里我接触到了C#和ASP.Net,这些技术让我感到了想不到的快速开发之震撼.于是突发奇想,写此博客来记录我的学习路程.博客不仅仅是 ...