用css和js解决背景图片切换和渐变效果

最新推荐文章于 2024-03-01 16:59:08 发布
最新推荐文章于 2024-03-01 16:59:08 发布
阅读量1.8k 收藏 6
点赞数
分类专栏： 操作 文章标签： js css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50505705/article/details/115347462
版权

用css和js解决背景图片切换和渐变效果

1.css部分

.b{background-image:url(/image/dayin.gif)left top no-repeat;
  width: 100%; min-width:1200px; height: 100%; position: absolute; top: 0; left: 0; 
  background-size: cover;
  -webkit-transition: all 1s linear; transition: all 1s linear;
}

搭好css用标签中class实现, all 1s linear 实现几秒渐变

2.js部分

function goo(n){
		var num = Number(n);
		if(num%3==1){
			setTimeout(function(){
						document.getElementById('mainCnt').style.backgroundImage='url(${pageContext.request.contextPath }/images/shop1.jpg)';
						goo(num+1);
					}
					,6000);
		}else if(num%3==2){
			setTimeout(function(){
						document.getElementById('mainCnt').style.backgroundImage='url(${pageContext.request.contextPath }/images/shop2.jpg)';
						goo(num+1);
					}
					,6000);
		}else{
			setTimeout(function(){
						document.getElementById('mainCnt').style.backgroundImage='url(${pageContext.request.contextPath }/images/shop.jpg)';
						goo(num+1);
					}
					,6000);
		}
	}
	goo(1);

编写js加载页面的时候就执行

3.标签编写

<body class="b" id="doo">
</body>

4.总结
基本用于登陆界面的多个背景变换，让多个图片在页面上渐变显示

狂火灵
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript图片背景渐变切换
02-02
javascript图片背景渐变切换! 很值得下载看看!资源免费,大家分享!!
JS图片渐变切换，JS图片展示
07-12
图片渐变并自动切换效果，适合做公司产品展示、购物网站图片展示等效果
css 背景图基础讲解和窗口滚动切换背景图案例
最新发布
weixin_44565776的博客
03-01 361
主要介绍css 背景图基础知识以及在如何固定背景图，在滚动窗口的时候，背景图无感切换
php+js+背景特效,JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
weixin_39582708的博客
03-10 361
本文实例讲述了JS+CSS实现的漂亮渐变背景特效代码。分享给大家供大家参考，具体如下：运行效果截图如下：具体代码如下：JS配合CSS实现的漂亮渐变背景特效6个实例var setGradient = (function() {var p_dCanvas = document.createElement('canvas');var p_useCanvas = !!(typeof(p_dCanvas.g...
用js写一个图片渐变切换效果
u013247277的博客
04-26 6557
进度条 *{margin:0;padding:0;} #ulmian{ position:relative; width:100%; overflow:hidden; } #ulmian li{ position:absolute; height:100%; opacity:0; transition:opacity 1s; } #ulmian li:first-ch
css实现图片自动渐变切换、element-plus 的修改el-table的（边框线为虚线、表头样式）
ZDM_9999的博客
01-03 651
【代码】css实现图片自动渐变切换、element-plus 的修改el-table的（边框线为虚线、表头样式）
CSS3全屏背景图片缩小渐变切换代码.zip
07-11
CSS3全屏背景图片缩小渐变切换代码，全屏自动切换背景，效果还是很漂亮，用在后台登录页面或者网站首页也还是不错的，php中文网推荐下载！
CSS3实现的全屏背景图片缩小渐变切换效果源码.zip
07-05
这是一款纯CSS3实现的全屏背景图片缩小渐变切换效果源码，页面的背景图可呈现定时渐变与切换效果。渐变大小缩放效果流畅自然，采用纯css3技术控制切换效果。建议使用支持css3效果较好的火狐或谷歌等浏览器预览本源码...
CSS3全屏背景图片缩小渐变自动切换代码
06-11
这是一款css3实现的全屏背景图片渐变式切换代码特效，图片缩小渐变动画切换效果，不依赖任何JS代码。
CSS3全屏背景图片缩小渐变代码
04-06
CSS3全屏背景图片缩小渐变代码是一款纯css3实现的背景渐变式切换，不依赖任何JS代码。
CSS3全屏背景图片缩小渐变特效代码
03-20
CSS3全屏背景图片缩小渐变代码是一款纯css3实现的背景渐变式切换，不依赖任何JS代码。
js实现图片从左往右渐变切换效果的方法
10-24
主要介绍了js实现图片从左往右渐变切换效果的方法,是比较典型的图片渐变切换效果特效,非常具有实用价值,需要的朋友可以参考下
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
01-19
本文实例讲述了JS+CSS实现的漂亮渐变背景特效代码。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： <html> <head> <title> JS配合CSS实现的漂亮渐变背景特效6个实例 </title> [removed] var setGradient = (function() { var p_dCanvas = document.createElement('canvas'); var p_useCanvas = !!(typeof(p_dCanvas.getContext)
JS+html 渐变滚动切换广告图片效果
01-10
JS+html 渐变滚动切换广告图片效果
js 特效 多张图片交换显示渐变图片代码
04-21
js 特效 图片滚动 渐变 多张图片滚动js 特效 图片滚动 渐变 多张图片滚动js 特效 图片滚动 渐变 多张图片滚动js 特效 图片滚动 渐变 多张图片滚动js 特效 图片滚动 渐变 多张图片滚动js 特效 图片滚动 渐变 多张图片滚动js 特效 图片滚动 渐变 多张图片滚动js 特效 图片滚动 渐变 多张图片滚动js 特效 多张图片交换显示渐变图片代码js 特效 多张图片交换显示渐变图片代码js 特效 多张图片交换显示渐变图片代码js 特效 多张图片交换显示渐变图片代码js 特效 多张图片交换显示渐变图片代码js 特效 多张图片交换显示渐变图片代码
js实现图片淡入淡出切换简易效果
11-24
本文实例为大家分享了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: none;height: 30px;border: 1px solid #000;width: 100px;float: left;line-hei
JavaScript实现图片的渐变效果
weixin_30756499的博客
09-03 489
实现起来原理是这样的：用javascript来给css中的alpha滤镜，产生一个循环，检测alpha值是否达到100，如果没达到，则+10，直到达到100。原理是这样的，具体实现起来可以把以下javascript放在叶面的<head>和</head>中间： <script type ="text/javascript" > funct...
JS由左向右的图片渐变过渡切换效果
lazman的专栏
09-05 1732
JS由左向右的图片渐变过渡切换效果 <table width="778" border="0" align="center" cellpadding="0" cellspacing="0"> <div id=oTransContainer style="FILTER: progid:DXImageTransform.Microsoft.Wipe(Gra
html实现背景图片自动更换,js+css3实现背景大图自动渐变切换
weixin_33610824的博客
05-30 1759
青岛星网开发会员登录注册页面的时候，想实现页面大背景自动渐变切换，不想引用JQ因为太大，就用JS+CSS3用很少的代码实现了一个，下面跟大家分享代码。页面放背景图片的HTML代码这是2个背景图片切换，如果你想用3个或4个图片切换，增加里面的div即可，把ID=bg+数，递增即可。当然CSS里面也要相应的写上图片哦。CSS部分代码.bg{position:absolute;left:0;top:0;...
轮播图图片切换背景根据图片颜色渐变怎么弄
07-22
要实现轮播图图片切换背景根据图片颜色渐变的效果，可以使用CSS和JavaScript来实现。下面是一种实现方式的示例代码： HTML部分： ```html <div class="slideshow"> <div class="slide"> <img src="image1.jpg" alt="Image 1"> </div> <div class="slide"> <img src="image2.jpg" alt="Image 2"> </div> <div class="slide"> <img src="image3.jpg" alt="Image 3"> </div> </div> ``` CSS部分： ```css .slideshow { position: relative; } .slide { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; } .slideshow img { width: 100%; height: auto; } .slideshow::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0)); z-index: -1; } ``` JavaScript部分： ```javascript const slides = document.querySelectorAll('.slide'); let currentIndex = 0; function changeSlide() { slides[currentIndex].classList.remove('active'); currentIndex = (currentIndex + 1) % slides.length; slides[currentIndex].classList.add('active'); } setInterval(changeSlide, 3000); ``` 上述代码中，通过CSS设置了轮播图容器的样式以及背景渐变效果。JavaScript部分实现了切换轮播图的逻辑，并使用setInterval函数定时调用changeSlide函数来切换图片。每次切换图片时，会为当前显示的图片添加active类，从而使其显示出来。 你可以根据实际需要修改CSS样式和JavaScript代码，来适应你的项目需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值