<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
/*
CSS Document
Version:1.0
Author: kacoro
Email:kacoro@live.cn
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,blockquote,th,input, textarea, button{margin:0px ;padding:0px; }
body{text-align:center; margin:0 auto; font:12px/22px Arial,Helvetica,Verdana,sans-serif; background:url(../img/body_bg.jpg) top repeat-x; width:100%;}
html,body{ height:100%; width:100%;}
table{border-collapse:collapse;border-spacing:0;}
img{border:0;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
select,input{ vertical-align:middle}
caption, th, td {text-align: left;}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:'';content:none;}
input, select {vertical-align:middle;}
/*----------伪类----------*/
a,a:link{ color:#000; text-decoration:none;}
a:hover{ color:#e1af4e; }
/*-------浮动-------*/
.f_l{ float:left;}
.f_r{ float:right;}
.dspinl{ display:inline;}
/*-------清除浮动---------*/
.clearfix:after{content:"."; display:block; height:0; clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clear{ clear:both;height:1px; margin-top:-1px; overflow:hidden;font-size:0px; line-height:1px;}
/*-------产品展示-------*/
#myImagesSlideBox{width:325px;height:390px;text-align:left;}
#myImages{overflow:hidden;height:323px;width:323px;border:1px solid #bbb; background:#FFF url(06/loading.gif) center center;}
#myImages img{padding:10px;width:303px; height:303px;}
#scrollable{position:relative;height:60px;padding:10px 0;}
.items{position:relative;height:60px;width:243px; overflow:hidden; padding-left:49px;}
#scrollableDiv{text-align:left;position:absolute;width:2000px;z-index:3; }
div.items a {display:inline; float:left;margin-right:15px;width:60px;height:50px;cursor:pointer;border:#b8d5f1 3px solid; overflow:hidden}
div.items a.active {border:#1d7cd5 3px solid;}
a.prev, a.next {
position:absolute;
z-index:5;
left:19px;
top:25px;
background:url(06/go_click.png) no-repeat 0px 0px;
display:block;
width:12px;
height:28px;
cursor:pointer;
}
a.next {left:295px;background-position:bottom left;}
</style>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><!--jq框架 -->
<script language="javascript">
jQuery.fn.loadthumb = function(options) {
options = $.extend({
src : ""
},options);
var _self = this;
_self.hide();
var img = new Image();
$(img).load(function(){
_self.attr("src", options.src);
_self.fadeIn("slow");
}).attr("src", options.src); //.atte("src",options.src)要放在load后面，
return _self;
}
$(function(){
var $content = $("#myImagesSlideBox #scrollableDiv");
var count = $content.find("a").length;//总共的<a>元素的个数
if(count>1){
//下一张
$(".next").live("click",function(){
$("#scrollableDiv a:nth-child(3)").trigger("click");
return false;
});
//上一张
$(".prev").live("click",function(){
$("#scrollableDiv a:nth-child(1)").trigger("click");
return false;
});
}
$("#scrollableDiv a").live("click",function(){
var $scrollableDiv = $("#scrollableDiv");
$(this).addClass("active").siblings().removeClass("active");
if(count>1){
if($(this).is("#scrollableDiv a:nth-child(1)")){
$("#scrollableDiv a:first-child").before($("#scrollableDiv a:last-child"));}
if($(this).is("#scrollableDiv a:nth-child(3)")){
$("#scrollableDiv a:last-child").after($("#scrollableDiv a:first-child")); }
}
var src = $(this).find("img").attr("imgb");
$(this).parents("#myImagesSlideBox").find("#myImgs").loadthumb({src:src});
})
//初始化
if(count>1){ $("#scrollableDiv a:nth-child(2)").trigger("click");}
else{
var scrollableDiv =$("#scrollableDiv");
var position = scrollableDiv.position();
alert(position.left);
$("#scrollableDiv").css({"left":position.left+81+"px"});
$("#scrollableDiv a:nth-child(1)").trigger("click");
}
})
</script>
</head>
<body>
<div id="myImagesSlideBox" >
<div id="myImages">
<img id="myImgs" src="金刚927/金刚927/upfiles/201109/03/97bc2f8eadfc3fab.jpg" bigimg="images/bigimges_01.jpg"/>
</div>
<div id="scrollable">
<a class="prev" title="上一张"></a>
<div class="items" >
<div id="scrollableDiv">
<!--<a><img src="images/d1-small.jpg" imgb="images/d1.jpg" bigimg="images/bigimges_01.jpg" > </a>
-->
<a><img src="07/3e628539ac496581.png" width="60" height="50" imgb="07/3e628539ac496581.png" ></a>
<a><img src="07/a56e0e6f971d7ea2.png" width="60" height="50" imgb="07/a56e0e6f971d7ea2.png" ></a>
<a><img src="07/a38b866e553faa5d.png" width="60" height="50" imgb="07/a38b866e553faa5d.png" ></a>
</div>
<br clear="all"/>
</div>
<a class="next" title="下一张"></a>
</div>
</div>
</body>
</html>
