<style>
ul{
list-style:
none;
padding:
0px;
margin:
0px;}
li{
list-style:
none;
padding:
0px;
margin:
0px;}
.big_pic{
width:
300px;
height:
300px;
overflow:
hidden;
padding-bottom:
20px;}
#pic_box{
width:
510px;
height:
200px;
overflow:
hidden;}
.pic_bon_left{
width:
10px;
cursor:
pointer;
height:
200px;
vertical-align:
middle;
float:
left}
.pic_cen{
float:
left;
width:
480px;
padding:
5px;
overflow:
hidden;}
.pic_cen ul{
list-style:
none;
overflow:
hidden;
height:
160px;}
.pic_cen ul li{
list-style:
none;
width:
100px;
height:
160px;
float:
left;
padding-right:
10px;}
.pic_cen ul li img{
width:
96px;
height:
160px;}
.pic_bon_right{
width:
10px;
cursor:
pointer;
height:
200px;
vertical-align:
middle;
float:
right}
</style>
<div class="big_pic"><img src="img/1.jpg" id="bigimg" /></div>
<div id="pic_box">
<div class="pic_bon_left"><</div>
<div class="pic_cen">
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/6.jpg" /></li>
</ul>
</div>
<div class="pic_bon_right">>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var prev=$(".pic_bon_left"
);
var next=$(".pic_bon_right"
);
var img=$(".pic_cen ul"
);
var flag="left"
;
var ad;
var w=$(".pic_cen ul li").outerWidth(
true);
//outerWidth(options)获取第一个匹配元素外部宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效
$(".pic_cen ul li").click(
function(){
$src=
this.getElementsByTagName("img")[0
].src;
$("#bigimg").attr("src"
,$src);
});
next.click(function(){
img.animate({"margin-left":-w},
function(){
img.find("li").eq(0).appendTo(img);
//在被选元素img 结尾（仍位于内部） 加入加'eq(0):第一个'li
img.css({"margin-left":0
});
});
var flag="left"
;
});
prev.click(function(){
img.find('li:last').prependTo(img);
//在被选元素img 开头（仍位于内部） 加入最后一个li
img.css({"margin-left":-
w});
img.animate({"margin-left":0
});
var flag="right"
;
});
$("#pic_box").hover(
function(){
clearInterval(ad);
},function(){
ad=setInterval(
function(){flag == "left" ? next.click() : prev.click()},3000
);
}).trigger("mouseleave"
);
});
</script>
转载于:https://www.cnblogs.com/vania/p/3319043.html
相关资源：jquer图片切换 图片展览 图片
