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-轮播的主要内容,如果未能解决你的问题,请参考以下文章