我爱模板网 > 特效插件 > 滚动轮播 >  文字和图片动态切换的炫酷的jQuery图片幻灯插件正文

文字和图片动态切换的炫酷的jQuery图片幻灯插件

特效介绍
jQuery宽屏图片幻灯插件

    文字和图片动态切换的炫酷的jQuery宽屏图片幻灯插件,带左右箭头和控制点,当切换时,文字会线滚动到边缘,然后图片再滚动。仿腾讯官方,效果非常炫酷。
使用方法
1、在头部引入下面的代码:
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
.prove_index,.next_index{background:url(images/btn00.png);top:50%;height:47px;width:44px;position:absolute;margin-top:-23px;z-index:999;cursor:pointer}
.prove_index{left:20px;background-position:44px 0;display:none;}
.next_index{right:20px;background-position:0px 47px;display:none;}
.prove_index:hover{background:url(images/btn00.png);background-position:0px 0px;}
.next_index:hover{background:url(images/btn00.png);background-position:44px 47px;}
#kfbtn{background:url(images/top_64.png);background-position:0 0;height:31px;}
#dzbtn{background:url(images/top_34.png);background-position:0 0;height:31px;}
#ylbtn{background:url(images/top_54.png);background-position:0 0;height:31px;}
#jgbtn{background:url(images/top_14.png);background-position:0 0;height:31px;}
#mzbtn{background:url(images/top_24.png);background-position:0 0;height:31px;}
#qjbtn{background:url(images/top_44.png);background-position:0 0;height:31px;}
#kfbtn:hover,#dzbtn:hover,#ylbtn:hover,#jgbtn:hover,#mzbtn:hover,#qjbtn:hover{background-position:0 31px;}
</style>
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/slide.js"></script> 
2、在您的页面的body引入下面的代码:
<div class="banner">
    <div class="banner_container">
        <div class="banner_content">
            <div style="background-image:url(images/top_07.jpg);">
                <a href="http://www.5imoban.net/" id="wel_one" class="banner_link_one" style="left:156px;top:155px;"><img src="images/top_71.png"  /></a>
                <a href="http://www.5imoban.net/" id="wel_two" class="banner_link_two" style="left:156px;top:220px;"><img src="images/top_72.png"  /></a>
                <a href="http://www.5imoban.net/" id="wel_three" class="banner_link_three" style="left:156px;top:302px;"><img src="images/top_73.png"  /></a>
                <a href="http://www.5imoban.net/" id="wel_four" class="banner_link_three" style="left:156px;top:325px;"><img src="images/top_74.png"  /></a>
            </div>
        </div>
        <div class="banner_content">
            <div style="background-image:url(images/top_06.jpg);">
                <a href="http://www.5imoban.net/" id="kf_one" class="banner_link_one" style="left:357px;top:137px;"><img src="images/top_61.png"  /></a>
                <a href="http://www.5imoban.net/" id="kf_two" class="banner_link_two" style="left:357px;top:192px;"><img src="images/top_62.png"  /></a>
                <a href="http://www.5imoban.net/" id="kf_three" class="banner_link_three" style="left:357px;top:240px;"><img src="images/top_63.png"  /></a>
                <a href="http://www.5imoban.net/" id="kfbtn" class="banner_link_four png" style="left:357px;top:370px;width:559px"></a>
            </div>
        </div>
        <div class="banner_content">
            <div style="background-image:url(images/top_03.jpg);">
                <a href="http://www.5imoban.net/" id="dz_one" class="banner_link_one" style="left:490px;top:133px;"><img src="images/top_31.png" /></a>
                <a href="http://www.5imoban.net/" id="dz_two" class="banner_link_two" style="left:490px;top:227px;"><img src="images/top_32.png" /></a>
                <a href="http://www.5imoban.net/" id="dz_three" class="banner_link_three" style="left:461px;top:266px;"><img src="images/top_33.png" /></a>
                <a href="http://www.5imoban.net/" id="dzbtn" class="banner_link_four png" style="left:461px;top:417px;width:267px"></a>
            </div>
        </div>    
        <div class="banner_content">
            <div style="background-image:url(images/top_05.jpg);">
                <a href="http://www.5imoban.net/" id="yl_one" class="banner_link_one" style="left:590px;top:122px;"><img src="images/top_51.png"  /></a>
                <a href="http://www.5imoban.net/" id="yl_two" class="banner_link_two" style="left:590px;top:211px;"><img src="images/top_52.png"  /></a>
                <a href="http://www.5imoban.net/" id="yl_three" class="banner_link_three" style="left:590px;top:252px;"><img src="images/top_53.png"  /></a>
                <a href="http://www.5imoban.net/" id="ylbtn" class="banner_link_four png" style="left:590px;top:371px;width:294px"></a>
            </div>
        </div>    
        <div class="banner_content">
            <div style="background-image:url(images/top_01.jpg);">
                <a href="http://www.5imoban.net/" id="jg_one" class="banner_link_one" style="left:497px;top:165px;"><img src="images/top_11.png" class="png"/></a>
                <a href="http://www.5imoban.net/" id="jg_two" class="banner_link_two" style="left:497px;top:254px;"><img src="images/top_12.png" class="png"/></a>
                <a href="http://www.5imoban.net/" id="jg_three" class="banner_link_three" style="left:497px;top:296px;"><img src="images/top_13.png" class="png"/></a>                <a href="http://www.5imoban.net/" id="jgbtn" class="banner_link_four png" style="left:497px;top:404px;width:480px"></a>
            </div>
        </div>            
        <ul class="banner_nav">
            <li class="current"><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
        </ul>        
        <a class="prove_index" style="display:inline;"></a>
        <a class="next_index" style="display:inline;"></a>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(e) {    
    $("#wel_one").animate({left:"453px"},1400,"swing");
    $("#wel_two").animate({left:"453px"},1200,"swing");
    $("#wel_three").animate({left:"453px"},1000,"swing");
    $("#wel_four").animate({left:"453px"},800,"swing");    
    var url = window.location.href //获取当前URL
    if(url.indexOf("?") > 0 ) {var cutUrl = url.split("?");//用“?”将URL分割成2部分
                var par =  cutUrl[1];
                var idParCut = par.split("=");
                var tid = idParCut[1];
                var pageid =tid-1;
                if(pageid == 1){
                    $("#kf_one").animate({left:"657px"},1400,"swing");
                    $("#kf_two").animate({left:"657px"},1200,"swing");
                    $("#kf_three").animate({left:"657px"},1000,"swing");
                    $("#kfbtn").animate({left:"657px"},800,"swing");
                }
                if(pageid == 2){
                    $("#dz_one").animate({left:"210px"},1400,"swing");
                    $("#dz_two").animate({left:"210px"},1200,"swing");
                    $("#dz_three").animate({left:"210px"},1000,"swing");
                    $("#dzbtn").animate({left:"210px"},800,"swing");
                }
                if(pageid == 3){
                    $("#yl_one").animate({left:"890px"},1400,"swing");
                    $("#yl_two").animate({left:"890px"},1200,"swing");
                    $("#yl_three").animate({left:"890px"},1000,"swing");
                    $("#ylbtn").animate({left:"890px"},800,"swing");
                }
                if(pageid == 4){
                    $("#jg_one").animate({left:"220px"},1400,"swing");
                    $("#jg_two").animate({left:"220px"},1200,"swing");
                    $("#jg_three").animate({left:"220px"},1000,"swing");
                    $("#jgbtn").animate({left:"220px"},800,"swing");
                }
    }    
        $f.create($f.slide,{parent:'.banner_container',target:'.banner_content',nav:'.banner_nav li',start:pageid,easing:'easeInOutExpo',duration:1000,time:20000,auto:true,dir:0,current:'current'});
        var pos = {
            0:453,1:657,2:210,3:890,4:220
        },offset = 600,time_one=1400,time_two=1200,time_three=1000,time_four=800;
        $('.banner_content').each(function(index, element) {
            $(this).bind('slideInPos',function(){
                $(this).find('.banner_link_one').stop().css({left:pos[index]-offset}).animate({left:pos[index]},time_one,'swing');
                $(this).find('.banner_link_two').stop().css({left:pos[index]-offset}).animate({left:pos[index]},time_two,'swing');
                $(this).find('.banner_link_three').stop().css({left:pos[index]-offset}).animate({left:pos[index]},time_three,'swing');
                $(this).find('.banner_link_four').stop().css({left:pos[index]-offset}).animate({left:pos[index]},time_four,'swing');
            }).bind('slideInNeg',function(){
                $(this).find('.banner_link_one').stop().css({left:pos[index]+offset}).animate({left:pos[index]},time_one,'swing');
                $(this).find('.banner_link_two').stop().css({left:pos[index]+offset}).animate({left:pos[index]},time_two,'swing');
                $(this).find('.banner_link_three').stop().css({left:pos[index]+offset}).animate({left:pos[index]},time_three,'swing');
                $(this).find('.banner_link_four').stop().css({left:pos[index]+offset}).animate({left:pos[index]},time_four,'swing');
            }).bind('slideOutPos',function(){

                $(this).find('.banner_link_one').stop().css({left:pos[index]}).animate({left:pos[index]+offset},time_one,'swing');
                $(this).find('.banner_link_two').stop().css({left:pos[index]}).animate({left:pos[index]+offset},time_two,'swing');
                $(this).find('.banner_link_three').stop().css({left:pos[index]}).animate({left:pos[index]+offset},time_three,'swing');
                $(this).find('.banner_link_four').stop().css({left:pos[index]}).animate({left:pos[index]+offset},time_four,'swing');

            }).bind('slideOutNeg',function(){

                $(this).find('.banner_link_one').stop().css({left:pos[index]}).animate({left:pos[index]-offset},time_one,'swing');
                $(this).find('.banner_link_two').stop().css({left:pos[index]}).animate({left:pos[index]-offset},time_two,'swing');
                $(this).find('.banner_link_three').stop().css({left:pos[index]}).animate({left:pos[index]-offset},time_three,'swing');
                $(this).find('.banner_link_four').stop().css({left:pos[index]}).animate({left:pos[index]-offset},time_four,'swing');

            });

        });    
        
    });
function mouseIn(id){
    $(id).children().stop(true,true).animate({opacity:"1"},400,"easeInOutBounce")
    }
function mouseOut(id){
    $(id).children().stop(true,true).animate({opacity:"0"},400,"easeInOutBounce")
    }

    $(".prove_index").click(function(){
        $(".banner_nav li").eq($(".banner_nav li.current").index()-1).children("a").click();
        });
    $(".next_index   ").click(function(){
        $(".banner_nav li").eq($(".banner_nav li.current").index()+1).children("a").click();
        });
        $(".next_index").click(function(){
        if($(".banner_nav li.current").index()==6){
            $(".banner_nav li").eq(0).children("a").click();
            };
        });
        
        $(".banner_container").mouseover(function(){
             $(".prove_index,.next_index").show()
             });
        $(".banner_container").mouseout(function(){
             $(".prove_index,.next_index").hide()
             });
                
    $(document).ready(function(e) {
    var url = window.location.href //获取当前URL
    if(url.indexOf("?") > 0 ) {
        var cutUrl = url.split("?");//用“?”将URL分割成2部分
        var par =  cutUrl[1];
        var idParCut = par.split("=");
        var tid = idParCut[1];
        if(tid==2){$(".banner_nav li").eq(1).children("a").click()}
        if(tid==3){$(".banner_nav li").eq(2).children("a").click()}
        if(tid==4){$(".banner_nav li").eq(3).children("a").click()}
        if(tid==5){$(".banner_nav li").eq(4).children("a").click()}
        if(tid==6){$(".banner_nav li").eq(5).children("a").click()}
        if(tid==7){$(".banner_nav li").eq(6).children("a").click()}
        else{return false}
    }
    else{
        return false;
    }
});    
</script>



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:myFocus可扩展图片数量的js图片轮播 下一篇:个性弧形控制按钮的js幻灯图片代码
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢