以下是 iSlider手机端图片滑动轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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=gb2312" />
<title>iSlider手机端图片滑动切换</title>
<link rel="stylesheet" href="css/zzsc.css" />
<script src="js/islider.js"></script>
<script src="js/plugins/islider_desktop.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<h4 style="text-align: center">animateType参数中设置，目前支持default, rotate, flip 和 depth, 点击按钮看效果</h4>
<div id="iSlider-effect-wrapper">
<div id="animation-effect" class="iSlider-effect"></div>
</div>
<div id="menu-select">
<span class="on">default</span>
<span>rotate</span>
<span>flip</span>
<span>depth</span>
</div>
<h4 style="text-align: center">垂直轮播</h4>
<div id="vertical-slide" class="iSlider-effect"></div>
<h4 style="text-align: center">不循环模式(最始及最末图片滑动会有衰减效果)</h4>
<div id="non-looping" class="iSlider-effect"></div>
<h4 style="text-align: center">DOM</h4>
<div id="dom-effect" class="iSlider-effect"></div>
<script>
var picList = [
{
width: 150,
height: 207,
content: "images/1.jpg",
},
{
width: 150,
height: 207,
content: "images/2.jpg",
},
{
width: 150,
height: 207,
content: "images/3.jpg",
},
{
width: 150,
height: 207,
content:"images/5.jpg"
},
{
width: 150,
height: 207,
content:"images/6.jpg"
},
{
width: 300,
height: 414,
content:"images/7.jpg"
},
{
width: 150,
height: 207,
content:"images/8.jpg"
},
{
width: 150,
height: 207,
content:"images/9.jpg"
}
];
var domList = [
{
'height' : '100%',
'width' : '100%',
'content' : '<div><h1>Home</h1><h2>This is home page</h2><p>home is pretty awsome</p><div>'
},{
'height' : '100%',
'width' : '100%',
'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>'
},{
'height' : '100%',
'width' : '100%',
'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awsome</p><div>'
},{
'height' : '100%',
'width' : '100%',
'content' : '<div><h1>Page3</h1><h2>This is page3</h2><p>page3 is pretty awsome</p><div>'
}
];
//all animation effect
var islider1 = new iSlider({
data: picList,
dom: document.getElementById("animation-effect"),
duration: 2000,
animateType: 'default',
isAutoplay: true,
isLooping: true,
// isVertical: true, 是否垂直滚动
});
islider1.bindMouse();
//vertical slide
var islider2 = new iSlider({
data: picList,
dom: document.getElementById("vertical-slide"),
duration: 2000,
animateType: 'default',
isVertical: true,
isAutoplay: true,
isLooping: true,
});
islider2.bindMouse();
//不循环 不自动播放
var islider3 = new iSlider({
data: picList,
dom: document.getElementById("non-looping"),
animateType: 'default',
});
islider3.bindMouse();
//滚动dom
var islider4 = new iSlider({
data: domList,
dom: document.getElementById("dom-effect"),
type: 'dom',
animateType: 'default',
isAutoplay: true,
isLooping: true,
});
islider4.bindMouse();
var menu = document.getElementById('menu-select').children;
function clickMenuActive(target) {
for (var i = 0; i < menu.length; i++) {
menu[i].className = '';
}
target.className = 'on';
}
menu[0].onclick = function() {
clickMenuActive(this);
islider1._opts.animateType = this.innerHTML;
islider1.reset();
};
menu[1].onclick = function() {
clickMenuActive(this);
islider1._opts.animateType = this.innerHTML;
islider1.reset();
};
menu[2].onclick = function() {
clickMenuActive(this);
islider1._opts.animateType = this.innerHTML;
islider1.reset();
};
menu[3].onclick = function() {
clickMenuActive(this);
islider1._opts.animateType = this.innerHTML;
islider1.reset();
};
</script>
</body>
</html>JS代码(islider.js):
/** * iSlider * A simple,efficent mobile slider * @Author qbatyqi * * @param{
Object}
opts 参数集 * @param{
Element}
opts.dom 外层元素 Outer wrapper * @param{
Object}
opts.data 数据列表 Content data * Please refer to README 请参考README * @class */
var iSlider = function (opts){
if (!opts.dom){
throw new Error("dom element can not be empty!");
}
if (!opts.data || !opts.data.length){
throw new Error("data must be an array and must have more than one element!");
}
this._opts = opts;
this._setting();
this._renderHTML();
this._bindHandler();
}
;
//setting parameters for slideriSlider.prototype._setting = function (){
var opts = this._opts;
//dom element wrapping pics this.wrap = opts.dom;
//pics data this.data = opts.data;
//default type this.type = opts.type || 'pic';
//default slide direction this.isVertical = opts.isVertical || false;
//Callback function when your finger is moving this.onslide = opts.onslide;
//Callback function when your finger touch the screen this.onslidestart = opts.onslidestart;
//Callback function when the finger move out of the screen this.onslideend = opts.onslideend;
//Callback function when the finger move out of the screen this.onslidechange = opts.onslidechange;
//Slide time gap this.duration = opts.duration || 2000;
//debug mode this.log = opts.isDebug ? function (str){
console.log(str)}
:function (){
}
;
this.axis = this.isVertical ? 'Y':'X';
this.width = this.wrap.clientWidth;
this.height = this.wrap.clientHeight;
this.ratio = this.height / this.width;
this.scale = opts.isVertical ? this.height:this.width;
//start from 0 this.sliderIndex = this.sliderIndex || 0;
if (this.data.length < 2){
this.isLooping = false;
this.isAutoPlay = false;
}
else{
this.isLooping = opts.isLooping || false;
this.isAutoplay = opts.isAutoplay || false;
}
//Autoplay mode if (this.isAutoplay){
this.play();
}
//set Damping function this._setUpDamping();
//set animate Function this._animateFunc = (opts.animateType in this._animateFuncs) ? this._animateFuncs[opts.animateType]:this._animateFuncs['default'];
//stop autoplay when window blur this._setPlayWhenFocus();
}
;
//fixed bug for android deviceiSlider.prototype._setPlayWhenFocus = function(){
var self = this;
window.addEventListener('focus',function(){
self.isAutoplay && self.play();
}
,false);
window.addEventListener('blur',function(){
self.pause();
}
,false);
}
//animate function options/** * animation parmas:* * @param{
Element}
dom 图片的外层<li>容器 Img wrapper * @param{
String}
axis 动画方向 animate direction * @param{
Number}
scale 容器宽度 Outer wrapper * @param{
Number}
i <li>容器index Img wrapper's index * @param{
Number}
offset 滑动距离 move distance */
iSlider.prototype._animateFuncs ={
'default':function (dom,axis,scale,i,offset){
dom.style.webkitTransform = 'translateZ(0) translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)';
}
,'rotate':function (dom,axis,scale,i,offset){
var rotateDirect = (axis == "X") ? "Y":"X";
var absoluteOffset = Math.abs(offset);
var bdColor = window.getComputedStyle(this.wrap.parentNode,null).backgroundColor;
if (this.isVertical){
offset = -offset;
}
this.wrap.style.webkitPerspective = scale * 4;
if (i == 1){
dom.style.zIndex = scale - absoluteOffset;
}
else{
dom.style.zIndex = (offset > 0) ? (1 - i) * absoluteOffset:(i - 1) * absoluteOffset;
}
dom.style.backgroundColor = bdColor || '#333';
dom.style.position = 'absolute';
dom.style.webkitBackfaceVisibility = 'hidden';
dom.style.webkitTransformStyle = 'preserve-3d';
dom.style.webkitTransform = 'rotate' + rotateDirect + '(' + 90 * (offset/scale + i - 1)+ 'deg) translateZ(' + (0.888 * scale/2) + 'px) scale(0.888)';
}
,'flip':function (dom,axis,scale,i,offset){
var rotateDirect = (axis == "X") ? "Y":"X";
var bdColor = window.getComputedStyle(this.wrap.parentNode,null).backgroundColor;
if (this.isVertical){
offset = -offset;
}
this.wrap.style.webkitPerspective = scale * 4;
if (offset > 0){
dom.style.visibility = (i > 1) ? 'hidden':'visible';
}
else{
dom.style.visibility = (i < 1) ? 'hidden':'visible';
}
dom.style.backgroundColor = bdColor || '#333';
dom.style.position = 'absolute';
dom.style.webkitBackfaceVisibility = 'hidden';
dom.style.webkitTransform = 'translateZ('+ (scale/2) +'px) rotate' + rotateDirect + '(' + 180 * (offset/scale + i - 1)+ 'deg) scale(0.875)';
}
,'depth':function (dom,axis,scale,i,offset){
var rotateDirect = (axis == "X") ? "Y":"X";
var zoomScale = (4 - Math.abs(i - 1)) * 0.15;
this.wrap.style.webkitPerspective = scale * 4;
if (i == 1){
dom.style.zIndex = 100;
}
else{
dom.style.zIndex = (offset > 0) ? (1 - i):(i - 1);
}
dom.style.webkitTransform = 'scale('+ zoomScale + ','+ zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)';
}
,'tear':function (dom,axis,scale,i,offset){
var rotateDirect = (axis == "X") ? "Y":"X";
var zoomScale = 1 - (Math.abs(i - 1) * 0.2);
this.wrap.style.webkitPerspective = scale * 4;
if (i == 1){
dom.style.zIndex = 100;
}
else{
dom.style.zIndex = (offset > 0) ? (1 - i):(i - 1);
}
dom.style.webkitTransform = 'scale('+ zoomScale + ','+ zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)';
}
}
//enable damping when slider meet the edgeiSlider.prototype._setUpDamping = function (){
var oneIn2 = this.scale >> 1;
var oneIn4 = oneIn2 >> 1;
var oneIn16 = oneIn4 >> 2;
this._damping = function (distance){
var dis = Math.abs(distance);
var result;
if (dis < oneIn2){
result = dis >> 1;
}
else if (dis < oneIn2 + oneIn4){
result = oneIn4 + ((dis - oneIn2) >> 2);
}
else{
result = oneIn4 + oneIn16 + ((dis - oneIn2 - oneIn4) >> 3);
}
return distance > 0 ? result:-result;
}
;
}
;
//render single item html by idxiSlider.prototype._renderItem = function (i){
var item,html;
var len = this.data.length;
if (!this.isLooping){
item = this.data[i] ||{
empty:true}
;
}
else{
if (i < 0){
item = this.data[len + i];
}
else if (i > len - 1){
item = this.data[i - len];
}
else{
item = this.data[i];
}
}
if (item.empty){
return '';
}
if (this.type === 'pic'){
html = item.height / item.width > this.ratio ? '<img height="' + this.height + '" src="' + item.content + '">':'<img width="' + this.width + '" src="' + item.content + '">';
}
else if (this.type === 'dom'){
html = '<div style="height:' + item.height + ';
width:' + item.width + ';
">' + item.content + '</div>';
}
else if (this.type === 'overspread'){
html = this.ratio < 1 ? '<div style="height:100%;
width:100%;
background:url(' + item.content + ') center no-repeat;
background-size:' + this.width + 'px auto;
"></div>':'<div style="height:100%;
width:100%;
background:url(' + item.content + ') center no-repeat;
background-size:auto ' + this.height + 'px;
"></div>';
}
return html;
}
;
//render list htmliSlider.prototype._renderHTML = function (){
var outer;
if (this.outer){
//used for reset this.outer.innerHTML = '';
outer = this.outer;
}
else{
//used for initialization outer = document.createElement('ul');
}
//ul width equels to div#canvas width outer.style.width = this.width + 'px';
outer.style.height = this.height + 'px';
//storage li elements,only store 3 elements to reduce memory usage this.els = [];
for (var i = 0;
i < 3;
i++){
var li = document.createElement('li');
li.style.width = this.width + 'px';
li.style.height = this.height + 'px';
//prepare style animation this._animateFunc(li,this.axis,this.scale,i,0);
this.els.push(li);
outer.appendChild(li);
if (this.isVertical && (this._opts.animateType == 'rotate' || this._opts.animateType == 'flip')){
li.innerHTML = this._renderItem(1 - i + this.sliderIndex);
}
else{
li.innerHTML = this._renderItem(i - 1 + this.sliderIndex);
}
}
//append ul to div#canvas if (!this.outer){
this.outer = outer;
this.wrap.appendChild(outer);
}
}
;
//logical slider,control left or rightiSlider.prototype._slide = function (n){
var data = this.data;
var els = this.els;
var idx = this.sliderIndex + n;
if (data[idx]){
this.sliderIndex = idx;
}
else{
if (this.isLooping){
this.sliderIndex = n > 0 ? 0:data.length - 1;
}
else{
n = 0;
}
}
this.log('pic idx:' + this.sliderIndex);
var sEle;
if ( this.isVertical && (this._opts.animateType == 'rotate' || this._opts.animateType == 'flip')){
if (n > 0){
sEle = els.pop();
els.unshift(sEle);
}
else if (n < 0){
sEle = els.shift();
els.push(sEle);
}
}
else{
if (n > 0){
sEle = els.shift();
els.push(sEle);
}
else if (n < 0){
sEle = els.pop();
els.unshift(sEle);
}
}
if (n !== 0){
sEle.innerHTML = this._renderItem(idx + n);
sEle.style.webkitTransition = 'none';
sEle.style.visibility = 'hidden';
setTimeout(function(){
sEle.style.visibility = 'visible';
}
,200);
this.onslidechange && this.onslidechange(this.sliderIndex);
}
for (var i = 0;
i < 3;
i++){
if (els[i] !== sEle){
els[i].style.webkitTransition = 'all .3s ease';
}
this._animateFunc(els[i],this.axis,this.scale,i,0);
}
if (this.isAutoplay){
if (this.sliderIndex === data.length - 1 && !this.isLooping){
this.pause();
}
}
}
;
//bind all event handleriSlider.prototype._bindHandler = function (){
var self = this;
var scaleW = self.scaleW;
var outer = self.outer;
var len = self.data.length;
var startHandler = function (evt){
self.pause();
self.onslidestart && self.onslidestart();
self.log('Event:beforeslide');
self.startTime = new Date().getTime();
self.startX = evt.targetTouches[0].pageX;
self.startY = evt.targetTouches[0].pageY;
var target = evt.target;
while (target.nodeName != 'LI' && target.nodeName != 'BODY'){
target = target.parentNode;
}
self.target = target;
}
;
var moveHandler = function (evt){
evt.preventDefault();
self.onslide && self.onslide();
self.log('Event:onslide');
var axis = self.axis;
var offset = evt.targetTouches[0]['page' + axis] - self['start' + axis];
if (!self.isLooping){
if (offset > 0 && self.sliderIndex === 0 || offset < 0 && self.sliderIndex === self.data.length - 1){
offset = self._damping(offset);
}
}
for (var i = 0;
i < 3;
i++){
var item = self.els[i];
item.style.webkitTransition = 'all 0s';
self._animateFunc(item,axis,self.scale,i,offset);
}
self.offset = offset;
}
;
var endHandler = function (evt){
evt.preventDefault();
var boundary = self.scale / 2;
var metric = self.offset;
var endTime = new Date().getTime();
//a quick slide time must under 300ms //a quick slide should also slide at least 14 px boundary = endTime - self.startTime > 300 ? boundary:14;
if (metric >= boundary){
self._slide(-1);
}
else if (metric < -boundary){
self._slide(1);
}
else{
self._slide(0);
}
self.isAutoplay && self.play();
self.offset = 0;
self.onslideend && self.onslideend();
self.log('Event:afterslide');
}
;
var orientationchangeHandler = function (evt){
setTimeout(function(){
self.reset();
self.log('Event:orientationchange');
}
,100);
}
;
outer.addEventListener('touchstart',startHandler);
outer.addEventListener('touchmove',moveHandler);
outer.addEventListener('touchend',endHandler);
window.addEventListener('orientationchange',orientationchangeHandler);
}
;
iSlider.prototype.reset = function (){
this.pause();
this._setting();
this._renderHTML();
this.isAutoplay && this.play();
}
;
//enable autoplayiSlider.prototype.play = function (){
var self = this;
var duration = this.duration;
clearInterval(this.autoPlayTimer);
this.autoPlayTimer = setInterval(function (){
self._slide(1);
}
,duration);
}
;
//pause autoplayiSlider.prototype.pause = function (){
clearInterval(this.autoPlayTimer);
}
;
//plugin extendiSlider.prototype.extend = function(plugin){
var fn = iSlider.prototype;
Object.keys(plugin).forEach(function(property){
Object.defineProperty(fn,property,Object.getOwnPropertyDescriptor( plugin,property ) );
}
)}
CSS代码(zzsc.css):
/* MeyerWeb Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;}
/* Base text styles */
body{padding:10px 50px 0 0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;color:#232323;background-color:#FFF;margin:0;line-height:1.8em;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,h5,h6{color:#232323;margin:36px 0 10px;}
p,ul,ol,table,dl{/*margin:0 0 22px;*/
}
h1,h2,h3{font-family:Arvo,Monaco,serif;line-height:1.3;font-weight:normal;}
h1,h2,h3{display:block;border-bottom:1px solid #ccc;padding-bottom:5px;}
h1{font-size:30px;}
h2{font-size:24px;}
h3{font-size:18px;}
h4,h5,h6{font-family:Arvo,Monaco,serif;font-weight:700;}
a{color:#C30000;font-weight:200;text-decoration:none;}
a:hover{text-decoration:underline;}
a small{font-size:12px;}
em{font-style:italic;}
strong{font-weight:700;}
ul{list-style:inside;/*padding-left:25px;*/
}
ol{list-style:decimal inside;/*padding-left:20px;*/
}
blockquote{margin:0;padding:0 0 0 20px;font-style:italic;}
dl,dt,dd,dl p{font-color:#444;}
dl dt{font-weight:bold;}
dl dd{padding-left:20px;font-style:italic;}
dl p{padding-left:20px;font-style:italic;}
hr{border:0;background:#ccc;height:1px;margin:0 0 24px;}
/* Images */
img{position:relative;margin:0 auto;max-width:650px;padding:5px;margin:10px 0 32px 0;border:1px solid #ccc;}
p img{display:inline;margin:0;padding:0;vertical-align:middle;text-align:center;border:none;}
/* Code blocks */
code,pre{font-family:Monaco,"Bitstream Vera Sans Mono","Lucida Console",Terminal,monospace;color:#000;font-size:14px;}
pre{padding:4px 12px;background:#FDFEFB;border-radius:4px;border:1px solid #D7D8C8;overflow:auto;overflow-y:hidden;margin-bottom:32px;}
/* Tables */
table{width:100%;}
table{border:1px solid #ccc;margin-bottom:32px;text-align:left;}
th{font-family:'Arvo',Helvetica,Arial,sans-serif;font-size:18px;font-weight:normal;padding:10px;background:#232323;color:#FDFEFB;}
td{padding:10px;background:#ccc;}
/* Wrapper */
.wrapper{width:960px;}
/* Header */
header{background-color:#171717;color:#FDFDFB;width:170px;float:left;position:fixed;border:1px solid #000;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;padding:34px 25px 22px 50px;margin:30px 25px 0 0;-webkit-font-smoothing:antialiased;}
p.header{font-size:16px;}
h1.header{font-family:Arvo,sans-serif;font-size:30px;font-weight:300;line-height:1.3em;border-bottom:none;margin-top:0;}
h1.header,a.header,a.name,header a{color:#fff;}
a.header{text-decoration:underline;}
a.name{white-space:nowrap;}
header ul{list-style:none;padding:0;}
header li{list-style-type:none;width:132px;height:15px;margin-bottom:12px;line-height:1em;padding:6px 6px 6px 7px;background:#AF0011;background:-moz-linear-gradient(top,#AF0011 0%,#820011 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f8f8f8),color-stop(100%,#dddddd));background:-webkit-linear-gradient(top,#AF0011 0%,#820011 100%);background:-o-linear-gradient(top,#AF0011 0%,#820011 100%);background:-ms-linear-gradient(top,#AF0011 0%,#820011 100%);background:linear-gradient(top,#AF0011 0%,#820011 100%);border-radius:4px;border:1px solid #0D0D0D;-webkit-box-shadow:inset 0px 1px 1px 0 rgba(233,2,38,1);box-shadow:inset 0px 1px 1px 0 rgba(233,2,38,1);}
header li:hover{background:#C3001D;background:-moz-linear-gradient(top,#C3001D 0%,#950119 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f8f8f8),color-stop(100%,#dddddd));background:-webkit-linear-gradient(top,#C3001D 0%,#950119 100%);background:-o-linear-gradient(top,#C3001D 0%,#950119 100%);background:-ms-linear-gradient(top,#C3001D 0%,#950119 100%);background:linear-gradient(top,#C3001D 0%,#950119 100%);}
a.buttons{-webkit-font-smoothing:antialiased;background:url(../images/arrow-down.png) no-repeat;font-weight:normal;text-shadow:rgba(0,0,0,0.4) 0 -1px 0;padding:2px 2px 2px 22px;height:30px;}
a.github{background:url(../images/octocat-small.png) no-repeat 1px;}
a.buttons:hover{color:#fff;text-decoration:none;}
/* Section - for main page content */
section{width:650px;float:right;padding-bottom:50px;}
/* Footer */
footer{width:170px;float:left;position:fixed;bottom:10px;padding-left:50px;}
@media print,screen and (max-width:960px){div.wrapper{width:auto;margin:0;}
header,section,footer{float:none;position:static;width:auto;}
footer{border-top:1px solid #ccc;margin:0 84px 0 50px;padding:0;}
header{padding-right:320px;}
section{padding:20px 84px 20px 50px;margin:0 0 20px;}
header a small{display:inline;}
header ul{position:absolute;right:130px;top:84px;}
}
@media print,screen and (max-width:720px){body{word-wrap:break-word;}
header{padding:10px 20px 0;margin-right:0;}
section{padding:10px 0 10px 20px;margin:0 0 30px;}
footer{margin:0 0 0 30px;}
header ul,header p.view{position:static;}
}
@media print,screen and (max-width:480px){header ul li.download{display:none;}
footer{margin:0 0 0 20px;}
footer a{display:block;}
}
@media print{body{padding:0.4in;font-size:12pt;color:#444;}
}
#iSlider-effect-wrapper{height:517.5px;width:375px;margin:0 auto;background:url('../images/bg_1.png') no-repeat top center;background-size:100%;overflow:hidden;position:relative;}
.iSlider-effect{height:310.5px;width:225px;overflow:hidden;position:relative;margin:0 auto;border:1px solid #000000;}
.iSlider-effect ul{list-style:none;padding:0;margin:0;height:100%;overflow:hidden;}
.iSlider-effect li{position:absolute;margin:0;padding:0;height:100%;overflow:hidden;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;list-style:none;}
.iSlider-effect ul li img{max-width:100%;max-height:100%;margin:0;padding:0;}
.iSlider-effect div{background-color:#ffffff;padding:3px;}
#menu-select{margin-top:10px;text-align:center;}
#menu-select span{display:inline-block;border:2px solid #777;border-radius:5px;padding:5px;margin:5px;width:60px;cursor:pointer;}
#animation-effect{border:0;width:204px;height:357px;background-color:#000000;margin-top:55px;}
#animation-effect ul li img{border:0;}
#menu-select span:hover{background-color:#e74c3c;}
#menu-select span.on{background-color:#e74c3c;}
分享到QQ
分享到微博
微信扫一扫
