zoukankan      html  css  js  c++  java
  • 点击标签,通过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的,但是花了一天的时间,也没解决掉,只好用这种最简单的方法了。

  • 相关阅读:
    文字无缝滚动效果,鼠标移入时暂停
    Spring中使用@Autowired注解静态实例对象
    服务器环境搭建
    nexus问题
    useUnicode=true&characterEncoding=UTF-8 的作用
    SpringBoot项目启动时自动执行指定方法
    springboot自定义消息转换器HttpMessageConverter
    kubernetes资源类别介绍
    红黑树与平衡二叉树的比较
    Feign Client的超时时间
  • 原文地址:https://www.cnblogs.com/chendaoyin/p/2807616.html
Copyright © 2011-2022 走看看