JavaScript 图片切换展示效果alibaba拓展版

核心提示： 要美观的话需要css设置一下：CODE:.container, .container *{margin:0; padding:0;}.container{width:408px; height:168px; overflow:hidden;}.slider{position:absolut

要美观的话需要css设置一下：

CODE:

.container, .container *{margin:0; padding:0;}
.container{width:408px; height:168px; overflow:hidden;}
.slider{position:absolute;}
.slider li{ list-style:none;display:inline;}
.slider img{ width:408px; height:168px; display:block;}
.slider2{width:2000px;}
.slider2 li{float:left;}
.num{ position:absolute; right:5px; bottom:5px;}
.num li{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
.num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}

样式的设置跟程序也有一定关系，例如宽和高，这里就不说明了。

接着就可以实例化了：

CODE:

var tv = new TransformView ("idTransformView", "idSlider", 168, 3, {
onStart : function(){ Each(objs, function(o, i) { o.className = tv.Index == i ? "on" : ""; }) }//按钮样式
});

这里主要有4个参数，分别是容器对象、滑动对象、切换参数和切换数量。

当程序是上下切换时，切换参数切换的高度，当左右切换时，是切换的宽度。