Heim > Artikel > Web-Frontend > javascript实现淘宝幻灯片广告展示效果_javascript技巧
javascript实现淘宝幻灯片广告展示效果_javascript技巧
- WBOYOriginal
- 2016-05-16 16:02:061123Durchsuche
本文实例讲述了javascript实现淘宝幻灯片广告展示效果的方法。分享给大家供大家参考。具体如下：
一、效果图如下：
二、代码部分：
JS代码部分：
function getClass(oParent,name){
var arr=[];
var oBj=oParent.getElementsByTagName("*");
for(var i=0;i<oBj.length;i++){
if(oBj[i].className==name){
arr.push(oBj[i]);
}
}
return arr;
}
function startmove(obj,json,fnEnd){
var cur=0;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var oStop=true;
for(var attr in json){
if(attr=='opacity'){
cur=Math.round(parseFloat(getStyle(obj,attr)*100));
}else{
cur=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-cur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr]){
oStop=false;
}
if(attr=='opacity'){
obj.style[attr]=(cur+speed)/100;
obj.style.filter="alpha(opacity:"+cur+speed+")";
}else{
obj.style[attr]=cur+speed+"px";
}
}
if(oStop){
clearInterval(obj.timer);
if(fnEnd)fnEnd();
}
},30);
};
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
};
CSS部分：
*{ margin: 0px; padding: 0px; }
img{
border: none; width: 470px; height: 150px;
float: left;
}
.pic_body li{
width: 470px; height: 150px;
float: left; z-index: 3001; }
ul{
list-style: none; position: absolute; top: 0px; left: 0px;
width: 470px; height: 150px; background: yellow; z-index: 3000;
}
#div1{ border: 1px solid black; width: 470px; height: 150px;
position: relative; margin: 100px auto; padding: 0px;
overflow: hidden;
}
#div1 ol{ bottom: 10px; right: 10px;
position: absolute; z-index: 9999;
}
ol li{ background: yellow; float: left;
display: inline; margin-right: 3px; padding: 3px 4px;
position: relative; top: 0px; left: 0px;
font-family: arial; font-size: 12px;
cursor: pointer; filter: alpha(opacity:60); opacity: 0.6;
border: 1px solid black;
}
.active{ background: yellow; font-weight: bolder;
padding: 4px 6px; filter: alpha(opacity:100); opacity: 1;
}
HTML部分：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="css.css" rel="stylesheet" type="text/css">
<script src="myscript.js"></script>
<script>
window.onload=function() {
var now = 0;
var oDiv = document.getElementById('div1');
var oOl = oDiv.getElementsByTagName('ol')[0];
var oLi = oOl.getElementsByTagName('li');
var oUl = getClass(oDiv, 'pic_body')[0];
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onclick=function(){
now=this.index;
tab();
};
}
function tab(){
for(var i=0;i<oLi.length;i++){
oLi[i].className='';
}
oLi[now].className='active';
startmove(oUl,{top:-150*now});
};
function next(){
now++;
if(now==oLi.length){
now=0;
}
tab();
};
var timer=setInterval(next,3000);
oUl.onmouseover=function(){
clearInterval(timer);
};
oUl.onmouseout=function(){
timer=setInterval(next,3000);
};
}
</script>
</head>
<body>
<div id="div1">
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul class="pic_body">
<li><img src="image/1.jpg" alt="javascript实现淘宝幻灯片广告展示效果_javascript技巧" ></li>
<li><img src="image/2.jpg" alt="javascript实现淘宝幻灯片广告展示效果_javascript技巧" ></li>
<li><img src="image/3.jpg" alt="javascript实现淘宝幻灯片广告展示效果_javascript技巧" ></li>
<li><img src="image/4.jpg" alt="javascript实现淘宝幻灯片广告展示效果_javascript技巧" ></li>
<li><img src="image/5.jpg" alt="javascript实现淘宝幻灯片广告展示效果_javascript技巧" ></li>
</ul>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JQuery记住用户名密码实现下次自动登录功能_jqueryNächster Artikel：jquery实现标签上移、下移、置顶_jquery