淘宝幻灯片广告展示

最新推荐文章于 2024-08-13 09:40:14 发布

亲爱的汉尼拔

最新推荐文章于 2024-08-13 09:40:14 发布

阅读量475

点赞数 1

分类专栏： HTML5 文章标签： CSS javascript html JS运动

本文链接：https://blog.csdn.net/mememen1987/article/details/45174971

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

淘宝幻灯片广告展示

效果图：

代码：

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.οnlοad=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].οnclick=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.οnmοuseοver=function(){
                clearInterval(timer);
            };
            oUl.οnmοuseοut=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>

亲爱的汉尼拔

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
淘宝幻灯片广告展示

淘宝幻灯片广告展示效果图：代码：JS代码部分：function getClass(oParent,name){ var arr=[]; var oBj=oParent.getElementsByTagName("*"); for(var i=0;i<oBj.length;i++){ if(oBj[i].className==name)
复制链接

扫一扫

专栏目录