jQuery代码实现图片墙自动+手动淡入淡出切换效果


Posted in Javascript onMay 09, 2016

相关阅读:

在网页上经常可以看到有背景图片可以自动淡入淡入切换的效果,非常漂亮,实用性也非常高。今天小编抽个时间给大家分享基于jquery代码实现图片墙自动+手动淡入淡出切换效果,一起学习吧!

先给大家展示效果图,如果大家觉得还不错,请参考具体实现代码。

jQuery代码实现图片墙自动+手动淡入淡出切换效果

添加一个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():找到该元素的索引值

有兴趣的研究一下代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>jquery_img_switch</title>
</head>
<style type="text/css">
*{
margin: ;
padding: ;
}
.container{
width: px;
height: px;
margin: px auto;
position: relative;
}
.container .img{
list-style: none;
/*position: absolute;*/
}
.container .img li{
position: absolute;
display: none;
}
.container .img img{
width: px;
height: px;
}
.container .num{
position: absolute;
list-style: none;
font-size: ;
bottom: px;
width: %;
text-align: center; 
}
.container .num li{
width: px;
height: px;
background: rgba(,,,.);
border-radius: %;
color: #;
display: inline-block;
line-height: px;
text-align: center;
font-size: px;
margin-right: px;
cursor: pointer;
}
.left, .right{
width: px;
height: px;
text-align: center;
line-height: px;
background-color: rgba(,,,.);
color: #fff;
position: absolute;
top: %;
margin-top: -px; 
font-size: px;
cursor: pointer;
}
.left{
left: px;
}
.right{
right: px;
}
.container .num .active{
background: rgba(,,,);
color: #fff;
}
</style>
<script type="text/javascript" src="../jquery-...min.js"></script>
<script type="text/javascript">
var i=;
var t;
$(document).ready(function(){
$(".container .img li").eq(i).fadeIn().siblings().fadeOut(); 
$(".container .num li").on("mouseover",active);
t=setInterval(time_fun,);
$(".container").hover(in_fun,out_fun);
$(".container .left").on("click",left_fun);
$(".container .right").on("click",right_fun);
});
function time_fun(){
i++;
if(i==){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
function in_fun(){
clearInterval(t);
}
function out_fun(){
t=setInterval(time_fun,);
}
function active(){
$(this).addClass("active").siblings().removeClass("active");
$(".container .img li").eq($(this).index()).fadeIn().siblings().fadeOut();
i=$(this).index();
}
function left_fun(){
i--;
if(i==-){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
function right_fun(){
i++;
if(i==){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
</script>
<body>
<div class="container">
<ul class="img">
<li ><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
</ul>
<ul class="num">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="left"><</div>
<div class="right">></div>
</div>
</body>
</html>

以上是小编给大家带来的jQuery代码实现图片墙自动+手动淡入淡出切换效果,希望对大家有所帮助,同时也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
浅析hasOwnProperty方法的应用
Nov 20 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
浅谈React碰到v-if
Nov 04 Javascript
vue中的inject学习教程
Apr 24 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
jQuery绑定事件的几种实现方式
May 09 #Javascript
jquery实现左右无缝轮播图
Jul 31 #Javascript
node.js从数据库获取数据
May 08 #Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 #Javascript
基于jquery实现最简单的选项卡切换效果
May 08 #Javascript
基于javascript实现图片滑动效果
May 07 #Javascript
基于jquery实现图片放大功能
May 07 #Javascript
You might like
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php+mysql写的简单留言本实例代码
2008/07/25 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python安装pil库方法及代码
2019/06/25 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
2014年基层党组织公开承诺书
2014/03/29 职场文书
教师年度考核评语
2014/04/28 职场文书
走群众路线剖析材料
2014/10/09 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
初一英语教学反思
2016/02/15 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android