• 点击标签,通过jquery.jcarousel动态axaj加载内容,实现跑马灯效果


    jquery下的jquery.jcarousel插件跑马灯效果非常好,写法也很简单。

    我遇到的情况是,左边有三个品牌标签,右边的区域显示对应的产品。且同时只显示三个品牌标签下面的任一种产品,右边区域显示的内容,通过点击左边的品牌标签切换。

    实现方法如下:

    <li onclick="GetProduct('3','1')">品牌1</li><li onclick="GetProduct('2','2')">品牌2</li><li onclick="GetProduct('1','3')">品牌3</li>
    <div class="recon">
    <ul id="mycarousel_1" class="jcarousel-skin-tango">
    </ul>
    <ul id="mycarousel_2" class="jcarousel-skin-tango">
    </ul>
    <ul id="mycarousel_3" class="jcarousel-skin-tango">
    </ul>
    </div>
    function mycarousel_initCallback(carousel)
    {
    carousel.clip.hover(function() {
    carousel.stopAuto();
    }, function() {
    carousel.startAuto();
    });
    };
    function GetProduct(id, iIndex){
    url = "tjproduct.asp?id="+id;
    $.get(url,function(data){
    $("#mycarousel_"+iIndex).html(data);
    $("#mycarousel_"+iIndex).jcarousel({
    auto: 2,
    scroll:1,
    wrap: 'circular',
    initCallback: mycarousel_initCallback
    });
    });
    for(i=1;i<=3;i++){
    if(i==iIndex){
    $(".recon .jcarousel-skin-tango:eq("+(i-1)+")").show();
    }else{
    $(".recon .jcarousel-skin-tango:eq("+(i-1)+")").hide();
    }
    }
    };

    实际上就是对三个ul同时实现跑马灯效果,但同时只显示一个,通过点击标签切换。想只用一个ul的,但是花了一天的时间,也没解决掉,只好用这种最简单的方法了。

  • 相关阅读:
    docker删除常见命令
    测试网中用户添加docker yum源
    kafka 重新分配partition
    docker-compose常用命令
    docker 常用命令
    docker-compose部署ELK
    ELK全Dokcer 部署
    Harbor修改/data目录位置
    单机多es容器服务部署的网络模式
    C++使用模板类时出现LNK2019 unresolved external symbol错误.
  • 原文地址:https://www.cnblogs.com/chendaoyin/p/2807616.html
Copyright © 2020-2023  润新知