How to use jQuery to display the corresponding large picture when the mouse slides over the small picture of the product

This time I will show you how to operate jQuery to display the corresponding large picture when the mouse slides over the small picture of the product, and how to operate jQuery to display the corresponding large picture when the mouse slides over the small picture of the product. What are the precautions , the following is a practical case, let’s take a look.

nbsp;html>


<meta>
<title>jQuery图片变换</title>

<style>
 .show{width:330px; height:auto; margin:50px auto; background:#eee}
 .item{background:#fff; width:300px; height:auto; float:left; margin:15px;}
 p{ padding:15px; color:#ff6600}
 .big-photo img{ width:300px; height:300px; border:1px solid #e0e0e0}
 .des-small img{ width:30px; height:30px;border:1px solid #e0e0e0; }
 .des-small img:hover{ border:1px solid #ff6600}
 .clear{clear:both}
</style>
<script></script>
<script>
 $(function() {
  /** 更换小图片 */
  $(".item a").hover(function(){
   changeImg($(this))
  }); 
 });
 function changeImg(obj){
  if(obj.find("img").attr("alt")=="small"){
   var temp_big_src = obj.siblings(&#39;a&#39;).find(&#39;img[alt=big]&#39;).attr(&#39;src&#39;);
   var temp_big_url = obj.siblings(&#39;a[class=big-photo]&#39;).attr(&#39;href&#39;);
   var temp_small_src = obj.find(&#39;img&#39;).attr(&#39;src&#39;);
   var temp_small_url = obj.attr(&#39;href&#39;);
   obj.siblings(&#39;a&#39;).find(&#39;img[alt=big]&#39;).attr(&#39;src&#39;,temp_small_src);
  }
 }
</script>

 <p>
  </p><p>Jquery实现鼠标移动/移过到商品小图片上时替换掉大图片上的图片</p>
  <p>
   <a>
    <img  src="/static/imghwm/default1.png" data-src="WR_00001.jpg" class="lazy" alt="How to use jQuery to display the corresponding large picture when the mouse slides over the small picture of the product" >
   </a>
   <a>
    <img  src="/static/imghwm/default1.png" data-src="WR_00002.jpg" class="lazy" alt="How to use jQuery to display the corresponding large picture when the mouse slides over the small picture of the product" >
   </a>
   <a>
    <img  src="/static/imghwm/default1.png" data-src="WR_00003.jpg" class="lazy" alt="How to use jQuery to display the corresponding large picture when the mouse slides over the small picture of the product" >
   </a>
   <a>
    <img  src="/static/imghwm/default1.png" data-src="WR_00004.jpg" class="lazy" alt="How to use jQuery to display the corresponding large picture when the mouse slides over the small picture of the product" >
   </a>
  </p>
  <p></p>
 

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Summary of Node.js file encoding format conversion methods

How to use vue application ueditor to customize upload Button

The above is the detailed content of How to use jQuery to display the corresponding large picture when the mouse slides over the small picture of the product. For more information, please follow other related articles on the PHP Chinese website!