提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery 写的幻灯左右切换插件

jQuery插件 切换 左右
2023-09-27 14:22:24 时间 
<html>
<head>
<meta charset="utf-8">
<title>官网</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
    jQuery(function($){
           var len  = $(".bzsg_ad .num > li").length,
                  scrolllen  = $(".bzsg_flash_ad_class .slider > li").length,
               index = 0,
                  intindex = 0,    
                  initadTimer,
               adTimer;
           $(".bzsg_ad .num li").mouseover(function(){
               index  =   $(".bzsg_ad .num li").index(this);
              scrollTopShowImg(index);
           }).eq(0).mouseover(); 
           //滑入 停止动画，滑出开始动画.
           $('.bzsg_middle_top_right .bzsg_ad').hover(function(){
                clearInterval(adTimer);
           },function(){
           adTimer = setInterval(function(){
                scrollTopShowImg(index)
                index++;
                if(index==len){index=0;}
             } , 2000);
          }).trigger("mouseleave");

           
           //上一页
           $(".bzsg_prv_pic").click(function(){
                   scrollLeftShowimg(intindex);
                   intindex++;                   
                   if(intindex==scrolllen){intindex=0;}
                   clearInterval(initadTimer);
           }).click();//下一页
           $(".bzsg_next_pic").click(function(){
                   scrollLeftShowimg(intindex);
                   intindex--;
                   if(intindex<0){intindex=scrolllen-1;}
                   clearInterval(initadTimer);
           });
           $(".bzsg_prv_pic").hover(function(){},function(){$('.bzsg_flash_ad_class .slider').trigger("mouseleave");});
           $(".bzsg_next_pic").hover(function(){},function(){$('.bzsg_flash_ad_class .slider').trigger("mouseleave");});
           $('.bzsg_flash_ad_class .slider').hover(function(){
                    clearInterval(initadTimer);
                   },function(){
                   initadTimer = setInterval(function(){
                        scrollLeftShowimg(intindex)
                        intindex++;
                        if(intindex==len){intindex=0;}
                     } , 2000);
          }).trigger("mouseleave");
    });
    function scrollTopShowImg(index){
       var adHeight = jQuery(".bzsg_middle_top_right .bzsg_ad").height();
       jQuery(".bzsg_ad .slider").stop(true,false).animate({bottom : -adHeight*index},1000);
       jQuery(".bzsg_ad .num li").removeClass("on").eq(index).addClass("on");
    }
    function scrollLeftShowimg(index){
        var adWidth = $(".bzsg_flash_ad .bzsg_flash_ad_class").width();
         $(".bzsg_flash_ad_class .slider").stop(true,false).animate({left : -adWidth*index},1000);
    }
</script>
</head>
<body>
<div class="bzsg_header">    
    <div class="bzsg_top_header bzsg_black">
        <div class="nav">
            <a href="">首&nbsp;&nbsp;&nbsp;&nbsp;页</a>
            <a href="">新闻活动</a>
            <a href="">个人中心</a>
            <a href="">客服帮助</a>
            <a href="">论&nbsp;&nbsp;&nbsp;&nbsp;坛</a>
        </div>
        <ul>
            <li><a href="">公告</a><a href="">活动</a><a href="">新闻</a></li>
            <li><a href="">登陆</a><a href="">注册</a></li>
            <li><a href="">提交问题</a><a href="">联系我们</a></li>
        </ul>
    </div>
</div>
<!--幻灯-->
<div class="bzsg_middle_top bzsg_black">
    <div class="bzsg_middle_top_left">
        <a href=""><img src="images/qiu.png" /></a>
    </div>
    <div class="bzsg_middle_top_right">
        <div class="bzsg_middle_nav">
            <a href="">官网首页</a>
            <a href="">新闻公告</a>
            <a href="">游戏资料</a>
            <a href="">官方论坛</a>
        </div>
          <div class="bzsg_ad" >
            <ul class="slider" >
            <li ><a href="#"><img src="images/ad1.jpg"  /></a></li>
            <li ><a href="#"><img src="images/ad2.jpg"  /></a></li>
            <li ><a href="#"><img src="images/ad3.jpg"  /></a></li>
            <li ><a href="#"><img src="images/ad4.jpg"  /></a></li>
            </ul>
            <ul class="num" >
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
            </ul>
          </div>
    </div>
</div>
<!--幻灯-->
<!--content-->
<div class="bzsg_middle bzsg_black">
    <div class="bzsg_middle_left">
        <!--download start-->
        <div class="bzsg_middle_left_download">
            <a href="" ><img src="images/ios_button.jpg" /></a>
            <a href="" ><img src="images/android_button.jpg" /></a>
            <a href="" ><img src="images/91_button.jpg" /></a>
        </div>
        <!--download end-->
        <div class="bzsg_middle_left_recommend">
            <div class="bzsg_middle_left_recommend_title">推荐服务器</div>
            <div class="bzsg_middle_left_recommend_content">霸主三国&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font color="#2af029">新</font></div>
            <div class="bzsg_middle_left_recommend_footer"></div>
        </div>

        <!--antietion end-->
        <div class="bzsg_middle_left_recommend">
            <div class="bzsg_middle_left_recommend_title">关注我们</div>
            <div class="bzsg_middle_left_recommend_content"><img src="images/icon.jpg">霸主三国&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font color="#2af029">新</font></div>
            <div class="bzsg_middle_left_recommend_content"><img src="images/icon.jpg">霸主三国&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font color="#2af029">新</font></div>
            <div class="bzsg_middle_left_recommend_footer"></div>
        </div>
        <div class="bzsg_middle_left_button">
            <img src="images/bzsg_mm.png">
            <p>全球首款美式卡牌手游《霸主三国》，精美的画面，独特的玩法，让你在游戏中拥有无比的惊喜感，刺激感和快感！
《霸主三国》是赤月科技耗时一年，投资五百万，精心打造的一款卡牌手游大作；游戏引入了全新的神卡玩法和皇权争夺，并且用美式的卡牌画风为玩家呈现出一个全新的三国；玩家在游戏中通过收集武将和装备提升战斗力，并且可以对卡牌和装备进行深度培养；游戏中提供了丰富的PVP和PVE功能让玩家获得成长感，惊喜感和荣誉感！</p>    
        </div>


    </div>
    <div class="bzsg_middle_right">
        <div class="bzsg_middle_right_top">
            <div class="bzsg_middle_right_top_title">
                <a href="">全&nbsp;&nbsp;&nbsp;&nbsp;部</a>                
                <a href="">公&nbsp;&nbsp;&nbsp;&nbsp;告</a>                
                <a href="">新&nbsp;&nbsp;&nbsp;&nbsp;闻</a>                
                <a href="">活&nbsp;&nbsp;&nbsp;&nbsp;动</a>
                <a href="" class="more">更多+</a>                
            </div>
            <ul>
                <li><span class="bzsg_notices">公告</span><span class="bzsg_title">西门子提供面向未来的,创新和高效的 能源解决方案,以满足未来的能源之需</span><span class="bzsg_date">2013-08-26</span></li>
                <li><span class="bzsg_notices">公告</span><span class="bzsg_title">西门子提供面向未来的,创新和高效的 能源解决方案,以满足未来的能源之需</span><span class="bzsg_date">2013-08-26</span></li>
                <li><span class="bzsg_notices">公告</span><span class="bzsg_title">西门子提供面向未来的,创新和高效的 能源解决方案,以满足未来的能源之需</span><span class="bzsg_date">2013-08-26</span></li>
                <li><span class="bzsg_notices">公告</span><span class="bzsg_title">西门子提供面向未来的,创新和高效的 能源解决方案,以满足未来的能源之需</span><span class="bzsg_date">2013-08-26</span></li>
                <li><span class="bzsg_notices">公告</span><span class="bzsg_title">西门子提供面向未来的,创新和高效的 能源解决方案,以满足未来的能源之需</span><span class="bzsg_date">2013-08-26</span></li>
                <li><span class="bzsg_notices">公告</span><span class="bzsg_title">西门子提供面向未来的,创新和高效的 能源解决方案,以满足未来的能源之需</span><span class="bzsg_date">2013-08-26</span></li>
                <li><span class="bzsg_notices">公告</span><span class="bzsg_title">西门子提供面向未来的,创新和高效的 能源解决方案,以满足未来的能源之需</span><span class="bzsg_date">2013-08-26</span></li>

            </ul>
            <div class="bzsg_middle_right_top_title_right"><a href=""><img src="images/new_acitve_download.png" /></a></div>
        </div>
        <div class="bzsg_middle_right_slider">
            <div class="bzsg_middle_right_slider_title"></div>
            <div class="bzsg_flash" >
                <div class="bzsg_flash_ad" >
                    <div class="bzsg_flash_ad_class" >
                        <ul class="slider" >
                            <li ><a href="#"><img src="images/init1.jpg" /></a></li>
                            <li ><a href="#"><img src="images/init2.jpg" /></a></li>
                            <li ><a href="#"><img src="images/init3.jpg" /></a></li>
                            <li ><a href="#"><img src="images/init4.jpg" /></a></li>
                        </ul>
                    </div>
                    <a href="javascript:void(0);" class="bzsg_prv_pic"><img src="images/prv_left.png"></a>
                    <a href="javascript:void(0);" class="bzsg_next_pic"><img src="images/next_right.png"></a>    
              </div>
              
              <div class="bzsg_flash_right">
                      <a href="">游戏原画</a>
                      <a href="">游戏截图</a>
                    <a href="">游戏视频</a>
              </div>

            </div>
        </div>

        <div class="bzsg_middle_right_gonglu">
            <div class="bzsg_middle_right_top_title">
                <a href="">攻&nbsp;&nbsp;&nbsp;&nbsp;略</a>    
                <a href="" class="more">更多+</a>            
            </div>
            <ul>
                <li><span class="bzsg_gongnv_title">如果您的计算机或网络受到防火墙或者代理服务器的保护，请确认 Firefox 已被授权访问网络</span><span class="bzsg_date">2013-08-26</span></li>
                <li><span class="bzsg_gongnv_title">如果您的计算机或网络受到防火墙或者代理服务器的保护，请确认 Firefox 已被授权访问网络</span><span class="bzsg_date">2013-08-26</span></li>
                <li><span class="bzsg_gongnv_title">如果您的计算机或网络受到防火墙或者代理服务器的保护，请确认 Firefox 已被授权访问网络</span><span class="bzsg_date">2013-08-26</span></li>
                <li><span class="bzsg_gongnv_title">如果您的计算机或网络受到防火墙或者代理服务器的保护，请确认 Firefox 已被授权访问网络</span><span class="bzsg_date">2013-08-26</span></li>
                <li><span class="bzsg_gongnv_title">如果您的计算机或网络受到防火墙或者代理服务器的保护，请确认 Firefox 已被授权访问网络</span><span class="bzsg_date">2013-08-26</span></li>
            </ul>
        </div>
        <div class="bzsg_middle_right_bbs">
            <div class="bzsg_middle_right_top_title">
                <a href="">论&nbsp;&nbsp;&nbsp;&nbsp;坛</a>    
                <a href="" class="more">更多+</a>
            </div>
            <ul>
                <li>
                    <div class="bzsg_middle_right_bbs_image_left"><img src="images/bbs_image.jpg" /> </div>
                    <div class="bzsg_middle_right_bbs_image_right">
                        <h1><a href="">谁是三国第一美女~~~，快来评选</a></h1><span>2013-8-26</span>
                        <p> 【活动内容】：玩家在活动期间关注并转发官方指定微博内容，转发同时注明自己的游戏角色名，并且@三位好友和霸主三国，如：霸主三国真的太好玩了@张三@李四@王五@霸主三国，我的角色名：高富帅；玩家的角色将获得2000元宝，一个角色只可获得一次。
【新浪官方微博】：http://weibo.com/u/3511750520 
</p>
                    </div>
                </li>

            </ul>    


            <div class="bzsg_middle_right_bbs_buttton"></div>
        </div>


    </div>
</div>
<div class="bzsg_footer_top bzsg_black"></div>
<!--content-->

<div class="bzsg_footer"></div>

</body>
</html>
@charset "utf-8";
/* CSS Document */
body,div,p,ul,ol,li,li,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td{padding:0; margin:0; font-size:12px; font-family:Verdana, Geneva, sans-serif; color:#000;}
h2{ font-family:"微软雅黑";}
table{boder-collapse:collapse; border-spacing:0;}
img{border:0;}
ol,ul,dl{list-style:none;}
h1,h2,h3,h4,h5,h6{font-weight:normal; font-size:100%;}
input,select,label{vertical-align:middle;}
a{text-decoration:none; color:#666;}
.clear{clear:both;}
body{
    background:url(../images/bg.jpg) no-repeat #000 center 87px;
    width:1653px;
    margin: 0 auto;
}
.bzsg_black{
    margin: 0 auto;
    width:1100px;
    clear:both;
}
.bzsg_header{
    background:url(../images/topbzsg.jpg) repeat-x  center top;
    height:435px;
}
.bzsg_top_header{
    height:88px;
}
.nav{
    height:88px;
    width:700px;
    margin-left:47px;
}
.bzsg_top_header .nav a{
    font-size: 16px;
    font-weight: bold;
    display: block;
    float:left;
    color:#cd622e;
    width:95px;
    height:20px;
    text-align: center;
    padding: 6px 0px;
    margin:25px 20px 0 14px; 
}
.bzsg_top_header .nav a:hover {
    color: #ffde7f;
    border:solid 2px #b0471a;
}

.bzsg_top_header ul{
    margin: 0 0 0 172px;
}
.bzsg_top_header ul li{
    width:128px;
    float: left;
    text-align: center;
}
.bzsg_top_header ul li a{
    clear: both;
    display: block;
    margin: 10px 0;
    color:#d7bb68;
    font-size: 14px;
    font-weight: bold;
}
.bzsg_top_header ul li a:hover{
    color:#ffffba;
}
.bzsg_middle_top{
    position: relative;
    background: url(../images/middle_top.jpg) no-repeat center 50px;
    height: 411px;    
}
.bzsg_middle_top_left{
    position: absolute;
    top:171px;
    left:18px;
}
.bzsg_middle_top_right{
    position: absolute;
    left:235px;
    top:0px;
    background: url(../images/sider_nav.png) no-repeat;
    height: 411px;    
/*    margin-left: 235px; */
    margin: 0 auto;
    width: 932px;
}
.bzsg_middle_nav{
    width:761px;
    height: 41px;
    padding: 60px 0 0 106px;
}
.bzsg_middle_nav a{
    width:176px;
    height:41px; 
    margin: 0 5px 0 0;
    display: block;
    line-height: 41px;
    text-align: center;
    float: left;
    color: #fff;
    font-size: 16px;
    font-weight: bolder;
}
.bzsg_middle_nav a:hover{
    background: url(../images/nav_bg.jpg) no-repeat;
}

.bzsg_middle{
    background:url(../images/middle_bg.jpg) repeat-y  center top;    
    height: 1000px;
    clear:both;
}
.bzsg_middle_left{
/*
    background: #f00;
*/
    width:230px;
    height: 1000px;
    float: left;
    margin: 0 0 0 43px;
}
.bzsg_middle_right{
    width:790px;/*827*/
    height: 1000px;
    margin: 0 0 0 37px;
    float: right;
}
.bzsg_footer_top{
    height: 233px;
    background: url(../images/fttop.jpg) no-repeat center top;
}
.bzsg_footer{
    height: 171px;
    background: url(../images/ftbg.jpg) no-repeat center top;
}
.bzsg_middle_right_top{
    width: 780px;
    height:258px ;
    clear: both;
    margin: 3px 0 0 0 ;
    background: url(../images/right_top_bg.png) repeat-y ;        
}
.bzsg_middle_right_top_title{
    height:35px;
    width: 724px;    
    clear:both;
    padding: 0 0 0 56px;
    background: url(../images/right_top_title_bg.png) no-repeat center top;
}
.bzsg_middle_right_slider_title{
    height: 37px;
    width: 780px;
    background: url(../images/slider_top_titile_bg.png) no-repeat center top;
}
.bzsg_middle_right_slider{
    width: 780px;
    height:354px ;
    background: url(../images/right_top_bg.png) repeat-y ;        
}
.bzsg_middle_right_gonglu{
    height: 193px;
    width: 780px;
    background: url(../images/right_top_bg.png) repeat-y ;    
}
.bzsg_middle_right_bbs{
    /*
    height: 402px;
    */
    width: 780px;
    background: url(../images/right_top_bg.png) repeat-y ;        
}
.bzsg_middle_left_download{
    margin:34px auto auto;
    text-align: center;
    padding: 40px 0 0 ;
    width: 231px;
    height: 241px;
    background: url(../images/download_button_bg.jpg) no-repeat;
}
.bzsg_middle_left_recommend{

    width: 215px;
    margin: 10px auto;
    background: url(../images/recommend_midle_bg.jpg) no-repeat;
}
.bzsg_middle_left_recommend_title{
    height: 32px;
    padding:6px 0 0 16px;
    color:#fff;
    font-size: 14px;
    font-weight: bold;
    background: url(../images/recommend_top_bg.jpg) no-repeat;
}
.bzsg_middle_left_recommend_content{
    width: 215px;
    height: 40px;
    color:#fcf173;
    padding: 0px 0 0 20px;
    background: url(../images/recommend_midle_bg.jpg) repeat-y;    
}
.bzsg_middle_left_recommend_footer{
    width: 215px;
    height: 36px;
    background: url(../images/recommend_footer_bg.jpg) no-repeat;    
}
.bzsg_middle_left_button{
    text-align: center;
    margin: 0 auto;
}
.bzsg_middle_left_download a{
    display: block;
    margin: 0 0 10px 0;
}
.bzsg_middle_right_top_title a{
    float: left;
    display: block;
    width:132px ;
    height: 29px;
    color: #fff8c1;
    font-weight: bolder;
    font-size: 16px;
    line-height: 29px;
    margin: -3px 20px 0 0;
    text-align: center;
    background: url('../images/nav_button_bg2.png') no-repeat;
}
.bzsg_middle_right_top_title a:hover{
    background: url('../images/nav_button_bg.png') no-repeat;
}
a.more{
    float: right;
    background: none;
    color: red;
    margin: 0;
    padding-right: 30px;
    line-height: 20px;
    width: 50px;
    font-size: 12px;
}
a:hover.more{
    background: none;
}
.bzsg_middle_right_top ul{
    width: 536px;
    height: 223px;
    float: left;
}
.bzsg_middle_right_top ul li{
    height: 25px;
    margin:5px 0 0 10px;
    line-height: 25px;
}
.bzsg_middle_right_top ul li span{
    display: block;
    float: left;
    height: 25px;
}
.bzsg_middle_right_gonglu ul{
    width: 724px;
    height: 158px;
    float: left;
}
.bzsg_middle_right_gonglu ul li{
    height: 25px;
    margin:5px 0 0 10px;
    line-height: 25px;
}
.bzsg_middle_right_gonglu ul li span{
    display: block;
    float: left;
    height: 25px;
}
.bzsg_middle_right_gonglu ul li .bzsg_date{
    width:80px;
    text-align: right;
    color:#dad488;

}
.bzsg_middle_right_gonglu ul li .bzsg_gongnv_title{
    width:634px;
    color:#dad488;
}



.bzsg_middle_right_top ul li .bzsg_notices{
    width: 35px;
    text-align: center;
    background:#277ea9;
    color: #62e1ea;
}
.bzsg_middle_right_top ul li .bzsg_title{
    width:400px;
    color:#dad488;
    margin: 0 0 0 11px;
    overflow: hidden;

}
.bzsg_middle_right_top ul li .bzsg_date{
    width:80px;
    text-align: right;
    color:#dad488;

}
.bzsg_middle_right_top_title_right{
    padding: 37px 0 0 0 ;
    width:224px;
    float: right;
    line-height: 223px;
}    
.bzsg_middle_right_bbs_buttton{
    width:780px;
    height: 29px;
    background: url(../images/bzsg_middle_right_bbs_buttton_bg.png) no-repeat;
}
.bzsg_middle_right_bbs ul{
    width:704px;
    margin: 5px 0 0 10px;
}
.bzsg_middle_right_bbs ul li{
    width: 760px;
    height: 112px;
    background: url(../images/bbs_font_bg2.jpg) repeat-x;
}
.bzsg_middle_right_bbs_image_left{
    width:105px;
    height: 112px;
    float: left;
    padding: 12px 0 0 10px;
    background: url(../images/bbs_font_bg.jpg) no-repeat;
}
.bzsg_middle_right_bbs_image_right{
    width:635px;
    margin: 10px 0 0 10px;
    float: right;
}
.bzsg_middle_right_bbs_image_right h1{
    float: left;
}
.bzsg_middle_right_bbs_image_right h1 a{
    color: #fff;    
    font-size: 18px;
    font-weight: bolder;

}
.bzsg_middle_right_bbs_image_right span{
    width:190px;
    float: right;
    color: #03cc2e;
}
.bzsg_middle_right_bbs_image_right p{
    clear: both;
    line-height: 25px;
    color:#4acbea;
}
.bzsg_ad{
    width:667px;
    height: 229px;
    overflow: hidden;
    position:relative;
    left:75px;
}
.bzsg_ad .slider,.bzsg_ad .num{
     position:absolute;
}
.bzsg_flash{
    clear: both;
    position: relative;
}
.bzsg_flash_ad{
   height:257px;
   width:625px;
   float: left;

    background: url(../images/right-line.jpg) center right no-repeat;
}
.bzsg_flash_ad_class{
   position: relative;
   width:542px;
   height: 288px;
   border: 2px solid #a52d1c;
   overflow: hidden;
   left:37px;    
}
.bzsg_flash_right{
    width: 155px;
    float: right;
    margin: 30px auto;

}
.bzsg_flash_right a{
    margin: 0 auto;
    text-align: center;
    display: block;
    width: 136px;
    height: 57px;
    line-height: 57px;
    color: #66d7e9;
    font-weight: bolder;
    font-size: 16px;
    background: url(../images/int_button_bg.jpg) no-repeat;

}
.bzsg_flash_right a:hover{
    background: url(../images/int_button_bg1.jpg) no-repeat;    
}
.bzsg_flash_ad_class .slider{
    width:2168px;
    height:288px ;
    position: relative;
}
.bzsg_flash_ad_class .slider li{
    float: left;
    width: 542;
}
.bzsg_prv_pic,.bzsg_next_pic{
    position: absolute;
    top:128px;
}
.bzsg_prv_pic{
    left: 5px;
}
.bzsg_next_pic{
    left: 588px;
}

 

相关文章