js 实现banner轮播

原创 2016年05月30日 13:11:22
<!--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+css3实现图片自动切换,图片轮播

运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 ...

旅游banner js轮播图 代码

  • 2015-01-26 12:03
  • 587KB
  • 下载

自定义JQuery插件(附图片轮播banner实现)

实现一个图片轮播banner插件。作为一个java后台攻城狮,有的时候对自己的想法无法用前端展现出来,总感觉挺遗憾的。所以了解一定的前端知识与主流的前端技术,也是一个后台攻城狮的基本素养。最近刚好做相...

网站banner图轮播效果 js

js自动轮播banner

  • 2016-12-12 16:33
  • 279KB
  • 下载

Android自定义控件--无限轮播Banner和Indicator实现

应用首页的广告轮播`Banner`,一般都会使用`ViewPager`来实现,但是`ViewPager` 没有轮播效果。 现成有这么几种实现方案, 1.使用`Integer.MAX_VALUE` ,理...
  • wbwjx
  • wbwjx
  • 2015-09-12 01:19
  • 1120

广告轮播Banner实现demo

  • 2017-07-17 15:41
  • 2.71MB
  • 下载

三层继承ViewPager实现无限轮播图Banner

概述:很多项目中都有无限轮播图,犹如网易新闻顶部的轮播图等,是一个很常见的控件。有很多人写(详见codeKK),这块按照自己的思路写一遍,三层继承ViewPager实现之,使得代码清晰,改动方便。代码...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)