這裏是鏈接 - http://demo.crazewebconsultants.net/bag/product-details.php?id=MQ==雲變焦效果,在產品縮略圖動態畫面
$(document).ready(function(){
$('.prodsmallimg .img-responsive').click(function(){
$(".proddtlsimg img").attr("src",$(this).attr("src"));
});
});
.col-lg-5 {
width: 41.6667%;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 {
float: left;
}
.proddtlsimg {
margin: 10px 0 20px;
padding: 20px;
width:150px;
height:150px;
}
.proddtlsimg img {
margin: 0 auto;
width:100%;
}
.prodsmallimg {
border: 1px solid #cdcdcd;
display: inline-block;
padding: 15px;
cursor:pointer;
width:80px;
height:80px;
}
.prodsmallimg img {
margin: 0 auto;
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
<div class="proddtlsimg">
<img class="img-responsive" src="http://demo.crazewebconsultants.net/bag/site-admin/uploaded_files/product/1474450814-prodimg2.jpg">
</div>
<div class="row" style="width:500px">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="prodsmallimg">
<img class="img-responsive" src="http://demo.crazewebconsultants.net/bag/site-admin/uploaded_files/product/featured/1474450814prodsmallimg1.png">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="prodsmallimg">
<img class="img-responsive" src="http://demo.crazewebconsultants.net/bag/site-admin/uploaded_files/product/featured/1474450814prodsmallimg2.png">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="prodsmallimg">
<img class="img-responsive" src="http://demo.crazewebconsultants.net/bag/site-admin/uploaded_files/product/featured/1474450814prodsmallimg3.png">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="prodsmallimg">
<img class="img-responsive" src="http://demo.crazewebconsultants.net/bag/site-admin/uploaded_files/product/1474450814-prodimg2.jpg">
</div>
</div>
</div>
</div>
需要幫助添加雲變焦效果。它不適用於網站。我不明白爲什麼它不起作用。
幫幫我。提前致謝。
歡迎SO。但是你的問題太廣泛了,你還沒有提供任何代碼來幫助我們幫助你。請分享更多信息。 – Abela
你知道如何使用jquery嗎? –
請檢查該網站,我需要的代碼,我將如何做。我是新的 –