注册 | 登陆

您的位置：阿里西西 > 网页特效 > 图像特效 > 详细内容

js图片切换代码

稿源：互联网 2022-07-21 13:05:26 点击： 34404 撤稿纠错

兼容多种浏览器，站长特效网之前用的图片切换特效，现在拿出来共享。

以下讨论的是和相关的js图片切换代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<style type="text/css" media="screen">
*{margin:0;padding:0;}
body {
	margin:0;
	padding:0;
	font-size:12px;
	font:12px/1.5em Tahoma, Verdana, Simsun, Microsoft YaHei, Arial Unicode MS, Mingliu, Arial, Helvetica;
}
img {
	border:none;
}
ul,li {
	margin:0;
	padding:0;
	list-style:none;
}
.slider {
	position:relative;
	width:748px;
	height:80px;
}
.slider .pic {}
.slider .pic img {
	width:748px;
	height:80px;
}
.slider .num {
	z-index:2;
	position:absolute;
	right:2px;
	bottom:2px;
	width:95px;
	height:16px;
}
.slider .num li {
	float:left;
	display:inline;
	width:16px;
	height:16px;
	line-height:16px;
	margin-left:3px;
	text-align:center;
	color:#595959;
	cursor:pointer;
}
.slider .num li.current {
	background-color:#ffffff;
	font-weight:bold;
	color:#ff4e00;
}
.slider .bg {
	z-index:1;
	position:absolute;
	right:2px;
	bottom:2px;
	width:95px;
	height:16px;
}
.slider .bg li {
	float:left;
	display:inline;
	width:16px;
	height:16px;
	line-height:16px;
	margin-left:3px;
	background-color:#fff;
	filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;background-color:#ffffff;font-size:0;
	text-align:center;
	color:#595959;
	font-size:0;
}
</style>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div class="slider" style="height:80px; overflow:hidden">
  <ul class="num" id="homePushName">
    <li id="homeAd0" class="current">1</li>
    <li id="homeAd1">2</li>
    <li id="homeAd2">3</li>
    <li id="homeAd3">4</li>
    <li id="homeAd4">5</li>
  </ul>
  <ul class="bg" id="homePushBg">
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
  </ul>
  <ul class="pic" id="homePushShow">
<li id="homePushShow1" style="height:80px; overflow:hidden;">
<a href="<#ZC_BLOG_HOST#>" target="_blank" title="站长特效网，打造国内最帅的网页特效站！"><img src="/ad/1.jpg"/></a>
</li>
<li id="homePushShow2" style="height:80px; overflow:hidden;">
<a href="http://www.zzjs.net" target="_blank" title="站长特效网，打造国内最帅的网页特效站！"><img src="/ad/2.jpg"/></a>
</li>
<li id="homePushShow3" style="height:80px; overflow:hidden;">
<a href="http://www.zzjs.net" target="_blank" title="三号广告图片说明信息"><img src="/ad/3.jpg"/></a>
</li>
<li id="homePushShow4" style="height:80px; overflow:hidden;">
<a href="http://www.zzjs.net" target="_blank" title="四号广告图片说明信息"><img src="/ad/4.jpg"/></a>
</li>
<li id="homePushShow5" style="height:80px; overflow:hidden;">
<a href="http://www.zzjs.net" target="_blank" title="五号广告图片说明信息"><img src="/ad/5.jpg"/></a>
</li>
</ul>
</div>
<script type="text/javascript">
	var listItem=document.getElementById("homePushShow");
	var tList=document.getElementById("homePushName").childNodes;
	var controlItem=[];
	for(var i=0;i<tList.length;i++){
		if(tList[i].nodeName.toLowerCase()=="li"){
			controlItem.push(tList[i]);
		}
	}
	var picCount=controlItem.length;
	var cid=0;
	var tid=Math.floor(Math.random()*picCount);
	window.cTop=0
	window.gTop=0;
	window.speed=0;
	window.controlAction="";
	window.timeCount=0;
	setInterval(function(){
		if(cid!=tid){
			gTop=tid*80;
			speed=(gTop-cTop)/10;
			cid=tid;
			for(var i=0;i<picCount;i++){
				controlItem[i].className=((i==cid)?"current":"");
			}
		}
		if(window.cTop!=window.gTop){
			window.cTop+= parseInt(speed);
			listItem.style.marginTop="-"+ parseInt(window.cTop)+"px";
		}
		document.getElementById("homePushBg").style.display="block";
		document.getElementById("homePushName").style.display="block";
	},20);
//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
	for(var i=0;i<picCount;i++){
		controlItem[i].onmouseover=function(){
			var goId=parseInt(this.innerHTML)-1;
			clearTimeout(window.controlAction);
			window.controlAction=setTimeout(function(){
				tid=goId;
				timeCount=0;
			},300);
		}
		controlItem[i].onmouseout=function(){
			clearTimeout(window.controlAction);
		}
	}
//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
	setInterval(function(){
		timeCount+=1
		if(timeCount>=5){
			window.controlAction=setTimeout(function(){
				tid=tid+1;
				if(tid>=picCount){tid=0;}
			},20);
			timeCount=0;
		}
	},1000);
</script>

关于js图片切换代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016402163393.shtml方便下次再访问哦。

·上一篇： 兼容多种浏览器js图片切换代码
·下一篇： 文字不停向上滚动js代码

相关阅读

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

最新游戏

最新新闻