图片轮播js及调用

系统 1777 0

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>

 

图片轮播js及调用


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论