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隔行变色与普通JS写法的对比
Apr 21 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
详解js的六大数据类型
Dec 27 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
创建nuxt.js项目流程图解
Mar 13 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
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
jquery动态加载图片数据练习代码
2011/08/04 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
Python探索之SocketServer详解
2017/10/28 Python
Python学生信息管理系统修改版
2018/03/13 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
Django配置跨域并开发测试接口
2020/11/04 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
文员试用期转正自我鉴定
2014/09/14 职场文书
工程技术员岗位职责
2015/04/11 职场文书
2015年维修工作总结
2015/04/25 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
Java版 单机五子棋
2022/05/04 Java/Android