图片轮播js及调用

1. 图片轮播所需js

// JavaScript Document
var t = 0;
var n = 0;
var count = 0;  
//需要延迟加载
setTimeout(function(){  
    count = $("#play_list a").size();  
    $("#play_list a:not(:first-child)").hide();  
    $("#play_info").html($("#play_list a:first-child").find("img").attr('alt'));  
    $("#play_text li:first-child").css({"background":"#fff",'color':'#000'});  
    $("#play_info").click(function(){window.open($("#play_list a:first-child").attr('href'), "_blank");});  
    $("#play_text li").click(function() {  
        var i = $(this).text() - 1;
        n = i;  
        if (i >= count){
         return;  
        }
       $("#play_info").html($("#play_list a").eq(i).find("img").attr('alt'));  
       $("#play_info").unbind().click(function(){window.open($("#play_list a").eq(i).attr('href'), "_blank");});
       $("#play_list a").filter(":visible").fadeOut(1000).parent().children().eq(i).fadeIn(1000);  
       $(this).css({"background":"#fff",'color':'#000'}).siblings().css({"background":"#000",'color':'#fff'});  
    });  
    t = setInterval("showAuto()", 2000);  
    $("#play").hover(function(){clearInterval(t);}, function(){t = setInterval("showAuto()", 2000);});  
},1500);
 
function showAuto()  
{  
    n = n >= (count - 1) ? 0 : n + 1;  
    $("#play_text li").eq(n).trigger('click');  
}

 

 

2. 页面调用

<div id="picture">
          <div id="play">         
            <div id="play_bg" class="scrollDiv">
                <div id="play_info"></div>
                <div id="play_text">
                  <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                  </ul>
                </div>
                </div>
                <div id="play_list">             
                </div>
            </div>
        </div>