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


Posted in Javascript onApril 27, 2015

本文实例讲述了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]); 
    } 
  } 
  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"></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程序设计有所帮助。

Javascript 相关文章推荐
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
浅析node.js中close事件
Nov 26 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
jquery实现标签上移、下移、置顶
Apr 26 #Javascript
jquery ui resize 中border-box的bug修正
Apr 26 #Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 #Javascript
jquery获取节点名称
Apr 26 #Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 #Javascript
jquery插件qrcode在线生成二维码
Apr 26 #Javascript
javascript函数式编程实例分析
Apr 25 #Javascript
You might like
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
如何用php获取文件名后缀
2013/06/09 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
javascript 实现map集合
2015/04/03 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
企业军训感言
2014/02/08 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
周一给客户的问候语
2015/11/10 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript