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 相关文章推荐
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
jquery图片切换插件
Mar 16 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
Vue仿支付宝支付功能
May 25 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 Javascript
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
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
vue跨域解决方法
2017/10/15 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
一道python走迷宫算法题
2018/01/22 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
三个python爬虫项目实例代码
2019/12/28 Python
python 实现多维数组(array)排序
2020/02/28 Python
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
给幼儿园老师的表扬信
2014/01/19 职场文书
监察建议书范文
2014/03/12 职场文书
家长会主持词
2014/03/26 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技