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);
  }
}


版权声明:本文为博主原创文章,请放心使用

自定义控件实现banner轮播

一、添加依赖 compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.5' compile 'com.goog...
  • w98326angle
  • w98326angle
  • 2017年12月03日 21:07
  • 71

PC端banner轮播效果

  • 2016年02月14日 17:16
  • 277KB
  • 下载

JQuery实现banner图片的轮播效果

最近在学习jQuery,发现了一个好用的插件,可以方便地实现很多网站的banner轮播的效果,这个插件就是MyFocus了。 MyFoucus官网:http://demo.jb51.net/js/m...
  • u013301375
  • u013301375
  • 2015年01月29日 22:08
  • 1676

简单三步实现banner的轮播效果

目前有很多人使用Axure做轮播效果,步骤略复杂了些。这里,抛开其他设计原型不说,只说说banner图片轮播,三步教你实现轮播效果,我用的原型图软件是Mockplus。 把图片准备好,要开始了。...
  • jongde1
  • jongde1
  • 2016年06月23日 11:17
  • 1272

JavaScript面向对象焦点图片轮播banner

2016-04-02     JavaScript学习笔记 实例:焦点轮播图 HTML / CSS部分 无标题文档 *{margin:0; padding:0;} ul...
  • perhapschen
  • perhapschen
  • 2016年04月02日 21:15
  • 2275

Android实现Banner轮播效果

一、动态布局 纯粹为了保持代码风格的一致性,也可以用xml布局来实现。 private View createBannerView() { LinearLayout bannerLayout =...
  • ecjtuhq
  • ecjtuhq
  • 2017年02月08日 23:25
  • 1303

实现banner模块

网站基本都会有一个banner模块,展示各种内容,大致长下面这样:从图中可以得知该模块由“一组可点击的图片”和“两个按钮”组成,图片组可以放在一个ul列表中,并用div容器存放,两个按钮应该和图片组并...
  • DreamFJ
  • DreamFJ
  • 2017年04月10日 15:40
  • 307

图片轮播系列1-旋转木马(使用JS原生数组方式实现)

图片轮播系列1-旋转木马 ——使用JS原生数组方式实现 今天分享的是图片轮播,这是一个系列,后续会更新。使用JS原生数组方式实现的比较简单的图片轮播。 效果展示: 步骤: 1、准备数...
  • stevenITBoy
  • stevenITBoy
  • 2016年08月28日 17:55
  • 657

自定义图片轮播(Banner)控件的实现解析

自定义图片轮播(Banner)控件的实现解析图片轮播控件,可以说是每个App基本上都会用到的。它可以用来动态的展示多个图片,之前写过两篇博客:实现ViewPager无限循环的方式一和实现ViewPag...
  • xiaomai949804781
  • xiaomai949804781
  • 2016年11月16日 18:35
  • 907

JS移动端触屏滑动事件(banner轮播)

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成。但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件...
  • qq_33999340
  • qq_33999340
  • 2016年10月24日 10:15
  • 371
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js 实现banner轮播
举报原因:
原因补充:

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