您的位置:首页 > Web前端 > JavaScript

js 实现banner轮播

2016-05-30 13:11 489 查看
<!--Banner Start-->
<div id="Banner">
<ul id="fcimg">
<{section name=ad_k loop=$adData }>
<a <{if $adData[ad_k].url  }> href="<{$adData[ad_k].url}>" target="_blank"<{/if}> >
<!-- <li class="list-item" style="background: url(<{$smarty.const.UPYUN_WWW_PATH}><{$adData[ad_k].image}>) no-repeat center top;"></li> -->
<li class="" style="background: url(<{$smarty.const.UPYUN_WWW_PATH}><{$adData[ad_k].image}>) no-repeat center top;"></li>
</a>
<{/section}>
</ul>
<script type="text/javascript" src="js/duice.js"></script>
</div>


js:

var indx = 1;
var looper = 6000;
var myTimer;
$(document).ready(function(){
if($('#thscrll') && $('#thscrll img').length > 0) {
$('#thscrll').css({"padding-bottom":"15px"}); }

if($("#fcimg li").length >1){
$("#fcimg").after( $('<div></div><ul id="fcnum"></ul>'));
for(i=1;i<=$("#fcimg li").length;i++){
if(i==1) $("#fcnum").append($("<li class=\"crn\"> </li>"));
else $("#fcnum").append($("<li> </li>"));
}
myTimer = setInterval('showFImg("#fcimg li","#fcnum li","crn")', looper);
$("#fcnum li").click(function(){
indx = $("#fcnum li").index(this);
showFImg("#fcimg li","#fcnum li","crn");
try{
clearInterval(myTimer);
myTimer = setInterval('showFImg("#fcimg li","#fcnum li","crn")', looper);
}catch(e){}
return false;
});
$("#fcimg").hover(function(){
if(myTimer){ clearInterval(myTimer); }
},function(){
myTimer = setInterval('showFImg("#fcimg li","#fcnum li","crn")', looper);
});
}
});

function showFImg(il,nl,cs){
if($(il).length >1){
crobj = $(il).eq(indx);
$(il).not(crobj).hide();
$(nl).removeClass(cs)
$(nl).eq(indx).addClass(cs);
crobj.stop(true,true).fadeIn('slow');
indx = (++indx) % ($(il).length);
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  js