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

2024-11-01 08:41:05

相关阅读：

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代码实现图片墙自动+手动淡入淡出切换效果，希望对大家有所帮助，同时也非常感谢大家对我们网站的支持！

jquery实现可旋转可拖拽的文字效果代码

本文实例讲述了jquery实现可旋转可拖拽的文字效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript
jquery实现背景墙聚光灯效果示例分享

复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title
jquery 可拖拽的窗体控件实现代码

所以要引入JQUERY框架. 把我的这个控件代码放到一个js文件里面直接引入就可以了控件代码复制代码代码如下: $.fn.myDrag = function() { var self = $(this); self.css("position", "absolute"); var p = self.position(); self.css({ left: p.left, top: p.top }); self.mousedown( function(event
jquery实现可拖拽弹出层特效

功能很简单,却非常的实用,代码更加的简洁,这里就不多废话了奉上源码: 复制代码代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><
jQuery EasyUI API 中文文档 - Draggable 可拖拽

用$.fn.draggable.defaults重写默认的defaults. 用法复制代码代码如下: <div id="dd" style="width:100px;height:100px;"> <div id="title" style="background:#ccc;">title</div> </div> 复制代码代码如下: $('#dd').draggable(
JQuery Dialog(JS 模态窗口,可拖拽的DIV)

效果图调用示意图交互示意图如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码复制代码代码如下: var JQueryDialog = { /// <summ
jQuery表格列宽可拖拽改变且兼容firfox

本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").movedTh()即可方便实现,修改了firfox的兼容性. 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
jQuery实现可拖拽的许愿墙效果【附demo源码下载】

本文实例讲述了jQuery实现可拖拽的许愿墙效果.分享给大家供大家参考,具体如下: 运行效果图如下: 这里简单介绍下功能点: ① 随机显示背景图或背景色 ② 出现的位置随机 ③ 可以通过拖拽改变位置好了,附上代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>许愿墙</title> <lin
jQuery代码实现图片墙自动+手动淡入淡出切换效果

相关阅读: Jquery代码实现图片轮播效果(一) 在网页上经常可以看到有背景图片可以自动淡入淡入切换的效果,非常漂亮,实用性也非常高.今天小编抽个时间给大家分享基于jquery代码实现图片墙自动+手动淡入淡出切换效果,一起学习吧! 先给大家展示效果图,如果大家觉得还不错,请参考具体实现代码. 添加一个div(class=container),设置宽度和高度,这里设置了宽800px,高450px.添加居中的定位.在div里面添加一个ul(class="img")列表用来盛放图片,设置u
jquery实现经典的淡入淡出选项卡效果代码

本文实例讲述了jquery实现经典的淡入淡出选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的Tab选项卡代码,带有淡入淡出效果,jquery插件实现,希望大家能够喜欢,界面未做美化.感兴趣的朋友可以优化一下运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-jd-fade-in-out-style-tab-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
jQuery实现TAB风格的全国省份城市滑动切换效果代码

本文实例讲述了jQuery实现TAB风格的全国省份城市滑动切换效果代码.分享给大家供大家参考.具体如下: 这里演示jQuery实现的全国省市菜单,加入了选项卡风格,把全国城市按字母范围归类,鼠标移到某一分类的时候,滑动门展开显示所属的全国省分和城市.特别适合于分类信息网站使用.当然,在需要选择省市的时候,也是可以用的.仔细看了下,菜单里面的城市还比较全,你不用再手动添加城市了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tab
js实现图片淡入淡出切换简易效果

本文实例为大家分享了js图片淡入淡出切换详细代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} ul{overflow: hidden;} li{list-style:
vuejs 制作背景淡入淡出切换动画的实例

安装好vuejs之后,在components里添加Background.vue 代码如下 <template> <div class="Background"> <div class="bg"> <transition v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on
js实现图片从左往右渐变切换效果的方法

本文实例讲述了js实现图片从左往右渐变切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <style type="text/css"> .woon{border:1px solid #fff;} .wooff{border:1px solid #ffffff;filter:progid:DXImagetransform.Microsoft.Alpha(style=1,opacity=1500,finishOpacity=1);} </st
jQuery实现侧浮窗与中浮窗切换效果的方法

本文实例讲述了jQuery实现侧浮窗与中浮窗切换效果的方法.分享给大家供大家参考,具体如下: html部分: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type"
Jquery代码实现图片轮播效果（一）

文章写的不好,还请各位高手指教,不废话了,先上张效果图吧看下: 在线演示下载源码首先是初始化部分:将除了第一张轮播图片意外的图片都隐藏,并且隐藏向前.向后按钮,使第一个索引按钮处于激活状态. 事件部分:通过jquery的hover()绑定鼠标上悬以及离开时的事件处理, jquery的bind()方法绑定鼠标点击事件处理向前.向后翻动.轮播控制:pre(), next(), play(), start()开始自动轮播,stop()停止自动轮播. 下篇是一个纯粹的jquery轮播
基于jquery的淡入淡出选项卡效果代码

经典选项卡 .tab{text-align:left;width:500px;border:#ccc 1px solid;margin:100px;} .tab dt{border-bottom:#ccc 1px solid;height:25px;background:#f1f1f1;margin-bottom:-1px;height:25px;line-height:25px;} .tab dt strong{padding:0 15px;color:#444;} .tab dt a{dis
jquery+swiper组件实现时间轴滑动年份tab切换效果

实现效果: 实现代码:需要配合swiper组件使用 Swiper基础演示地址: https://www.swiper.com.cn/demo/index.html HTML: <div class="swiper-container box"> <div class="swiper-wrapper main-timeline"> <div class="swiper-slide timeline fd-active-line&

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

相关推荐

随机推荐