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)
时间： 2024-10-10 00:00:44