轮辐广告、简单选项卡

 

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<body>
    <table>
        <tr>
            <td>
                <img id="img1" src="image/gameTab1.jpg">
            </td>
            <td>
                <img id="img2" src="image/mobileTab2.jpg">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <img id="img3" src="image/mobile.jpg">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <img src="image/fly.jpg">
            </td>
        </tr>
    </table>

</body>
</html>
<script type="text/javascript">
    var img1=document.getElementById("img1");
    var img2=document.getElementById("img2");
    var img3=document.getElementById("img3");

    img2.onclick=function(){
        img1.src="image/gameTab1.jpg";
        img2.src="image/mobileTab2.jpg";
        img3.src="image/mobile.jpg";
    }
    img1.onclick=function(){
        img1.src="image/gameTab2.jpg";
        img2.src="image/mobileTab1.jpg";
        img3.src="image/game.jpg";
    }
</script>

轮辐广告

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    .ad{
        width: 360px;
        height: 190px;
        background-image: url(image/ad-01.jpg);
    }
    .ad div{
        width: 20px;
        height: 20px;
        background-color: #2C61AF;
        color: white;
        float: left;
        position: relative;
        left: 280px;
        top: 170px;
        text-align: center;
        line-height: 20px;
        font-size: 13px;
        cursor: pointer;
    }
    #active{
        background-color: white;
        color: #2C61AF;
    }
</style>
<body>

<div class="ad">
    <div onmouseenter="enterMenu(1)" onmouseleave="playAd()">1</div>
    <div onmouseenter="enterMenu(2)" onmouseleave="playAd()">2</div>
    <div onmouseenter="enterMenu(3)" onmouseleave="playAd()">3</div>
    <div onmouseenter="enterMenu(4)" onmouseleave="playAd()">4</div>
</div>
</body>
</html>
<script type="text/javascript">
    var ad = document.querySelector(".ad");
    //播放图片的索引
    var index = 1;
    //轮播定时器
    var timer;
    /**
     * 轮播广告
     * [playAd description]
     * @return {[type]} [description]
     */
    function playAd(){
        //变更图片
        ad.style.backgroundImage = "url(image/ad-0"+index+".jpg)";

        //高亮呈现对应的图片序号
        var menus = document.querySelectorAll(".ad div");
        for(var i = 0; i < menus.length; i++){
            //判断是否当前正在呈现的图片
            if((i+1) == index){
                //高亮呈现
                menus[i].style.color = "#2C61AF";
                menus[i].style.backgroundColor = "white";
            }
            else{
                //还原默认样式
                menus[i].style.color = "white";
                menus[i].style.backgroundColor = "#2C61AF";
            }
        }

        //修改图片索引
        index++;
        if(index > 4){
            index = 1;
        }
        //开启定时器
        timer = window.setTimeout("playAd()",1000);
    }
    playAd();

    /**
     * 鼠标进入菜单
     * [enterMenu description]
     * @return {[type]} [description]
     */
    function enterMenu(imageIndex){
        //将轮播的定时器暂停
        window.clearTimeout(timer);
        //根据进入的菜单显示对应的广告
        ad.style.backgroundImage = "url(image/ad-0"+imageIndex+".jpg)";
        //高亮呈现菜单
        //高亮呈现对应的图片序号
        var menus = document.querySelectorAll(".ad div");
        for(var i = 0; i < menus.length; i++){
            //判断是否当前正在呈现的图片
            if((i+1) == imageIndex){
                //高亮呈现
                menus[i].style.color = "#2C61AF";
                menus[i].style.backgroundColor = "white";
            }
            else{
                //还原默认样式
                menus[i].style.color = "white";
                menus[i].style.backgroundColor = "#2C61AF";
            }
        }
        //更改图片索引，下次播放时从当前图片位置继续播放
        index = imageIndex;
    }
</script>

 

posted @ 2021-04-20 22:25  小小野生程序员sunny  阅读(26)  评论(0)    收藏  举报