js仿YOKA七日重头戏图片切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js仿YOKA七日重头戏图片切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js仿YOKA七日重头戏图片切换</title>
<script type="text/javascript" src="js/script.js"></script>
<link href="css/style.css" type="text/css" rel="stylesheet" />

</head>

<body>

<div class="picdate">
	<dl class="bd1lfti sl">
		<dt><img src="images/n9.gif"></dt>
		<dd><a href="#" target="_blank">&gt;&gt;更多</a></dd>
	</dl>
	<div id="bd1lfimg">
		<div>
			<dl>
				<dt><img src="images/U75P1T121D58F2756DT20100301132449.jpg"></dt>
				<dd>明星教你OL上位穿衣术</dd>
			</dl>
			<dl>
				<dt><a href="#" target="_blank"><img src="images/U75P1T121D58F2761DT20100301154624.jpg"></a></dt>
				<dd>2010享乐旅行时间表</dd>
			</dl>
			<dl>
				<dt><a href="#" target="_blank"><img src="images/U75P1T121D58F2732DT20100310104156.jpg"></a></dt>
				<dd>奥斯卡典礼明星时尚潮流全解析</dd>
			</dl>
			<dl>
				<dt><a href="#" target="_blank"><img src="images/U75P1T121D58F2733DT20100312100300.jpg"></a></dt>
				<dd>让你爱恨交加的数码潮衣</dd>
			</dl>
			<dl>
				<dt><a href="#" target="_blank"><img src="images/U75P1T121D58F2734DT20100318114201.jpg"></a></dt>
				<dd>查询星座血型情侣速配结果</dd>
			</dl>
			<dl>
				<dt><a href="#" target="_blank"><img src="images/U75P1T121D58F2735DT20100312153520.jpg"></a></dt>
				<dd>测试 你有当贵妇的命吗</dd>
			</dl>
			<dl>
				<dt><a href="#" target="_blank"><img src="images/U75P1T121D58F2736DT20100312110347.jpg"></a></dt>
				<dd>白色情人节好礼表心意有奖搭配</dd>
			</dl>
			<dl>
				<dt><a href="#" target="_blank"><img src="images/U75P1T121D58F2756DT20100301132449.jpg"></a></dt>
				<dd>明星教你OL上位穿衣术</dd>
			</dl>
			<dl>
				<dt><a href="#" target="_blank"><img src="images/U75P1T121D58F2761DT20100301154624.jpg"></a></dt>
				<dd>2010享乐旅行时间表</dd>
			</dl>
		</div>
	</div>
	<div id="bd1lfsj">
		<ul></ul>
	</div>
</div>
<script>movec();</script>
</body>
</html>

JS代码(script.js):

//ѡ����function $a(id,tag){
	var re=(id&&typeof id!="string")?id:document.getElementById(id);
	if(!tag){
	return re;
}
else{
	return re.getElementsByTagName(tag);
}
}
function movec()//����ƶ�{
	var o=$a("bd1lfimg");
	var oli=$a("bd1lfimg","dl");
	//����LI�б� var oliw=oli[0].offsetWidth;
	//ÿ���ƶ��Ŀ��var ow=o.offsetWidth-2;
	var dnow;
	//=oli.length-3;
	//��ǰλ��var day=(new Date()).getDay();
	switch(day){
	case 1:dnow=0;
	break;
	case 2:dnow=1;
	break;
	case 3:dnow=2;
	break;
	case 4:dnow=3;
	break;
	case 5:dnow=4;
	break;
	case 6:dnow=5;
	break;
	case 0:dnow=6;
	break;
}
var olf=oliw-(ow-oliw+10)/2;
	o["scrollLeft"]=olf+(dnow*oliw);
	var rqbd=$a("bd1lfsj","ul")[0];
	var extime;
	var rqnr=["","MON","TUE","WED","THU","FRI","SAT","SUN",""];
	for(var i=1;
	i<oli.length-1;
	i++){
	rqbd.innerHTML+="<li>"+rqnr[i]+"</li>";
}
var rq=$a("bd1lfsj","li");
	for(var i=0;
	i<rq.length;
	i++){
	reg(i);
}
;
	oli[dnow+1].className=rq[dnow].className="show";
	var wwww=setInterval(uu,3000);
	function reg(i){
	rq[i].onclick=function(){
	oli[dnow+1].className=rq[dnow].className="";
	dnow=i;
	oli[dnow+1].className=rq[dnow].className="show";
	mv();
}
}
function mv(){
	clearInterval(extime);
	clearInterval(wwww);
	extime=setInterval(bc,15);
	wwww=setInterval(uu,3000);
}
function bc(){
	var ns=((dnow*oliw+olf)-o["scrollLeft"]);
	var v=ns>0?Math.ceil(ns/10):Math.floor(ns/10);
	o["scrollLeft"]+=v;
	if(v==0){
	clearInterval(extime);
	oli[dnow+1].className=rq[dnow].className="show";
	v=null;
}
}
function uu(){
	if(dnow<oli.length-3){
	oli[dnow+1].className=rq[dnow].className="";
	dnow++;
	oli[dnow+1].className=rq[dnow].className="show";
}
else{
	oli[dnow+1].className=rq[dnow].className="";
	dnow=0;
	oli[dnow+1].className=rq[dnow].className="show";
}
mv();
}
}

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
.picdate{border:#cbdcea 1px solid;background:url(../images/xixi.gif) no-repeat left top;overflow:hidden;width:300px;height:186px;margin:0 auto;}
.sl a:link{color:#014fad;text-decoration:none}
.sl a:visited{color:#014fad;text-decoration:none}
.sl a:active{color:#fe7302;text-decoration:underline}
.sl a:hover{color:#fe7302;text-decoration:underline}
.bd1lfti{padding-right:9px;padding-left:11px;padding-top:11px;height:34px}
.bd1lfti dt{float:left}
.bd1lfti dd{float:right;padding-top:1px}
#bd1lfimg{border-right:#e7e7e7 1px solid;margin:0px auto;overflow:hidden;border-left:#e7e7e7 1px solid;width:280px;position:relative;height:121px}
#bd1lfimg div{width:100000px}
#bd1lfimg dl{float:left;overflow:hidden;width:188px;position:relative;height:112px}
#bd1lfimg img{border-right:#e0e0e0 1px solid;padding-right:1px;border-top:#e0e0e0 1px solid;padding-left:1px;filter:alpha(opacity=30);padding-bottom:1px;border-left:#e0e0e0 1px solid;width:174px;padding-top:1px;border-bottom:#e0e0e0 1px solid;position:absolute;height:111px;opacity:0.30}
#bd1lfimg dd{background:#000;filter:alpha(opacity=10);left:2px;width:174px;color:#fff;bottom:0px;position:absolute;text-align:center;opacity:0.10}
#bd1lfimg a:hover img{border-right:#fe7302 1px solid;border-top:#fe7302 1px solid;border-left:#fe7302 1px solid;border-bottom:#fe7302 1px solid}
#bd1lfimg dl.show img{filter:alpha(opacity=100);opacity:1}
#bd1lfimg dl.show dd{filter:alpha(opacity=70);opacity:0.7}
#bd1lfsj{border-right:#e7e7e7 1px solid;margin:0px auto;overflow:hidden;border-left:#e7e7e7 1px solid;width:280px;height:16px}
#bd1lfsj ul{width:10000px}
#bd1lfsj li{border-right:#fff 1px solid;background:#f0f6fb;float:left;font:10px arial;width:39px;cursor:pointer;color:#7d7d7d;padding-top:1px;height:15px;text-align:center}
#bd1lfsj li.show{background:#93bce1;color:#fff}

附件:下载该文件资源,减少时间成本(增值服务)