商品详情页中，当鼠标放到小图上时，改变大图的图片为当前小图的图片

在做商品详情页时，我们会遇到这样的问题，当鼠标移动到小图上的时候，所对应的大图也会随之改变，变成当前鼠标所在位置的小图图片，今天我给大家分享一下我的做法，希望对大家有所帮助，也希望得到大家的指点.

//首先引入jq文件，我用的是tp框架，jq文件是放在根目录Public文件夹下的

<script src="__PUBLIC__/js/jquery-1.10.2.min.js"></script>

<script  type="text/javascript">

//首先给小图绑定 mouseover 事件
$('#J_SmallImgs img').mouseover(function (){
        
        var that = $(this);
        
        //当鼠标移动到小图上的时候，获取到当前小图的图片地址
        var newUrl = that.attr('src');

        //改变大图的图片地址为当前小图的图片地址
        $('#J_BigImg').attr('src',newUrl);

        //我们可以同时改变当前所在的小图的透明度，但在此之前，我们可以先设置所有的小图的透明，做到清除上一个被选中的小图的透明度
        $('#J_SmallImgs img').css('opacity',0.7);

        //改变当前所在小图的透明度，做到被选中的效果
        that.css('opacity',1);
    }); 

</script>