IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

门户网站适用简洁jquery幻灯代码

作者:jqueryba.com  发布日期:2013-10-24 11:07:39
  • 收藏本文    我要投稿
  • 门户网站适用简洁jquery幻灯代码
    HTML结构代码


    <div id="bigbanner">
    		<div id="banners">
        		<div class="banner current" id="banner-1">
         			<a href="http://www.jqueryba.com/" ><img src="images/banner1.jpg"/></a>
         		</div>
        		<div class="banner" id="banner-2">
         			<a href="http://www.jqueryba.com/" ><img src="images/banner2.jpg"/></a>
     
         		</div>
        		<div class="banner" id="banner-3">
            		<a href="http://www.jqueryba.com/" ><img src="images/banner3.jpg"/></a>
        		</div>
        		<div class="banner" id="banner-4">
            		<a href="http://www.jqueryba.com/" ><img src="images/banner4.jpg"/></a>
        		</div>
    		</div>
        	<ul id="controls">
     
            	<li class="active"><a href="#" rel="banner-1"></a></li>
            	<li><a href="#" rel="banner-2"></a></li>
            	<li><a href="#" rel="banner-3"></a></li>
            	<li><a href="#" rel="banner-4"></a></li>
        	</ul>
      	</div>

    导入jquery文件
    js代码


    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
    	$("#controls li a").click(function(){
            /*Performed when a control is clicked */
    	    shuffle();
    	    var rel = $(this).attr("rel");
    	    if ( $("#" + rel).hasClass("current") ){
    	        return false;
    	    }
            /* Bug Fix, thanks Dave -> added .stop(true,true) 
                to stop any ongoing animation */
    	    $("#" + rel).stop(true,true).show();
    	    $(".current").fadeOut().removeClass("current");
    	    $("#" + rel).addClass("current");
    	    $(".active").removeClass("active");
    	    $(this).parents("li").addClass("active");
    	    set_new_interval(5000);
    	    return false;
    	});
    	/* 
    	* Optional Pause on Hover Feature 
    	* Comment out to use it
    	* Thanks, Andrew 
    	*/
    	/*$('.banner').hover(function() {
    			clearInterval(slide);
    		}, function () {
    			slide = setInterval( "banner_switch()", 7000 );
    	});*/
        });
        function banner_switch(){
            /*This function is called on to switch the banners out when the time limit is reached */
            shuffle();
            var next = $('.banner.current').next('.banner').length ? 
                $('.banner.current').next('.banner') : $('#banners .banner:first');
            $(next).show();
            $(".current").fadeOut().removeClass("current");
            $(next).addClass("current");
            var next_link = $(".active").next("li").length ? $('.active').next('li') : $('#controls li:first');
            $(".active").removeClass("active");
            $(next_link).addClass('active');
        }
        $(function() {
            /*Initial timer setting */
            slide = setInterval("banner_switch()", 5000);
        });
        function set_new_interval(interval){
            /*Simply clears out the old timer interval and restarts it */
            clearInterval(slide);
            slide = setInterval("banner_switch()", interval);
        }
        function shuffle(){
            /*This function takes every .banner and changes the z-index to 1, hides them,
                then takes the ".current" banner and brings it above and shows it */
            $(".banner").css("z-index", 1).hide();
            $(".current").css("z-index", 2).show();
        }
        </script>

     

Tag标签:门户网站  jquery  幻灯代码  
  • 专题推荐