js焦点图仿拍拍首页图片切换上下滚动slider图片切换



159 633 212



特效描述:js 焦点图 图片切换 上下滚动 slider图片切换,js焦点图仿拍拍首页图片切换slider上下滚动图片切换带序列按钮控制图片滚动。内含js代码下载

代码结构

1. HTML代码

<div class="slider">
	<ul class="num" id="homePushName">
		<li class="current">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
	<ul class="bg" id="homePushBg">
		<li>&nbsp;</li>
		<li>&nbsp;</li>
		<li>&nbsp;</li>
		<li>&nbsp;</li>
		<li>&nbsp;</li>
	</ul>
	<ul style="margin-top:0px;" class="pic" id="homePushShow">
		<li><a href="http://www.dijiuzhanzhang.com/"><img width="490" height="180" alt="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动" src="images/1.jpg" /></a></li>
		<li><a href="http://www.dijiuzhanzhang.com/"><img width="490" height="180" alt="javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动" src="images/2.jpg" /></a></li>
		<li><a href="http://www.dijiuzhanzhang.com/"><img width="490" height="180" alt=" javascript滚动图片带按钮控制上下左右自动无缝滚动" src="images/3.jpg" /></a></li>
		<li><a href="http://www.dijiuzhanzhang.com/"><img width="490" height="180" alt=" javascript滚动图片按钮控制图片左右自动滚动" src="images/4.jpg" /></a></li>
		<li><a href="http://www.dijiuzhanzhang.com/"><img width="490" height="180" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li>
	</ul>
</div><!--slider end-->
<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*180;
			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);
	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);
		}
	}
	setInterval(function(){
		timeCount+=1
		if(timeCount>=5){
			window.controlAction=setTimeout(function(){
				tid=tid+1;
				if(tid>=picCount){tid=0;}
			},20);
			timeCount=0;
		}
	},1000);
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动流动 滚动切换 滑动选项卡切换 flash焦点图 自动滚动图片轮播 选项卡切换 滑动手风琴 焦点图幻灯片 滚动切换 图片滚动 图片切换 图片轮播 自动滚动图片轮播

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到