在wordpress中用jQuery实现鼠标点击小图片切换大图片

最近小编在网站开发中遇到一个需求，就是产品信息展示时，有一张大图，旁边有三张小图，要实现点击三张小图时，大图片要切换为点击的小图片。

以下是小编在网上查找到的资源和代码：首先需要加载jQuery文件，小编发现直接在头部加载不管用，所以只好在functions文件中进行添加：

//  加载scripts和css
function md_scripts() {
    wp_enqueue_script( 'jquery', get_template_directory_uri() . '/fonts/jquery-1.2.min.js', array(), '1.10.1', false );
}
add_action( 'wp_enqueue_scripts', 'md_scripts' );

让后在需要这个功能的代码中加入以下代码：

<div class="product-header--media--row">
    <div class="product-header--media--full">
        <div class="gallery-photo-box">
            <img id="bigImg" src="<?php the_field('text_img')  ?>"  alt="<?php the_title()?>" class="img-fluid img-product-itemphoto">
        </div><!-- 在此处展示大图片，注意次吃的ID在后面要用到 -->
    </div>
    <div class="product-header--media--thumbs">
        <div class="gallery-box-thumbs">
            <ul class="thumbs" id="gallery_photo_thumbs"><!-- 在下面的三个li里放的是三张小图片，全部是从数据库读取的    -->
                <li  class="img-fluid">
                    <a href="#" data-toggle="modal" data-target="#media_library">
                        <img alt="" src="<?php the_field('thumb1')  ?>">
                    </a>
                </li>
                <li  class="img-fluid">
                    <img alt="GE Aisys Carestation " src="<?php the_field('thumb2')  ?>">
                </li>
                <li  class="img-fluid">
                    <img alt="GE Aisys Carestation Anesthesia Machine" src="<?php the_field('thumb3')  ?>">
                </li>
            </ul>
        </div>
    </div>
</div>

最后在此页面加上jQuery代码就可以实现效果，代码如下：

<script>
    jQuery( document ).ready( function( $ ) {
        $(".gallery-box-thumbs ul li img").live("click", function () {
            //获得当前选择颜色图片的src属性
            var Imgsrc = $(this).attr("src");
            //lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
            var i = Imgsrc.lastIndexOf(".");
            //substring() 方法用于提取字符串中介于两个指定下标之间的字符。
            var unit = Imgsrc.substring(i);//结果：".jpg"
            Imgsrc = Imgsrc.substring(0, i);//结果：例如："images/pro_img/blue_one"
            var Imgsrc_small=Imgsrc + unit;//结果：例如："images/pro_img/blue_one_small.jpg"
            var Imgsrc_big = Imgsrc + unit;//结果：例如："images/pro_img/blue_one_big.jpg"

            //给大图的src属性和jqimg属性赋值
            $("#bigImg").attr({ "src": Imgsrc_small, "jqimg": Imgsrc_big });
            //给观看清晰图片的src属性赋值
            $("#thickImg").attr("href", Imgsrc_big);
        });
    } );
</script>

如此，便在wordpress中，通过jQuery添加上，点击小图片切换显示大图片的功能了。这是小编半天的心得。当然有借助于网上的资源，希望能够对看到本文档的朋友带来帮助！