Js-点击图片触发事件,分类显示信息

本文详细介绍了一种通过点击小图片来动态加载并更新大图片的网页交互方式,使用了jQuery AJAX实现图片列表的获取与更新,同时介绍了fullSlide插件的使用方法,实现了图片轮播效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1:点击页面的图片:

   点击分类的时候,可以暂时下面的图片不同类型,

    <tr>
                    <td id="picOutdoor" class="picOutdoor" BrandType="1" style="text-align:left; padding-right:28px;">
                        <a href="javascript:void(0);">  <img src="~/Images/BrandInfo/gemei/Outdoor2.jpg" class="imgso" /> </a>
                    </td>
                    <td id="picOutdoor" class="picOutdoor" BrandType="2" style="text-align:center; padding-right:28px;">
                        <img src="~/Images/BrandInfo/gemei/Lobby2.jpg" class="imgsl" />
                    </td>
                    <td id="picOutdoor" class="picOutdoor" BrandType="3" style="text-align:right;">
                        <img src="~/Images/BrandInfo/gemei/Room2.jpg" class="imgsr" />
                    </td>
                </tr>

 

2:这里需要点击小的图片,大的图片就会重新获取,所以需要用到id :picOutdoor

注意这里的:.fullSlide .bd ul    是这样的写法。

点击方法js:

  $(".picOutdoor").click(function () {
          $.ajax({
            type: "POST",
            url: '@Url.Action("GetBrandInfoPicList", "BrandInfo")',
            traditional: true,
            data: {
                BrandCode:@Model.BrandCode,// '20',
                BrandType: $(this).attr("BrandType"),
            },

            success: function (data) {
                console.log($(".fullSlide .bd ul")[0].outerHTML)
                $(".fullSlide .bd ul")[0].outerHTML = '<ul></ul>'
                for (var i = 0; i < data.lstResult.length; i++) {
                    $(".fullSlide .bd ul").prepend('<li _src="url(/' + data.lstResult[i].PicPath + ')" style="background:#FFFFFF center 0 no-repeat;"> </li>')

                }
            },
              complete: function () {
                  fullSlideMain();
            }
        });
    });

3:上面调用了方法:fullSlideMain的详细代码

    function fullSlideMain() {
        $(".fullSlide").slide({
            titCell: ".hd ul",
            mainCell: ".bd ul",
            effect: "fold",
            autoPlay: true,
            autoPage: true,
            trigger: "click",
            interTime: 20000,
            prevCell: ".arrowLeft",
            nextCell: ".arrowRight",
            startFun: function (i) {
                var curLi = jQuery(".fullSlide .bd li").eq(i);
                if (!!curLi.attr("_src")) {
                    curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
                }
                var total = $(".bd li").length;
                var page = i + 1;
                $(".hd ul").html('<span>' + page + ' / ' + total + '</span>');
            }
        });                                        //document.domain == "126.com";
    }
    fullSlideMain();

4:鼠标点击事件:鼠标触发事件,离开事件:

代码: var oImg = document.getElementsByClassName("imgso")[0];
        var oImgs = document.getElementsByClassName("imgsos")[0];

是如何获取的,如图:就是一个img图片的class里面的名称

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值