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

2024-12-02 10:22:40

本文实例讲述了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实现淘宝商品广告效果

本文实例为大家分享了JavaScript实现淘宝商品广告效果的具体代码,供大家参考,具体内容如下 CSS部分: ul{ margin: 0; padding: 0; } li{ list-style: none; } #ad{ width: 298px; height: 208px; border: 1px #ff6300 solid; padding: 4px 1px; text-align: center; } #ad .listL{ float: left; } #ad .listR{ f
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]); }
JavaScript实现淘宝商品图切换效果

JavaScript之衣服相册切换效果(类似淘宝商品图切换),供大家参考,具体内容如下话不多说,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #bigImg{ width: 200
JS实现淘宝幻灯片效果的实现方法

实现思路: 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实现淘宝放大镜效果的具体代码,供大家参考,具体内容如下 html代码 <div class="thumbnail"> <img src="./img/12-1Z930152149 (2).jpg" alt=""> <div class="magnifier"></div> </div> <div class="o
Javascript模仿淘宝信用评价实例(附源码)

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

本文实例讲述了Android开发实现绘制淘宝收益图折线效果.分享给大家供大家参考,具体如下: 实现的效果我一会贴上,我先说下原理,我们知道要实现在canvas上画线,不就是要搞一个paint嘛,然后首先肯定要设置下paint的属性,那么画文字呢,不就是Textpaint吗,对,就是这么简单,接下来怎么画,折线图主要分为X轴和y轴,x轴表示日期,y表示收益,好,说道这里,大家应该知道怎么去做了,下面直接贴代码这个方法是,画x,y坐标系的,以及上面的日期和收益了 private void draw
React实现类似淘宝tab居中切换效果的示例代码

效果 DOM布局 const label = { lettersort: false, paramname: "label", paramid: 0, title: "车源列表筛选项", option: [{ value: 1, text: "全部" }, { value: 2, text: "本地求购" }, { value: 3, text: "精准收车" }, { value: 4, text: &q
JavaScript仿淘宝实现固定右侧侧边栏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,

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

相关推荐

随机推荐