js特效——闪电

<html>
<head>
<title>闪电闪烁背景</title>
</head>
<body>
<script LANGUAGE="JavaScript">
function blinkOn(){
theWin.document.bgColor = "000000"
nTimes++
JSCTimeOutID = window.setTimeout("blinkOff()",50);
}
function blinkOff(){
theWin.document.bgColor = "FFFFFF"
if (nTimes < 3)
JSCTimeOutID = window.setTimeout("blinkOn()",50);
else theWin.history.go(0)
}
function blinkit(aWin)
{
nTimes = 0
theWin = aWin
JSCTimeOutID = window.setTimeout("blinkOn()",50);
}
</script>

<form>
<div align="center"><center><p><input TYPE="BUTTON" VALUE="欢迎源码爱好者光临" onClick="blinkit(self)">
</p>
</center></div>
</form>
</body>
</html>


你可以使用CSS和JavaScript来实现广告图由左往右滚动的特效。 首先,在HTML文件中创建一个包含广告图的容器,如下所示: ```html <div class="ad-container"> <img src="ad1.jpg"> <img src="ad2.jpg"> <img src="ad3.jpg"> </div> ``` 然后,在CSS文件中设置容器的宽度和高度,并将其中的图片设置为浮动状态,如下所示: ```css .ad-container { width: 500px; height: 200px; overflow: hidden; } .ad-container img { width: 500px; height: 200px; float: left; } ``` 接下来,在JavaScript文件中编写代码,实现广告图由左往右滚动的特效。首先,获取广告图容器以及其中的图片元素,如下所示: ```javascript var adContainer = document.querySelector('.ad-container'); var adImgs = adContainer.querySelectorAll('img'); ``` 然后,使用定时器实现轮播特效。每隔一段时间,将容器向左移动一张图片的宽度,并将第一张图片移动到最后,如下所示: ```javascript var currentIndex = 0; // 当前显示的图片索引 setInterval(function() { var imgWidth = adImgs[0].offsetWidth; // 获取图片的宽度 adContainer.style.transform = 'translateX(-' + imgWidth * currentIndex + 'px)'; currentIndex++; if (currentIndex >= adImgs.length) { currentIndex = 0; adContainer.style.transform = 'translateX(0)'; } }, 3000); // 每隔3秒钟切换一次图片 ``` 最终效果就是,广告图会自动滚动,每隔3秒钟显示下一张图片,直到所有图片都显示完毕后,再从第一张图片重新开始。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值