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结构如下: & ...
随机推荐
- vue之混入（mixins）的使用方法
特点:1.方法和参数在各组件中不共享 2.值为对象的选项,如methods,components等,选项会被合并,键冲突的组件会覆盖混入对象的 混入对象中的方法 3.值为函数的选项,如created, ...
- uniApp安卓离线SDK运行
一.下载uniapp提供的离线SDK包 下载地址:https://nativesupport.dcloud.net.cn/AppDocs/download/android 版本:2022年09月26日 ...
- Django笔记十五之in查询及date日期相关过滤操作
这一篇介绍关于范围,日期的筛选 in range date year week weekday quarter hour 1.in in 对应于 MySQL 中的 in 操作,可以接受数组.元组等类型 ...
- 方差分析3——正交表与正交实验设计（R语言）
正交试验设计(orthogonal design简称正交设计(orthoplan),是利用正交表(orthogonal table)科学地安排与分析多因素试验的方法,是最常用的试验设计之一.正交表是一 ...
- vue之数组的方法
目录 简介 filter方法 简介 本文会把遇到的数组的方法慢慢补充进来 filter方法 filter()方法是一个过虑方法 以下面的为例:列表dataList会每次取一个值,把值给匿名函数,并执行 ...
- SpringIOC注入
在lagou的训练营的学习历程 SpringIOC实例化Bean的三种方式:1.使用无参构造器2.静态方法3.实例化方法.他要先实例化创建类(和2的区别),再调用. XML注入属性DI依赖注入,根据实 ...
- matplotlab可视化学习
1 使用pip安装 使用 Python 包管理器 pip 来安装 Matplotlib 是一种最轻量级的方式.打开 CMD 命令提示符窗口,并输入以下命令: pip install matplotli ...
- [Linux]常用命令之【diff】
1 概述 2 diff命令 diff 命令是 Linux 上比较重要的命令行工具,用于比较文本内容,并找到不相同的地方,diff 在命令行中打印每一行的改动之处. diff 程序的输出被称为补丁(pa ...
- WAL模块主要方法简述
Method---wal.go Description func Create(lg *zap.Logger, dirpath string, metadata []byte) (*WAL, erro ...
- SSM整合的所有配置(配置类)
导入依赖坐标pom.xml <dependencies> <dependency> <groupId>junit</groupId> <artif ...