js淘宝幻灯片上下滑动效果特效代码

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

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

以下是 js淘宝幻灯片上下滑动效果特效代码的示例演示效果:

当前平台(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=gb2312" />
<title>js淘宝幻灯片上下滑动效果</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script src="js/move.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=function(){
	var oDiv=document.getElementById("div1");
	var aBtn=oDiv.getElementsByTagName("ol")[0].getElementsByTagName("li");
	var oUl=oDiv.getElementsByTagName("ul")[0];
	var now=0;
	for(var i=0;i<aBtn.length;i++){
		aBtn[i].index=i;
		aBtn[i].onclick=function(){
			now=this.index
			tab();
			}
		}
		function tab(){
			for(var j=0;j<aBtn.length;j++){
				aBtn[j].className="";
				}
			aBtn[now].className='actived';
			move(oUl,{top:-360*now});
			}
		function next(){
			now++;
			if(now==aBtn.length){
				now=0;
				}
				tab();
			}
		var timer=setInterval(next,5000);
		oDiv.onmouseover=function(){
			clearInterval(timer);
			};
		oDiv.onmouseout=function(){
			timer=setInterval(next,5000)
			}
	}
</script>
</head>

<body style="background:#aaa;">
<div id="div1">
	<ol>
    	<li class="actived">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <ul>
    	<li><img src="images/1.jpg" /></li>
        <li><img src="images/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
        <li><img src="images/5.jpg" /></li>
    </ul>
</div>
</body>
</html>

JS代码(move.js):

function getStyle(obj,name){
	if (obj.currentStyle){
	return obj.currentStyle[name];
}
else{
	return getComputedStyle(obj,false)[name];
}
}
//move(oDiv,{
	width:300,height:300}
)function move(obj,json,fnEnd){
	clearInterval(obj.timer) obj.timer = setInterval(function (){
	var bStop=true;
	for(attr in json){
	var cur = 0;
	if (attr == 'opacity'){
	cur = Math.round(parseFloat(getStyle(obj,attr)) * 100);
}
else{
	cur = parseInt(getStyle(obj,attr));
}
var speed = (json[attr] - cur) / 6;
	speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
	if(cur!=json[attr])bStop=false;
	if (attr == 'opacity'){
	obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
	obj.style.opacity = (cur + speed) / 100;
}
else{
	obj.style[attr] = cur + speed + 'px';
}
}
if(bStop){
	clearInterval(obj.timer);
	if(fnEnd)fnEnd();
}
}
,30);
}

CSS代码(css.css):

*{margin:0;padding:0;}
li{list-style:none;}
#div1{width:750px;height:360px;overflow:hidden;margin:50px auto;position:relative;}
#div1 ol{position:absolute;right:5px;bottom:5px;height:25px;z-index:999;}
#div1 ol li{float:left;width:20px;height:20px;text-align:center;border:1px solid #f47400;margin:2px;cursor:pointer;color:#f47400;background:#fbf2d1;margin-top:2px;}
#div1 ol li.actived{background:#ffb542;font-weight:bold;color:#FFF;width:22px;height:22px;margin-top:0;}
#div1 ul{position:absolute;left:0;top:0;}
#div1 ul li{width:750px;height:360px;float:left;}
#div1 ul li img{width:750px;height:360px;float:left;}

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