需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div {width: 72pxheight: 72pxbackground: url(small3.png) no-repeatoverflow: hidden}
3、浏览器运行index.html页面，此时成功将矩形图片只显示了正方形部分。
4、点击小图后，成功显示了大图。
第一种方法：将三张大图放在div里面，这三个div大小还有别的属性都一样，但是默认是隐藏的，display：none；隐藏display：block；显示然后点击一张图片，对应的大图div显示出来，点击第二张，第一个大图div隐藏，第二个大图div显示。第二种方法，只有一个大的div，里面放<img>标签，但是src也就是路径是空的，然后当你点击第一个小图的时候，给这个img标签的src赋值，也就是第一个大图的路径，点击第二个，路径变更。第三种，去网上找找这样的源代码，图片轮转。好多源代码 各种样式的都有。希望能帮助到你先把图片控制大小！！
点击后！大小auto!!
再次点击大小还原！！
<script type="text/javascript">$(document).ready(function(){
$("#ck").children('img').click(function(){
if( $("this").hasClass('current')){
$(this).next("ul").removeClass("current")
$("this").css('width',"auto")
$("this").css('height',"auto")
}else{
$(this).addClass("current")
$("this").css('width',"50px")
$("this").css('height',"50px")
}
})
没试过！！你先试下吧！！
