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的,但是花了一天的时间,也没解决掉,只好用这种最简单的方法了。

  • 相关阅读:
    《模糊测试--强制发掘安全漏洞的利器》阅读笔记(一)
    BrickerBot
    这些写的很好的PCA文章
    决策树(挖坑待填)
    线性回归
    关于给定DNA序列,如何找到合理的切割位点使得其退火温度保持相对一致
    生成全排列
    AVL树学习笔记
    二叉搜索树
    堆排序
  • 原文地址:https://www.cnblogs.com/chendaoyin/p/2807616.html
Copyright © 2011-2022 走看看