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结构如下: & ...
随机推荐
- kubernetes（k8s）安装命令行自动补全功能
Ubuntu下安装命令 root@master1:~# apt install -y bash-completion Reading package lists... Done Building de ...
- 【Diary】CSP-S 2020 游记
一年 好快 从三百多天倒计时 一点一点掂着 又回来了 但是时间永远不会等待你. --??? CSP-J1/S1 CSP-J1/S1 Day0 请了一上午假. 这段时间都在摸鱼,作业没写( 多备赛一个上 ...
- SpringBoot2：@Configuration 注解
@Configuration 这个注解的作用,告诉 springboot 这是一个配置类.配置类以及类里的方法都可以作为Bean.里面的方法用@Bean标记. @Configuration 替换了繁琐 ...
- DRF版本控制(源码分析)
DRF中版本控制的五种情况(源码分析) 在restful规范中要去,后端的API中需要体现版本. drf框架中支持5种版本的设置. 1. URL的GET参数传递(*) 示例: user/?versio ...
- 记一次python写爬虫爬取学校官网的文章
有一位老师想要把官网上有关数字化的文章全部下载下来,于是找到我,使用python来达到目的 首先先查看了文章的网址 获取了网页的源代码发现一个问题,源代码里面没有url,这里的话就需要用到抓包了,因为 ...
- .NET周报 【4月第3期 2023-04-15】
国内文章 Semantic Kernel 入门系列: Planner 规划器 https://www.cnblogs.com/xbotter/p/semantic_kernel_introductio ...
- 《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
1.简介 在App开发的过程当中,抓包是一个很常见的需求,而有些app的请求不会在网络设置代理时被抓到数据包,这里若是需要抓包就需要搭建反向代理. 2.什么是代理? 什么是代理,来一张图了解一下. 代 ...
- Vue项目的网络请求代理到封装详细步骤
1.创建vue项目 vue create demo demo是项目名称 2.安装axios 进入demo里面打开终端(黑窗口),执行 npm install axios 3.进行config.js配置 ...
- Vue中实现数据列表无缝轮播
类似这种滚动轮播效果 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta char ...
- Python定时任务框架apscheduler的简单使用
apscheduler的简单使用 APScheduler有四大组件: 1.触发器 triggers : 触发器包含调度逻辑.每个作业都有自己的触发器,用于确定下一个任务何时运行.除了初始配置之外,触发 ...