jquery实现图片缩小放大的切换

最新推荐文章于 2022-03-18 10:09:51 发布

LJTsun

最新推荐文章于 2022-03-18 10:09:51 发布

阅读量1.7k

点赞数

分类专栏： jquery 用法文章标签： html jquery

本文链接：https://blog.csdn.net/LJTsun/article/details/50834168

版权

用法同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

HTML

       <div class="record-box">
            <div class="record-list">
                <h5>2016-02-23</h5>
                <p>产品挺好的，货真价实，服务态度挺好，但物流有待改进！</p>
                <div class="propic">
                    <div class="propic_slides">
                        <ul>
                            <!--小图片的展示--图片数据只需循环这里的<li>就好了-->
                            <li class="active"><img src="/cglib/article/images/cbd1.jpg"></li>
                            <li><img src="/cglib/article/images/cbd2.jpg"></li>
                            <li><img src="/cglib/article/images/cbd3.jpg"></li>
                        </ul>
                    </div>
                    <!--点击查看的大图展示-->
                    <div class="big-img" data-img="0"><img src=""></div>
                    <div class="big-img" data-img="1"><img src=""></div>
                    <div class="big-img" data-img="2"><img src=""></div>
                </div>
                <p class="reply-word">客服回复：</p>
            </div>
        </div>

JS

   // 细节图片点击
    $('.text-record').delegate('.list_box_listen','click',function(){
        var $index = $(this).index(),
            $thisImg = $(this).find('img'),
            $thisParent  = $(this).closest('.propic');

        $(this).addClass('active').siblings().removeClass('active');
        if($index == 0){
            $thisParent.children('[data-img="0"]>img').attr('src',$thisImg.attr('src'));
            $thisParent.children('[data-img="0"]').toggle();
            $thisParent.children('[data-img="1"]').hide();
            $thisParent.children('[data-img="2"]').hide();
        }else if($index == 1){
            $thisParent.children('[data-img="1"]>img').attr('src',$thisImg.attr('src'));
            $thisParent.children('[data-img="1"]').toggle();
            $thisParent.children('[data-img="0"]').hide();
            $thisParent.children('[data-img="2"]').hide();
        }else{
            $thisParent.children('[data-img="2"]>img').attr('src',$thisImg.attr('src'));
            $thisParent.children('[data-img="2"]').toggle();
            $thisParent.children('[data-img="1"]').hide();
            $thisParent.children('[data-img="0"]').hide();
        }

    });