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

  • 相关阅读:
    TestNG 入门教程
    Angularjs中文版本开发指南发布
    你是码农 还是优秀程序员?
    java牛人给新人的几点建议
    有一种毒药叫励志书
    牛人眼中如何精通spring?
    驯服你的Windows Server 2003
    windows 7 里面的iis在哪里
    神器 cmder
    亚信UED前端流程自动化构建工具
  • 原文地址:https://www.cnblogs.com/chendaoyin/p/2807616.html
Copyright © 2011-2022 走看看