Product Big Picture Gallery
by divayang
HTML
<div id="main">
<div class="main">
<div class="wraper">
<div class="proHeader">
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td valign="middle">
<h1>SONY 索尼 46英寸 1920×1080 全高清 LED液晶电视 KLV-46R470A</h1>
</td></tr>
</table>
<p class="promoText">专柜正品 奢华尽享 雍容贵气</p>
</div>
<div class="mainStage cls">
<div class="bigPicShow">
<span class="alignRefer"></span><img src="http://c3.neweggimages.com.cn/neweggpic2/neg/P800/A1R-184-00Z.jpg" />
</div>
<div class="smallPicList">
<a class="abtn aleft agrayleft" href="javascript:void(0);">向上</a>
<div class="smallPicListview">
<ul class="cls">
<li class="current"><a href="###"><img src="http://c3.neweggimages.com.cn/neweggpic2/neg/P80/A1R-184-00Z.jpg" bigsrc="http://c3.neweggimages.com.cn/neweggpic2/neg/P800/A1R-184-00Z.jpg" alt="" /></a></li>
<li><a href="###"><img src="http://c3.neweggimages.com.cn/neweggpic2/neg/P80/A1R-184-00Z_02.jpg" bigsrc="http://c3.neweggimages.com.cn/neweggpic2/neg/P800/A1R-184-00Z_02.jpg" alt="" /></a></li>
<li><a href="###"><img src="http://c3.neweggimages.com.cn/neweggpic2/neg/P80/A1R-184-00Z_03.jpg" bigsrc="http://c3.neweggimages.com.cn/neweggpic2/neg/P800/A1R-184-00Z_03.jpg" alt="" /></a></li>
<li><a href="###"><img src="http://c3.neweggimages.com.cn/neweggpic2/neg/P80/A1R-184-00Z_04.jpg" bigsrc="http://c3.neweggimages.com.cn/neweggpic2/neg/P800/A1R-184-00Z_04.jpg" alt="" /></a></li>
<li><a href="###"><img src="http://c3.neweggimages.com.cn/neweggpic2/neg/P80/A1R-184-00Z_05.jpg" bigsrc="http://c3.neweggimages.com.cn/neweggpic2/neg/P800/A1R-184-00Z_05.jpg" alt="" /></a></li>
<li><a href="###"><img src="http://c3.neweggimages.com.cn/neweggpic2/neg/P80/A1R-184-00Z_02.jpg" bigsrc="http://c3.neweggimages.com.cn/neweggpic2/neg/P800/A1R-184-00Z_02.jpg"...CSS
body{
background-color:#F7F7F7;
padding-bottom:20px;
}
.wraper {
width:1000px;
}
.proHeader{
position:relative;
height:80px;
margin-top:15px;
padding:0 340px 0 5px;
font-family:Tahoma,"Microsoft Yahei";
vertical-align:middle;
color:#333;
}
.proHeader h1{
font-size:18px;
font-family:Tahoma,"Microsoft Yahei";
}
.proHeader td{
height:60px;
overflow:hidden;
}
.proHeader .promoText{
color:#378bd3;
font-size:14px;
font-weight:bold;
margin-top:2px;
display:none;
}
.mainStage {
border:1px solid #fff;
}
.bigPicShow{
height:800px;
width:801px;
padding:0;
background:url(../Nest/img/loading_3.gif) no-repeat 419px 2376px #fff;
float:left;
overflow:hidden;
text-align:center;
}
.bigPicShow img{
max-width:800px;
-ms-interpolation-mode:bicubic;
_max-width:expression(this.style.width=(this.offsetWidth>=800)?"800px":"auto");
zoom:1;
vertical-align: middle;
}
.bigPicShow .alignRefer {
display: inline-block;
width: 1px;
height: 100%;
*height: 799px;
vertical-align: middle;
}
.smallPicList{
width:197px;
margin-left:-1px;
float:right;
height:800px;
color:#fff;
background:#fff;
position:relative;
overflow:hidden;
border-left:1px dotted #e7e7e7;
}
.smallPicList h3{
background:#236cb9;
font-size:12px;
height:30px;
line-height:30px;
font-weight:bold;
color:#fff;
padding:0 10px;
}
.smallPicList h3 ins{
font-style:normal;
font-weight:normal;
text-decoration:none;
padding:0 5px;
}
.smallPicList .smallPicListview{
position:relative;
height:696px;
margin: 51px 0 0;
padding-left:38px;
overflow:hidden;
}
.smallPicList .abtn {
width:58px;
height:22px;
border:1px solid #fff;
left:64px;
background-image:url(../Nest/img/abtn_v.png);
background-color:#f00;
}
.smallPicList .aleft {
top:15px;
background-position:18px 6px;
}
.smallPicList .agrayleft {
display:none;
background-position:18px -38px;
}
.smallPicList .aright {
bottom:15px;
top:auto;
background-position:18px -15px;
}
.smallPicList .agrayright...JavaScript
/*
Demo:
$(".productshow").Xslider({
unitDisplayed: 1,//可视的单位个数
numtoMove: 1,
dir: "H",//水平移动还是垂直移动 默认H为水平移动，传入V则表示垂直移动,传入F则表示渐变切换（注意是大写字母,F时还有限制）;
viewedSize:120,//可视宽度或高度 不传入则查找要移动对象外层的宽或高度;
unitLen:20,//移动的单位宽或高度（像素） 不传入则查找第一个li的尺寸;
speed: 500,//滚动速度（毫秒） 默认为500;
autoScroll:2000,//自动移动间隔时间（毫秒） 不传入则不会自动移动;
loop:"cycle",//循环滚动
scrollObj:"ul",//要移动的对象 不传入则查找productshow下的ul;
scrollObjSize://移动最长宽或高（像素）（要移动对象的宽度或高度） 不传入则由li个数乘以unitLen计算;
scrollunits: "li",//移动单位的对象数组，默认的是查找li
curStyle: "current",//当前移动对象的样式，默认是"current"
eventType: "click",//触发出点的事件类型
imgInit: 1,//当前初始化的位置
stepOne: false,//移动到每一个移动点。默认情况下滚动到最后能显示的一屏触点失效
btnNext: "a.aright",//移动到上一屏的触电选择器 默认为"a.aright"
btnPrevious: "a.aleft",//移动到下一屏的触电选择器 默认为"a.aleft"
start:1,//设置开始位置 默认是将第一个当做开始位置。
beforeStart:function(e){//移动之前出发的事件
//before code;
//e:{
goIndex: 当前移动到,
container: slider容器,
current: 当前单位,
next: 移动后单位,
eventTrigger: 出发的触点,
EOF: 是否是结尾,
BOF: 是否是开始
}
},
afterEnd:function(e){//移动之后出发的事件
//end code;
//e 同上
},
disableStyle: { previous: "agrayleft", next: "agrayright" },//触电失效时的样式。
navCurStyle: "current",//当前nav触点的样式 默认是"current"
showNav: null,//是否需要nav触点的选择器 默认为null
navEventType: "mouseenter"//nav触点的事件类型 默认为click
});
事件
go: function (n, eventTrigger, callback);//移动单位方法，{n:移动到的序号,eventTrigger:触点对象,移动动画完成后触发的事件}
prev: function ();//移动到上一个单位
next: function ();//移动到下一个单位
getSet: function ();//获取的配置项对象
init: function (settings);//重新初始化对象...