js自动循环显示广告

最新推荐文章于 2024-02-08 05:25:47 发布
空道仙
最新推荐文章于 2024-02-08 05:25:47 发布
阅读量2.5k
点赞数
分类专栏： JavaScript 文章标签： function div url border class float
本文链接：https://blog.csdn.net/kongdaoxian/article/details/6795237
版权
JavaScript 专栏收录该内容
6 篇文章 0 订阅
订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
        h1,h2,h3,h4,h5,h6{font-size:100%;}     
        ol,ul{list-style:none;} 
        address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
         table{border-collapse:collapse;border-spacing:0;} 
        fieldset,img{border:0;}
        caption,th{text-align:left;}
        q:before,q:after{content:'';}
        body { font-size: 12px; font-family: Verdana, "宋体", Dotum; line-height: 1.5em; }
        a:link { color: #333; text-decoration: none;}
        a:visited { color: #333; text-decoration: none; }
        a:hover { color: #000; text-decoration: none; }
        a:active { color: #000; text-decoration: none; }
        body { margin: 200px;}

        #visualAd, #visualAd ul { position: relative; }
        #preview, #info, #playIcon { position: absolute; }
        #visualAd {            
            width: 698px;
            height: 312px;
            border: 1px solid #eee;
            background-color: #efefef;
        }            
        #visualAd ul {
            z-index: 100;
            height: 300px;
            float: right;
            text-indent: 25px;
            margin: 5px;
            margin-top: 7px;
        }
        #visualAd ul li {
            float: right;
            clear: both;
            width: 205px;
            height: 50px;
        }
        #visualAd ul a {
            display: block;
            height: 50px;
            background: transparent url(images/bar.png) no-repeat 0 -50px;
            color: #666;
            cursor: pointer;
            text-shadow: 1px 1px 0 #eee;
        }
        #visualAd ul a:hover, #visualAd ul a.on {
            background: transparent url(images/bar.png) no-repeat 0 0;
            color: white;
            text-shadow: 1px 1px 0 #666;
        }
        #visualAd ul a img {
            height: 286px;
            display: none;
        }
        #visualAd ul li a strong {
            padding-top: 8px;
            font-weight: bold;
            font-size: 1.2em;
        }
        #visualAd ul li a strong, #visualAd ul li a span {
            display: block;
            height: 1.3em;
            line-height: 1.3em;
        }
        #preview {
            margin: 6px;
            width: 686px;
            height: 300px;
            z-index: 10;
            cursor: pointer;
            border: 1px solid #ccc;
            background-color: white;
            overflow: hidden;
        }
        #previewImg {
            position: relative;
            left: 0;
            width: 1020px;
            overflow: hidden;
        }
        #previewImg img { float: left; width: 510px;}
        #info {
            bottom: 0;
            height: 60px;
            width: 480px;
            background-color: black;
            margin-left: 10px;
            margin-bottom: 15px;
            color: white;
            opacity: 0.3;
            border-radius : 5px;
            box-shadow: 0 0 5px #fff;
            filter: alpha(opacity=30);
        }
        #msg {
            position: absolute;
            bottom: 0;
            margin-bottom: 25px;
            margin-left: 10px;
            text-shadow: 1px 1px 0 #333;
        }
        #msg p {
            text-indent: 5em;
            margin-top: 6px;
            color: white;
        }
        #msg p strong {
            font-weight: bold;
            font-size: 1.2em;        
        }
        #playIcon {
            top: 10px;
            left: 8px;
            width: 41px;
            height: 41px;
            background: transparent url(./images/playIcon.png) no-repeat 0 0;
        }
        #playIcon.on { background-position: 0 -41px; }
        #controlIcon {
            position: absolute;
            bottom:0;
            left: 0;
            z-index: 1000;
            width: 80px;
            height: 20px;
            background-color: #efefef;
        }
        #controlIcon span {
            display: block;
            float: left;
            line-height: 20px;
            height: 20px;
        }
        #controlLeft, #controlRight{
            width: 8px;                                
        }
        .left {
            background: transparent url(./images/controlIcon.png) no-repeat -12px center;
            margin-left: 8px;
        }
        .right {
            background: transparent url(./images/controlIcon.png) no-repeat -20px center;
            margin-left: 8px;
            margin-right: 8px;
        }
        ._left {
            background: transparent url(./images/controlIconOver.png) no-repeat -12px center;
            margin-left: 8px;
            cursor: pointer;
        }
        ._right {
            background: transparent url(./images/controlIconOver.png) no-repeat -20px center;
            margin-left: 8px;
            margin-right: 8px;
            cursor: pointer;
        }
        #controlStatus {
            width: 6px;
            height: 20px;
            margin-left: 8px;    
            cursor: pointer;
        }
        ._on {background: transparent url(./images/controlIconOver.png) no-repeat 0 center;}
        ._off {background: transparent url(./images/controlIcon.png) no-repeat -6px center;}
        #curIndex{ color: #F07D0D; font-weight: bold; }
    </style>
    <script type="text/javascript">
        function id(id) { return document.getElementById(id); }
        function createTag(tag) { return document.createElement(tag);}
        function createText(text) { return document.createTextNode(text); }
        function next(elem) {
            do {
                elem = elem.nextSibling;
            }
            while(elem && elem.nodeType != 1);
            return elem;
        }
        function prev(elem) {
            do {
                elem = elem.prevousSibling;
            } while(elem && elem.nodeType != 1);
            return elem;
        }
        function first(elem) {
            elem = elem.firstChild
            return elem && elem.nodeType != 1 ? next(elem) : elem;
        }
        function last(elem) {
            elem = elem.lastChild
            return elem && elem.nodeType != 1 ? prev(elem) : elem;
        }
        function parent(elem, num) {
            num = num || 1;
            for (var i=0; i<num; i++) {
                if (elem != null) {
                    elem = elem.parentNode;
                }
            }
            return elem;
        }
        function getStyle(elem, name) {
            // if property has in style object so return 
            if (elem.style[name]) {
                return elem.style[name];
            
            // IE
            } else if (elem.currentStyle) {
                return elem.currentStyle[name];
            
            // W3C
            } else if (document.defaultView && document.defaultView.getComputedStyle) {
                name = name.replace(/([A-Z])/g, "-$1");
                name = name.toLowerCase();
                var s = document.defaultView.getComputedStyle(elem, "");
                return s && s.getPropertyValue(name);
            } else {
                return null;
            }
        }
        function hide(elem) {
            var curDisplay = getStyle(elem, 'display');
            if (curDisplay != 'none') {
                elem.$oldDisplay = curDisplay;
            }
            elem.style.display = 'none';
        }
        function show(elem) {
            elem.style.display = elem.$oldDisplay || '';
        }
        function setOpacity(elem, level) {
            if (elem.filters) {
                elem.style.filters = 'alpha(opacity=' + level + ')';
            } else {
                elem.style.opacity = level/100;
            }
        }
        function winOpen() {
            var len = arguments.length;
            var url, urlName, urlParam;
            switch(len) {
                case 1:
                    url = arguments[0];
                    urlName = '';
                    urlParam = '';
                    break;

                case 2:
                    url = arguments[0];
                    urlName = arguments[1];
                    urlParam = '';
                    break;

                case 3:
                    url = arguments[0];
                    urlName = arguments[1];
                    urlParam = arguments[2];
                    break;

                default:
                    url = false;
                    break;                    
            }
            if (url) { window.open(url, urlName, urlParam);}
            else { exeMsg("请传递URL地址") };    
        }        
        function exeMsg(text) {
            var div = createTag('div');
            div.setAttribute('id', 'exeResult');
            var closeDiv = createTag('div');
            closeDiv.style.backgroundColor = "#000";
            closeDiv.style.fontFamily = "Verdana";
            closeDiv.style.fontWeight = "bold";
            closeDiv.style.color = "white";
            closeDiv.style.textAlign = "center";
            closeDiv.style.width = "1.4em";
            closeDiv.style.height = "1.4em";
            closeDiv.style.position = "absolute";
            closeDiv.style.right = "3px";
            closeDiv.style.top = "3px";
            closeDiv.style.border = "1px solid #efefef";
            closeDiv.style.cursor = "pointer";
            closeDiv.style.borderRadius = "3px";
            closeDiv.onclick = function() { document.body.removeChild(id('exeResult'));}

            closeDiv.appendChild(createText('X'));
            div.appendChild(closeDiv);
            
            div.style.padding = "10px 30px 10px 10px";
            div.style.border = "1px solid #F9592B";
            div.style.backgroundColor = "#F8EEC2";
            div.style.color = "#FD6102";
            div.style.position = "absolute";
            div.style.top = "2px";
            div.style.left = "200px";

            var text = createText(text);
            div.appendChild(text);
            document.body.appendChild(div);
        }    
        function fadeIn(elem) {
            setOpacity(elem, 0);
            show(elem);
            for (var i=0; i<=100; i+=5) {
                (function() {
                    var pos = i;
                    var cur = setTimeout(function() {
                        setOpacity(elem, pos);
                    }, (pos+1) * 10);
                    window.adChange.push(cur);
                })();
            }        
        }
        function horizontalMove(elem) {
            var left;
            var tmpTimer = window.ad.previewImgWid;
            var curIndex = window.ad.curIndex;

            window.adChange[curIndex] = [];
            for (var i=0; i<=window.ad.previewImgWid; i+=5) {
                (function(){
                    var pos = i;
                    var cur = setTimeout(function(){
                        elem.style.left = -pos + 'px';
                    }, 100000/(tmpTimer));
                    tmpTimer -= 2.8;
                    window.adChange[curIndex].push(cur);
                })();
            }
        }
        // 创建预览图像区域
        function createPreview() {
            
            var parentObj = id('visualAd');            
            var firstLiObj = parentObj.getElementsByTagName('li')[parentObj.getElementsByTagName('li').length-1];
            var previewObj = createTag('div');
            previewObj.setAttribute('id', 'preview');
            previewObj.setAttribute('title', firstLiObj.getElementsByTagName('a')[0].getAttribute('href'));
            var imgDivObj = createTag('div');
            imgDivObj.setAttribute('id','previewImg');
            var imgObjSource = createTag('img');
            var imgObj = createTag('img');
            var srcValue = firstLiObj.getElementsByTagName('img')[0].getAttribute('src');
            imgObj.setAttribute('src', srcValue);

            var sourceSrcValue = parentObj.getElementsByTagName('li')[0].getElementsByTagName('img')[0].getAttribute('src');
            imgObjSource.setAttribute('src', sourceSrcValue);

            imgDivObj.appendChild(imgObj);
            imgDivObj.appendChild(imgObjSource);
            previewObj.appendChild(imgDivObj);

            var infoDivObj = createTag('div');
            infoDivObj.setAttribute('id', 'info');
            previewObj.appendChild(infoDivObj);
            
            var msgDivObj = createTag('div');
            msgDivObj.setAttribute('id', 'msg');
            var p1Obj = createTag('p');
            var strongObj = createTag('strong');
            var strongText = firstLiObj.getElementsByTagName('strong')[0].lastChild.nodeValue;            

            strongObj.appendChild(createText(strongText));
            p1Obj.appendChild(strongObj);

            var p2Obj = createTag('p');
            var p2Text = firstLiObj.getElementsByTagName('strong')[0].getAttribute('title');
            p2Obj.appendChild(createText(p2Text));    

            msgDivObj.appendChild(p1Obj);
            msgDivObj.appendChild(p2Obj);

            var playObj = createTag('div');
            playObj.setAttribute('id', 'playIcon');
            msgDivObj.appendChild(playObj);
            previewObj.appendChild(msgDivObj);
                
            var ulObj = parentObj.getElementsByTagName('ul')[0];
            parentObj.insertBefore(previewObj, ulObj);

            var previewObj = id('preview');        // 图像预览div元素节点对象
            var previewImgWid = getStyle(previewObj.getElementsByTagName('img')[0], 'width');
            
            // 检索所有的ul元素节点对象的第一个ul元素节点对象
            var ul = parentObj.getElementsByTagName('ul')[0];
            var aObj = ul.getElementsByTagName('a');    // 检索ul元素节点对象里的所有a元素节点对象            
            var count = aObj.length-1;                // a元素节点对象的数量
            
            window.ad = {
                max:            count,// 鼠标触发事件onmouseover的总数量
                curIndex:        0,    // 当前鼠标触发事件的索引号
                status:            true,    // 记录循环显示状态 
                previewImgWid:    parseInt(previewImgWid),
                firstImg:        sourceSrcValue,
                lastImg:        srcValue    
            };     
        }

        // 添加鼠标事件
        function adInit() {
            var parentObj = id('visualAd');            // 最外层的div元素节点对象
            var previewObj = id('preview');        // 图像预览div元素节点对象

            // 检索所有的ul元素节点对象的第一个ul元素节点对象
            var ul = parentObj.getElementsByTagName('ul')[0];
            var aObj = ul.getElementsByTagName('a');    // 检索ul元素节点对象里的所有a元素节点对象            
            var count = aObj.length;                    // a元素节点对象的数量

            // 鼠标到图像预览区域时停止循环播放
            previewObj.onmouseover = function() {
                id('playIcon').className = 'on'; // 播放icon状态改变 
                window.ad.status = false;    // 当鼠标触发事件onmouseover时停止循环播放显示
            }
            // 鼠标移除图像预览区域时插入icon样式改变
            previewObj.onmouseout = function() { id('playIcon').className = ''; }

            // 单击图像预览区域时打开title属性里的url地址
            previewObj.onclick = function(){ winOpen(this.getAttribute('title'));}    
            window.adChange = []; // 定义指定时间内绑定函数
            
            for (var i=0; i<count; i++) {
                (function() {    
                    var index = i;    
                    aObj[index].onmouseover = function() {    
                        var previewImgObj = id('previewImg');
                        previewImgObj.style.left = '0px';
                        
                        // 若在当前位置时不处理
                        if (window.ad.curIndex == index) return false;                 
                        window.ad.curIndex = index;    // 当前索引值保存到ad对象属性curIndex
                        window.ad.status = false;    // 记录循环播放状态改变为停止
                        cancleOther();    // 取消其他被选择的改变显示
                        this.className = 'on';        // 当前a元素节点对象类名为on
                        changeInfo(this);            // 把当前对象传递到图像预览显示函数
                        // 鼠标触发onmouseover事件时控制播放按钮显示向上和向下激活
                        id('controlStatus').className = '_off';    // 改变成暂停按钮
                        id('controlStatus').status = false;         
                        id('controlLeft').className = '_left';        // 向上按钮显示
                        id('controlRight').className = '_right';    // 向上按钮显示    
                        
                    }                        
                })();
            }
        }    
        
        // 图像预览函数
        function changeInfo(elem) {
            clearBindFunc();
            var previewObj = id('preview');        
            var previewImgObj = id('previewImg');
            
            window.ad.firstImg = window.ad.lastImg;
            window.ad.lastImg = elem.getElementsByTagName('img')[0].getAttribute('src');            
            

            previewImgObj.getElementsByTagName('img')[0].setAttribute('src', window.ad.firstImg);
            
            previewImgObj.getElementsByTagName('img')[1].setAttribute('src', window.ad.lastImg);
            
            // 1/6 这里部分显示当前a元素的索引值加一
            id('curIndex').lastChild.nodeValue = window.ad.curIndex+1;

            // 改变标题
            var title = elem.getElementsByTagName('strong')[0].lastChild.nodeValue;
            id('msg').getElementsByTagName('strong')[0].lastChild.nodeValue = title;

            // 改变内容
            var detail = elem.getElementsByTagName('strong')[0].getAttribute('title');    
            previewObj.getElementsByTagName('p')[1].lastChild.nodeValue = detail;    
            
            // 给preivew设置title属性值为当前a元素节点对象的href地址
            previewObj.setAttribute('title', elem.getAttribute('href'));
            
            // 预览图像渐显示
            //fadeIn(destImgObj);    
            
            horizontalMove(previewImgObj);
        }
        
        function cancleOther() {
            var parentObj = id('visualAd');            // 最外层的div元素节点对象
            // 检索所有的ul元素节点对象的第一个ul元素节点对象
            var ul = parentObj.getElementsByTagName('ul')[0];
            var aObj = ul.getElementsByTagName('a');    // 检索ul元素节点对象里的所有a元素节点对象            
            var count = aObj.length;                    // a元素节点对象的数量
            
            for (var i=0; i<count; i++) {
                aObj[i].className = '';
            }
        }
        function autoSlide() {
            var parentObj = id('visualAd');            // 最外层的div元素节点对象
            // 检索所有的ul元素节点对象的第一个ul元素节点对象
            var ul = parentObj.getElementsByTagName('ul')[0];
            var aObj = ul.getElementsByTagName('a');    // 检索ul元素节点对象里的所有a元素节点对象    
            var count = aObj.length;
            var curIndex = (arguments.length == 0) ? 0 : arguments[0] == count ? 0 : arguments[0];
            window.ad.curIndex = curIndex;
            cancleOther();
            aObj[curIndex].className = 'on';
            var previewImgObj = id('previewImg');            
            previewImgObj.getElementsByTagName('img')[0].setAttribute('src', window.ad.lastImg);        
            
            previewImgObj.style.left = '0px';
            changeInfo(aObj[curIndex]);
            
            window.adChange[curIndex] = [];
            if (window.ad.status) { 
                var cur = setTimeout(function(){autoSlide(++curIndex)}, 3000);
                window.adChange[curIndex].push(cur);
            }
        }
        function controlIcon() {
            var controlObj = id('controlIcon');
            var spanObj = controlObj.getElementsByTagName('span');
            for (var i=0; i<spanObj.length; i++) {
                if (spanObj[i].className == '_on' || spanObj[i].className == '_off') {
                    spanObj[i].onclick = function() {
                        if (typeof this.status == 'undefined') {
                            this.status = true;
                        }
                        if (this.status) {                            
                            this.status = false;
                            this.className = '_off';
                            window.ad.status = false;
                            clearBindFunc();
                            id('controlLeft').className = '_left';
                            id('controlRight').className = '_right';
                            this.setAttribute('title','循环播放');
                            id('controlLeft').setAttribute('title', '向上显示');
                            id('controlRight').setAttribute('title', '向下显示');
                        } else {                            
                            this.status = true;
                            this.className = '_on';
                            window.ad.status = true;
                            autoSlide(++window.ad.curIndex);
                            id('controlLeft').className = 'left';
                            id('controlRight').className = 'right';
                        }
                        return false;
                    }
                }
                if (spanObj[i].className == 'left' || spanObj[i].className == '_left') {
                    spanObj[i].onclick = function() {
                        if (!window.ad.status) {
                            if (window.ad.curIndex == 0){
                                autoSlide(window.ad.max);
                            } else {
                                autoSlide(--window.ad.curIndex);
                            }
                        }
                    }    
                }
                if (spanObj[i].className == 'right' || spanObj[i].className == '_right') {
                    spanObj[i].onclick = function() {
                        if (!window.ad.status) {
                            if (window.ad.curIndex == window.ad.max) {
                                autoSlide(0);
                            } else {
                                autoSlide(++window.ad.curIndex);
                            }
                        }
                    }    
                }
            }    
        }    

        // 已被绑定到setTimeout函数全部清除            
        function clearBindFunc() {
            if (window.adChange.length >= 2){
                var tmp = window.adChange.slice(0, -1);
            } else {
                return false;
            }
            for (var key in tmp) {
                for (var i=0; i<window.adChange[key].length; i++){
                    window.clearTimeout(window.adChange[key][i]);                    
                }
            }
        }

        function createControl() {
            var div = createTag('div');
            div.setAttribute('id', 'controlIcon');

            var leftSpan = createTag('span');
            var    controlSpan = createTag('span');
            var rightSpan = createTag('span');
            var curIndexSpan = createTag('span');
            var delimiterSpan = createTag('span');
            var totalSpan = createTag('span');
            
            leftSpan.className = 'left';
            leftSpan.setAttribute('id', 'controlLeft');
            leftSpan.setAttribute('title', '停止之后才能单击');
            div.appendChild(leftSpan);

            controlSpan.className = '_on';
            controlSpan.setAttribute('id', 'controlStatus');
            controlSpan.setAttribute('title', '停止循环播放');
            div.appendChild(controlSpan);

            rightSpan.className = 'right';
            rightSpan.setAttribute('id', 'controlRight');
            rightSpan.setAttribute('title', '停止之后才能单击');
            div.appendChild(rightSpan);

            curIndexSpan.setAttribute('id', 'curIndex');
            curIndexSpan.appendChild(createText(1));
            div.appendChild(curIndexSpan);

            delimiterSpan.appendChild(createText("\/"));
            div.appendChild(delimiterSpan);

            totalSpan.className = "total";
            totalSpan.appendChild(createText(window.ad.max+1));
            div.appendChild(totalSpan);
            
            id('visualAd').appendChild(div);
        }
        window.onload = function() {
            createPreview();
            createControl();
            adInit();
            autoSlide();
            controlIcon();
        }
    </script>
</head>
<body>
    <div id="visualAd">
        <!--
        <div id="preview" title="http://www.taobao.com">
            <div><img src="images/01.jpg" alt="" /></div>
            <div id="info"></div>
            <div id="msg">
                <p><strong>热浪球爱战</strong></p>
                <p>“妩媚风骚”潘金莲！百变风格甘婷婷再次化身绝美女特务，与董勇心理极限！</p>
                <div id="playIcon"></div>
            </div>
        </div>
        -->
        <ul>
            <li>
                <a href="http://www.taobao.com" class="on">
                    <img src="images/01.jpg" alt="热浪球爱战" />
                    <strong title="“妩媚风骚”潘金莲！百变风格甘婷婷再次化身绝美女特务，与心理极限">热浪球爱战</strong>
                    <span>周秀哪/Jessica C</span>
                </a>
            </li>
            <li>
                <a href="http://www.qq.com">
                    <img src="images/02.jpg" alt="热浪球爱战" />
                    <strong title="“次化身绝美女特务心理极限妩媚风骚”潘金莲！董勇挑战百变风格甘婷婷再">[专题]秋季美国新剧推荐</strong>
                    <span>最最期待TOP10</span>
                </a>
            </li>
            <li>
                <a href="http://www.sina.com">
                    <img src="images/03.jpg" alt="热浪球爱战" />
                    <strong title="“变风格甘婷婷再妩媚风骚”潘金莲！百次化身绝美，与董勇挑战心特务">新还珠格格</strong>
                    <span>李晟/Jessica C</span>
                </a>
            </li>
            <li>
                <a href="http://www.cctv.com">
                    <img src="images/04.jpg" alt="热浪球爱战" />
                    <strong title="“变风格甘务，与董勇婷婷再次化身绝美女特挑战心理极">间谍明月</strong>
                    <span>韩艺瑟/Eric</span>
                </a>
            </li>
            <li>
                <a href="http://www.sohu.com.cn">
                    <img src="images/05.jpg" alt="热浪球爱战" />
                    <strong title="“婷再次化身绝美女特务，与董勇挑战心理">螳螂</strong>
                    <span>甘婷婷/董勇</span>
                </a>
            </li>
            <li>
                <a href="http://www.baidu.com">
                    <img src="images/06.jpg" alt="热浪球爱战" />
                    <strong title="“骚”潘金莲！百变风格甘婷婷再次化身绝美">国色天香</strong>
                    <span>叶璃/何晟铭</span>
                </a>
            </li>
        </ul>
        <!--
        <div id="controlIcon">
            <span class="left" id="controlLeft" title="停止之后才能单击"></span>
            <span class="_on" id="contriolStatus" title="停止循环播放"></span>
            <span class="right" id="controlRight" title="停止之后才能单击"></span>
            <span id="curIndex">1</span><span>/</span><span class="total">6</span>
        </div>
        -->
    </div>
    <div id="test"></div>
</body>
</html>
空道仙
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js自动循环显示广告

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{font-size:100%;} ol,ul{list-style:none;} ad
复制链接

扫一扫