js 实现banner轮播

矫情吗；* 2022-08-22 14:13 226阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app Banner ( 轮播图 ) 实现

例子： <view class="page-section-spacing"> <swiper class="swiper" indicato

喜欢ヅ旅行/ 2023年02月08日 15:59/ 0 赞/ 584 阅读

相关 js 实现banner轮播

<div id="Banner"> <ul id="fcimg"> <{section nam

矫情吗；*/ 2022年08月22日 14:13/ 0 赞/ 227 阅读

相关 Android UI - 实现广告Banner轮播效果

Android UI - 实现广告Banner轮播效果前言本篇博客要分享的一个效果是实现广告Banner轮播效果，这个效果也比较常见，一些视频类应用就经常有，就

Myth丶恋晨/ 2022年08月07日 05:33/ 0 赞/ 194 阅读

相关 banner广告轮播的实现

1.广告轮播的实现今天呢，我给大家分享一下广告轮播的一些值得注意的地方。 1>首页，创建一个Ad广告bean，把要在图片上显示的属性全定义在Ad中，上代码：

墨蓝/ 2022年07月15日 23:41/ 0 赞/ 206 阅读

相关 Banner轮播图片实践

参考文章链接：[手把手原生js简单轮播图][js] [https://www.cnblogs.com/LIUYANZUO/p/5679753.html][https_www.c

我就是我/ 2022年05月26日 10:35/ 0 赞/ 321 阅读

相关自动轮播banner图

Html代码： <div class="banner"> <img src="images/c.jpg"> <img src="images

太过爱你忘了你带给我的痛/ 2022年02月17日 08:09/ 0 赞/ 294 阅读

相关简单HTML、CSS、JS实现的banner横幅轮播效果

直接上代码吧 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

女爷i/ 2022年01月22日 23:21/ 0 赞/ 507 阅读

相关 uni-app Banner ( 轮播图 ) 实现

Banner `Banner` 的实现使用的是 `swiper` 组件实现，在`swiper`组件里面添加`swiper-item`组件即可实现例子 <

逃离我推掉我的手/ 2021年12月05日 05:49/ 0 赞/ 980 阅读

相关 Flutter 实现轮播图banner

先上效果图： ![20190731202927595.gif][] flutter的Swiper控件，实现无线轮播： 1.准备首先打开pubspec.yam

野性酷女/ 2021年11月14日 12:40/ 0 赞/ 461 阅读

相关 flutter banner轮播图

仓库地址： `https://pub.dev/packages/flutter_swiper` 加yaml文件中加入依赖，目前可能为比较好用的banner轮播图

柔光的暖阳◎/ 2021年08月19日 16:40/ 0 赞/ 405 阅读