javascript实现淘宝幻灯片广告展示效果

 　　本文实例讲述了javascript实现淘宝幻灯片广告展示效果的方法。分享给大家供大家参考。具体如下：

　　一、效果图如下：


　　二、代码部分：

　　JS代码部分：

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

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部分：

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

*{ 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部分：

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<!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"></li>
<li><img src="image/2.jpg"></li>
<li><img src="image/3.jpg"></li>
<li><img src="image/4.jpg"></li>
<li><img src="image/5.jpg"></li>
</ul>
</div>
</body>
</html>

　　希望本文所述对大家的javascript程序设计有所帮助。

时间： 2024-09-21 20:48:06

javascript实现淘宝幻灯片广告展示效果的相关文章

javascript实现淘宝幻灯片广告展示效果_javascript技巧

本文实例讲述了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]); }

JS实现淘宝幻灯片效果的实现方法_javascript技巧

实现思路: 1.for循环给数字按钮加上点击事件. 2.for循环先把按钮的样式清空,再把当前样式设置样式. 3.给每个按钮添加自定义属性index aBtn[i].index=i aBtn[2]=2 第二个按钮和第二张图片想对应,用运动框架把大图的UL每次移动-150px,因为图片高度是150px.如果移动到第n张图片就是-150*n. 4.定义变量now,用来自动播放用的.把当前图片赋值给now  now=this.index. 5.定义自动播放函数.now++ 下一张,if判断,到最后一张

Javascript模仿淘宝信用评价实例(附源码)_javascript技巧

本文实例讲述了Javascript模仿淘宝信用评价实现方法.分享给大家供大家参考,具体如下: 老板昨天开会说:要给公司的购物平台增加信用评价功能,用户体验参考淘宝. 于是今天研究了一下,用jQuery模似一个类似的效果: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&

JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析_javascript技巧

淘宝图片处理讨论淘宝网页面很大,但是打开速度很快.其对图片处理是运用了滚动加载,就是滚动轴滚到哪里,图片在哪里加载.但是你想查看他的源代码,那要费九牛二虎之力吧,因为他们代码压缩合并做的很好!因为图片是滚动加载的,初始化的时候图片不加载,那么当你在页面底部刷新页面的时候,底部的页面通常不会加载出来,淘宝网的做法貌似是(因为我没有看他们的源代码,只是凭操作),刷新让页面回到顶部. 模仿淘宝,做滚动图片加载 这里想到了三种方法:1.javascript懒加载之可视区域加载 <!DOCTYPE htm

jQuery实现类似淘宝网图片放大效果的方法_jquery

本文实例讲述了jQuery实现类似淘宝网图片放大效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>类似淘宝网的图片放大代码</title> <script type="

浅析淘宝客广告

以前大部分站长喜欢做cpc(点击)广告,对cps(销售)广告不太感兴趣,因为认为cps不好赚.现在网民越来越多,越来越高端,网上消费越来越多,所以cps广告也越来越好做.而最近淘宝客的兴起,很多站长都尝试去做,不少站长都赚了.我也尝试做了一下,过程中发现了淘宝客自身有一些优势和弱势. 优势1:依靠淘宝网这棵大树,大家可以百度指数一下淘宝.当当.卓越这三个词的指数,就知道淘宝这棵大树有多大了,网民看到这是淘宝网,就不必考虑交易安全问题了. 优势2:淘宝网有众多商家,所以淘宝客有众多的商品等着推广,

望asp或ajax程序高手出手相助解决类似于阿里巴巴或淘宝拼音检索分类效果

问题描述 能把以下这段代码转换成从数据库读取,我已经在数据库里将分类的产品加上相应字母字段,比如香水,我加的字段里标为x,啤酒则为p,要求出现的效果类似于阿里巴巴或淘宝拼音检索分类效果,我手上已经有静态的效果,我现在希望能动态从数据库读取,网高手相助,确实有用,.不甚感激.因为代码太长,无法发上来,以下是静态效果的代码地址:http://www.jz178.com/html/jscode/integrated/200903/22-23994.html请直接给出代码,不要留参考地址,能解决将万分感

jquery+CSS3实现淘宝移动网页菜单效果_jquery

本文实例讲述了jquery+CSS3实现淘宝移动网页菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jquery+CSS3实现的淘宝移动网页菜单,其实这个菜单动画并不复杂,只有缩放和位移.难点是用了扇形结构,而且还要实现扇形的链接区域,这个就费脑筋了,最后采用了传统的图片map来做热区,效果还不错.相信肯定有更好的解决方法. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css3-taobao-phone-menu-c

淘宝公益广告呼吁“各尽其能”鼓励回乡创业

北京时间3月29日消息,淘宝公益广告今日首次现身央视,视频内容呼吁年轻人"各尽其能,各得其所".众所周知,蚁族.蜗居族在大城市已成为不容忽视的庞大群体,伴随着物价.房价的不断上涨及金融危机的影响,"回乡创业"."自主就业"必将成为撤离大城市的主流趋势. 全国人大常委.民建中央副主席.经济学家辜胜阻教授表示:"网络创业具有倍增效应.一人开网店,可以带动3.8人就业".据IDC研究报告显示,截止2009年,已经有超过80万人在淘宝