zoukankan      html  css  js  c++  java
  • 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);//移动
        });
    });
  • 相关阅读:
    使用kendynet构建异步redis访问服务
    使用kendynet编写网关服务
    作为前端,我为什么选择 Angular 2?
    你必须知道的Javascript 系列
    JS日期(Date)处理函数总结
    JS数组(Array)处理函数总结
    消息推送之APNS
    消息推送之GCM
    Linux常用命令大全
    Sequential Container
  • 原文地址:https://www.cnblogs.com/akiyama/p/10485165.html
Copyright © 2011-2022 走看看