JavaScript实现网站首页动态效果

最新推荐文章于 2025-11-26 15:16:07 发布

原创

最新推荐文章于 2025-11-26 15:16:07 发布 · 3.1k 阅读

本文介绍了如何使用JavaScript创建一个动态首页，包括轮播图、遮罩弹框、广告栏定时消失和消息自动循环播放等功能。广告栏通过改变上边距实现10秒后消失，点击“青海”弹出地区选择，轮播图支持鼠标交互，标题栏滑过切换右侧内容，消息栏自动播放。

使用JS做一个首页，主要效果有轮播，遮罩弹框，广告栏定时消失，消息自动循环播放等。

广告栏设置10s定时消失，主要思路是修改其上边距，设置一个定时器，1s运行一次，10s后将其上移到屏幕外并移除

主要js代码：

var adTop = document.getElementById('advTop');
    var adTopEm = adTop.getElementsByTagName('em')[0];
    var ad_i = adTop.getElementsByTagName('i')[0];
    function adTime(num) {
        num--;
        adTopEm.innerHTML= num;
        if(num==0) {
            ad_0(0);
            return;
        }
        return setTimeout(function () {adTime(num)},1000);
    }
    //广告栏自动消失
    function ad_0(height) {
        height+=5;
        if(height<=130){
            adTop.style.marginTop=-height+"px";
            return setTimeout(function () {
                ad_0(height)},30);
        }else{
            adTop.parentNode.removeChild(adTop);
        }
    }
    //广告栏点击叉消失
    ad_i.onclick=function () {
        ad_0(0);
    }
    adTime(10);

点击“青海”可以弹出地区选框，选中地区将会显示

在这里插入图片描述
主要js代码

    /*城市切换样式*/
    var cityAll = document.getElementById('cityAll');
    var cityUL = cityAll.getElementsByTagName('ul');
    var cityLI = cityUL[1].getElementsByTagName('li');
    var city_x = document.getElementById('city_x');
    var select_city = document.getElementById('select_city');
    /*找到对应的ul城市列表，显示对应的一个，其他影藏*/
    for(var i=0;i<cityLI.length;i++){
        cityLI[i].onclick=(function (j) {  /*闭包,j就是当前li的位置*/
            return function () {
                if(cityLI.className=='area_cur'){
                    return; //直接跳出
                }
                var newNum=j,oldNum
                for(var k=0;k<cityLI.length;k++){

标签