js-轮播

Posted Akiyama

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js-轮播相关的知识,希望对你有一定的参考价值。

// javascript Document

//导航下拉菜单
$(document).ready(function(){
  $(".m_dh,.m_dhen").mouseenter(function(){
    $(".main_dh").addClass("jianbian");//加入白色渐变
    $(".m_dh_list").slideDown();
  });
    $(".main_dh").mouseleave(function(){
    $(".m_dh_list").slideUp("fast");
    $(".main_dh").removeClass("jianbian");//移除白色渐变
  });
});
//官方合作两个轮播切换
$(document).ready(function(){ 
    $(".gh_link").eq(0).addClass("gh_bianse");
    $(".gh_imgs").eq(0).css("display","block");
    $(".gh_imgs").eq(1).css("display","none");
    $(".gh_link").mouseover(function(){
        var m = $(this).index();
        $(".gh_link").removeClass("gh_bianse");
        $(".gh_imgs").css("display","none");
        $(".gh_link").eq(m).addClass("gh_bianse");
        $(".gh_imgs").eq(m).css("display","block");
    });
});
//官方合作轮播
$(document).ready(function(){ 
    var guanfang = setInterval(dsq_move,3000);
    var m = 0;
    $(".gh_yuandian li").eq(0).addClass("yuandian_bianse");//给第一个选项添加选中状态
    function dsq_move(){//定时器移动
        m++;
        if(m >= 6){
            m = 0;
        }
        move();
    }
    //点击选项卡切换
    $(".gh_yuandian li").mouseover(function(){
        m = $(this).index();
        move();
    });
    //移动
    function move(){
            var a = -400*m + "px";
            $(".gh_yuandian li").removeClass("yuandian_bianse");
            $(".gh_yuandian li").eq(m).addClass("yuandian_bianse");
            $(".gh_imgs").css("left",a);
    }
    $(".midlb_1").mouseleave(function(){//鼠标移开添加定时器
        guanfang = setInterval(dsq_move,3000);
    });
    $(".midlb_1").mouseover(function(){//鼠标放上删除定时器
        clearInterval(guanfang);
    });
});

//公告栏点击选项卡切换
$(document).ready(function(){ 
    $(".gonggao_bt_link").eq(0).addClass("gonggao_bt_bianse");
    $(".gglist").click(function(){
        m = $(this).index();
        move();
    });
    //移动
    function move(){
            var a = -400*(m-1) + "px";
            $(".gonggao_bt_link").removeClass("gonggao_bt_bianse");
            $(".gonggao_bt_link").eq(m-1).addClass("gonggao_bt_bianse");
            $(".gonggao_nr_box").css("left",a);
    }
});

//时装栏目
$(document).ready(function(){ 
    $(".shizhuang_imgs img").eq(0).css("display","block");
    $(".sz_bt").eq(0).css("color","#c25521");
    $(".sz_bt").mouseenter(function(){
        m = $(this).index();
        move();
    });
    //移动变色
    function move(){
            $(".sz_bt").css("color","#31333f");
            $(".shizhuang_imgs img").css("display","none");
            $(".sz_bt").eq(m/2).css("color","#c25521");
            $(".shizhuang_imgs img").eq(m/2).css("display","block");
    }
});
//洪门七星切换
$(document).ready(function(){ 
    var m = 0;
    $(".hmmove li").eq(0).addClass("hm_yd_bianse");
    $(".hmmove li").mouseover(function(){
        m = $(this).index();
        move();
    });
    //移动
    function move(){
            var a = -192*m + "px";
            $(".hmmove li").removeClass("hm_yd_bianse");
            $(".hmmove li").eq(m).addClass("hm_yd_bianse");
            $(".hongmen_imgs").css("left",a);
    }
});

//右侧两个切换,上面的
$(document).ready(function(){ 
    var m = 0;
    $(".top_1 li").eq(0).addClass("hm_yd_bianse");
    $(".top_1 li").mouseover(function(){
        m = $(this).index();
        move();
    });
    //移动
    function move(){
            var a = -192*m + "px";
            $(".top_1 li").removeClass("hm_yd_bianse");
            $(".top_1 li").eq(m).addClass("hm_yd_bianse");
            $(".top_imgs").css("left",a);
    }
});
//右侧两个切换,下面的
$(document).ready(function(){ 
    var m = 0;
    $(".top_2 li").eq(0).addClass("hm_yd_bianse");
    $(".top_2 li").mouseover(function(){
        m = $(this).index();
        move();
    });
    //移动
    function move(){
            var a = -192*m + "px";
            $(".top_2 li").removeClass("hm_yd_bianse");
            $(".top_2 li").eq(m).addClass("hm_yd_bianse");
            $(".bot_imgs").css("left",a);
    }
});

//攻略资讯轮播
$(document).ready(function(){ 
    var gl = setInterval(dsq_move,3000);
    var m = 0;
    $(".gl_dh li").eq(0).addClass("gl_dh_bianse");//给第一个选项添加选中状态
    function dsq_move(){//定时器移动
        m++;
        if(m >= 5){
            m = 0;
        }
        move();
    }
    //点击选项卡切换
    $(".gl_dh li").mouseover(function(){
        m = $(this).index();
        move();
    });
    //移动
    function move(){
            var a = -542*m + "px";
            $(".gl_dh li").removeClass("gl_dh_bianse");
            $(".gl_dh li").eq(m).addClass("gl_dh_bianse");
            $(".gl_lunbo").css("left",a);
    }
    $(".gllunbo").mouseleave(function(){//鼠标移开添加定时器
        gl = setInterval(dsq_move,3000);
    });
    $(".gllunbo").mouseover(function(){//鼠标放上删除定时器
        clearInterval(gl);
    });
});

//灵芝圈论坛分页
function lzq(n,m){
    var a = -n + "px";
    $(".nbl_link").css("color","#333b48");
    $(".nbl_link")[m].style.color = "red";
    $(".news_box").stop().animate({
        left:a
    });
}

/*版本更新滚动*/
$(document).ready(function(){
    $(".ver_box").mousemove(function (e) {//获取鼠标在ver_box的位置
            var offset = $(this).offset();
            var xx = e.pageX - offset.left; //获取鼠标的x坐标
            var a = 5.8 * xx; //计算需要移动的距离
            if(a >= 5724){
                a = 5724;
            }
            $(".ver_list").css("left",-a);//移动
    });
});

 

以上是关于js-轮播的主要内容,如果未能解决你的问题,请参考以下文章

js 轮播代码怎么改索引文字大小

HTML轮播图片代码,带解释

js如何制作图片轮播

js如何实现新闻轮播

js原生 JavaScript轮播图渐变淡入淡出效果实现(附代码)

JS 轮播图(无缝连接的轮播图实现,含代码供参考)