jquery(3)

图片的切换

js

//根据颜色换大图 $(function(){ $(".color_change>ul>li>img").click(function(){ var a=$(this).attr("src"); var color=$(this).attr("alt"); /*alert(color);*/ var src=a.split("img/"); /*alert(src[1]);*/ var b=src[1].split(".jpg"); /*alert(b[0]);*/ //更换大图 $(".jqzoom>img").attr("src","images/pro_img/"+b[0]+"_one_small.jpg"); $(".jqzoom>img").attr("jqimg","images/pro_img/"+b[0]+"_one_big.jpg"); //更换字体 $(".color_change:first strong").html(color); //更换下面三张图片 $(".imgList li img:eq(0)").attr("src","images/pro_img/"+b[0]+"_one.jpg"); $(".imgList li img:eq(1)").attr("src","images/pro_img/"+b[0]+"_two.jpg"); $(".imgList li img:eq(2)").attr("src","images/pro_img/"+b[0]+"_three.jpg"); if (b[0]=="green") { $(".imgList li img:eq(2)").hide(); } else{ $(".imgList li img:eq(2)").show(); } }) })

html,需要点击的小图片

<div class="color_change"> 颜色：<strong>蓝白</strong> <ul> <li><img src="images/pro_img/blue.jpg" alt="蓝白" /></li> <li><img src="images/pro_img/yellow.jpg" alt="黄白" /></li> <li><img src="images/pro_img/green.jpg" alt="粉绿" /></li> </ul> </div>

html,需要改变颜色的小图片

<ul class="imgList"> <li><img src="images/pro_img/blue_one.jpg" alt="" /></li> <li><img src="images/pro_img/blue_two.jpg" alt="" /></li> <li><img src="images/pro_img/blue_three.jpg" alt="" /></li> </ul>

效果图

价格的动态显示 js

$(function(){ $("select").click(function(){ var num=$("option:selected").val(); $(".pro_price span").text(num*200); }) })

html

<div class="pro_price"> 总计：<span>200</span>元 </div>

效果图