标签：
1、HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#contaner{
height: 800px;
width: 800px;
margin: 50px auto;
border: 1px solid red;
}
.leftphoto{
height: 800px;
width: 200px;
overflow: scroll;
float: left;
}
.leftphoto img{
width: 180px;
height: 240px;
}
.rightphoto{
float: left;
height: 798px;
width: 580px;
margin-left: 10px;
text-align: center;
}
.rightphoto:after{
content: "";
clear: both;
}
.show img{
height: 760px;
width: 580px;
}
.tell{
border: 8px solid #38a;
width: 172px;
height: 232px;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.carouselFigure.js"></script>
<script type="text/javascript">
$(function(){
$(".leftphoto img").carouselFigure();
})
</script>
</head>
<body >
<div id="contaner">
<div class="leftphoto">
<img src="pic/01.jpg">
<img src="pic/02.jpg">
<img src="pic/03.jpg">
<img src="pic/04.jpg">
<img src="pic/05.jpg">
<img src="pic/06.jpg">
<img src="pic/07.jpg">
<img src="pic/08.jpg">
<img src="pic/09.jpg">
<img src="pic/10.jpg">
</div>
<div class="rightphoto">
<div class="show">
<img src="" >
</div>
<div class="control">
<input type="button" id="first" value="第一张">
<input type="button" id="pre" value="上一张">
<input type="button" id="next" value="下一张">
<input type="button" id="last" value="最后一张">
<input type="button" id="auto" value="自动播放">
</div>
</div>
</div>
</body>
</html>
2、JS：
(function($){ $.fn.carouselFigure = function(options){ var settings = $.extend({ picsrc:".leftphoto", photoShow:".show", first:"#first", pre:"#pre", next:"#next", last:"#last", auto:"#auto" },options||{}); var pics = this; //给图片加一个序号，可以在shwPic中 通过下标访问 this.each(function(n){ $(this).data("num",n); }); this.on("click",function(){ showPic($(this).data("num")); }); $(first).on("click",function(){ showPic(0); }) $(last).on("click",function(){ showPic(pics.length-1); }) var cur = 0; $(pre).on("click",function(){ showPic(cur-1); }); $(next).on("click",function(){ showPic(cur+1); }); var s = null; $(auto).toggle(function(){ s = setInterval(function(){showPic(cur);cur++;},1000); $(this).val("停止播放"); },function(){ $(this).val("自动播放"); clearInterval(s); }) function showPic(index){ if(index<0){index = pics.length-1; }else if (index>pics.length-1) {index = 0}; $(settings.photoShow).find("img").attr("src",pics[index].src) .animate({ opcity: 0.8 },600); $(pics[index]).siblings("img").removeClass("tell"); $(pics[index]).addClass("tell"); cur = index; } showPic(0); return this; } })(jQuery)
标签：
原文地址：http://www.cnblogs.com/a-lonely-wolf/p/5657655.html
