JS实现背景渐变轮换（已有背景轮换代码，只要一个轮换效果就可以）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现背景渐变轮换（已有背景轮换代码，只要一个轮换效果就可以）相关的知识，希望对你有一定的参考价值。
背景轮换代码如下：
<script>
var aaa=['bg3.jpg','bg1.jpg','bg2.jpg'];
var count = 0;
setInterval("on_load()",10000);
function on_load()
document.body.style.background="url("+aaa[count]+") no-repeat fixed right 0 #000";
if (++count == aaa.length)
count = 0;
</script>
现在需要轮换时要有渐变的效果，回答好的，我给予追加分。
已解决。虽然不是下面两位的贡献，但非常感谢他们的支持，多谢二楼朋友的热心帮助。
实现代码：
<script language="javascript">
var imgArr = [];
imgArr[imgArr.length] = 'images/avatars/01.gif';
imgArr[imgArr.length] = 'images/avatars/02.gif';
imgArr[imgArr.length] = 'images/avatars/03.gif';
var iPos = -1;
function doWith()
iPos = (iPos < imgArr.length - 1) ? iPos + 1 : 0 ;
var _b = document.body;
with (_b)
filters.revealTrans.Transition = Math.floor(Math.random() * 23);
filters.revealTrans.apply();
style.backgroundImage = 'url(\'' + imgArr[iPos] + '\')';
filters.revealTrans.play();
setTimeout('doWith()', 2000);
</script>
<body style="filter: revealTrans(duration=2, transition=20);" onload="doWith();">
</body>
Transition=8 可以把数字改为以下参数实现不用的效果
盒状收缩 RevealTrans 0 盒状展开 RevealTrans 1 圆形收缩 RevealTrans 2 圆形展开 RevealTrans 3 向上擦除 RevealTrans 4 向下擦除
RevealTrans 5 向左擦除 RevealTrans 6 向右擦除 RevealTrans 7 垂直百页窗 RevealTrans 8 水平百页窗 RevealTrans 9 横向棋盘式 RevealTrans
10 纵向棋盘式 RevealTrans 11 溶解 RevealTrans 12 左右向中部收缩 RevealTrans 13 中部向左右展开 RevealTrans 14 上下向中部收缩
RevealTrans 15 中部向上下展开 RevealTrans 16 阶梯状向左下展开 RevealTrans 17 阶梯状向左上展开 RevealTrans 18 阶梯状向右下展开
RevealTrans 19 阶梯状向右上展开 RevealTrans 20 随机水平线 RevealTrans 21 随机垂直线 RevealTrans 22 随机 RevealTrans 23
不需要js （其实是我用js做不出来）
把以代码看懂后
加在 held部分
准备几个网页每个放一张图片
做一个线性的连接 参考技术B 加我qq，看看是这种效果不？1024556147，验证码为“渐变轮换”本回答被提问者采纳
JS实现banner图轮换
方法一：
<!--灰色背景代码替换图片-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<div>
<img src="../img/110.jpg" width="970" height="280" id="img" />
</div>
</div>
<script type="text/javascript">
var curIndex=0;
var arr=new Array();
arr[0]="../img/111.jpg";
arr[1]="../img/112.jpg";
arr[2]="../img/110.jpg";
setInterval(function(){
var img=document.getElementById("img");
if (curIndex==arr.length-1) {
curIndex=0;
} else {
curIndex+=1;
}
img.src=arr[curIndex];
} ,3000);
</script>
</body>
</html>
方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#banner{
width: 100%;
overflow: hidden;
white-space: nowrap;
position: relative;
}
#banner #inside{
width: 9600px;
position: relative;
left: 50%;
margin-left: -960px;
transition: all 1s ease;
}
#banner img{
width: 1920px;
}
#bannerNum{
padding: 0px;
list-style: none;
overflow: hidden;
width: 160px;
position: absolute;
bottom: 30px;
right: 50px;
}
#bannerNum li{
width: 30px;
height: 30px;
background-color: white;
text-align: center;
line-height: 30px;
margin: 0px 5px;
float: left;
cursor: pointer;
}
</style>
<script>
var num = 1;
var inside;
window.onload = function(){
inside = document.getElementById("inside");
var interval = setInterval(function(){
inside.style.transition = "all 1s ease";
num++;
switch (num){
case 1:
inside.style.transition = "none";
inside.style.marginLeft = (-960)+"px";
break;
case 2:
inside.style.marginLeft = (-960-1920)+"px";
break;
case 3:
inside.style.marginLeft = (-960-1920*2)+"px";
break;
case 4:
inside.style.marginLeft = (-960-1920*3)+"px";
break;
case 5:
inside.style.marginLeft = (-960-1920*4)+"px";
num = 0;
break;
default:
break;
}
},2000);
}
function changeBanner(num1){
inside.style.transition = "none";
switch (num1){
case 1:
inside.style.marginLeft = (-960)+"px";
break;
case 2:
inside.style.marginLeft = (-960-1920)+"px";
break;
case 3:
inside.style.marginLeft = (-960-1920*2)+"px";
break;
case 4:
inside.style.marginLeft = (-960-1920*3)+"px";
break;
default:
break;
}
num = num1-1;
}
</script>
</head>
<body>
<div id="banner">
<div id="inside"><img src="../img/110.jpg" id="img1" /><img src="../img/111.jpg" id="img2" /><img src="../img/112.jpg" id="img3" /><img src="../img/111.jpg" id="img4" /><img src="../img/110.jpg" id="img5" />
</div>
<ul id="bannerNum">
<li onclick="changeBanner(1)">1</li>
<li onclick="changeBanner(2)">2</li>
<li onclick="changeBanner(3)">3</li>
<li onclick="changeBanner(4)">4</li>
</ul>
</div>
</body>
</html>
以上是关于JS实现背景渐变轮换（已有背景轮换代码，只要一个轮换效果就可以）的主要内容，如果未能解决你的问题，请参考以下文章