*{ margin:0padding:0list-style:none}
#box{ width:534pxheight:300pxposition:relativemargin:50px autooverflow:hidden}
#box ul{ position:absoluteleft:0top:0}
#box ul li{ float:leftwidth:534pxheight:300px}
#box ul li img{ height:300px}
#box a{ transition:.2s all ease}
#box .prev,#box .next{position:absolute top:50%z-index:2height:80pxline-height:80pxbackground:rgba(0,0,0,0.6)color:#fffwidth:80pxtext-align:centermargin-top:-40pxdisplay:-none}
#box .prev{ left:0}
#box .next{ right:0}
#box a:hover{ background:rgba(255,0,0,0.4)}
#box ol{ position:absolutewidth:120pxleft:50%margin-left:-60pxbottom:10px}
#box ol li{ width:20pxheight:20pxbackground:#f60float:leftmargin:2pxtext-align:centertext-indent:-9999pxborder-radius:50%}
#box ol li.active{ background:#fff}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box')
var oPrev=document.getElementById('prev')
var oNext=document.getElementById('next')
var oUl=oBox.getElementsByTagName('ul')[0]
var aLi=oUl.children
var oOl=oBox.getElementsByTagName('ol')[0]
var aBtn=oOl.children
var timer = null
var iNow=0
var left=0
//复制一份内容
oUl.innerHTML+=oUl.innerHTML
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px'
var W=oUl.offsetWidth/2
//选项卡
for(var i=0i<aBtn.lengthi++){
(function(index){
aBtn[i].onclick=function(){
if(iNow%aBtn.length==aBtn.length-1 &&index==0){
iNow++
}
if(iNow%aBtn.length==0 &&index==aBtn.length-1){
iNow--
}
iNow=Math.floor(iNow/aBtn.length)*aBtn.length+index
tab()
}
})(i)
}
function tab(){
for(var i=0i<aBtn.lengthi++){
aBtn[i].className=''
}
if(iNow<0){
aBtn[(iNow%aBtn.length+aBtn.length)%aBtn.length].className='active'
}else{
aBtn[iNow%aBtn.length].className='active'
}
//oUl.style.left=-iNow*aLi[i].offsetWidth+'px'
move(oUl,-iNow*aLi[i].offsetWidth)
}
//next
oNext.onclick=function(){
iNow++
tab()
//document.title=iNow
}
oPrev.onclick=function(){
iNow--
tab()
//document.title=iNow
}
oNext.onmouseleave = oPrev.onmouseleave = function(){
timer = setInterval(function(){
tab()
iNow++
},2000)
}
oNext.onmouseenter = oPrev.onmouseenter = function(){
clearInterval(timer)
}
oNext.onclick()
clearInterval(timer)
timer = setInterval(oNext.onclick,2000)
function move(obj,iTarget){
var count=Math.round(500/30)
var start=left
var dis=iTarget-start
var n=0
clearInterval(obj.timer)
obj.timer=setInterval(function(){
n++
var a=1-n/count
left=start+dis*(1-Math.pow(a,3))
if(left<0){
obj.style.left=left%W+'px'
}else{
obj.style.left=(left%W-W)%W+'px'
}
if(n==count){
clearInterval(obj.timer)
}
},30)
}
}
</script>
</head>
<body>
<div id="box">
<a href="javascript:" class="prev" id="prev">prev</a>
<a href="javascript:" class="next" id="next">next</a>
<ul>
<li><img src="img/0.jpg"></li>
<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>
</ul>
<ol>
<li class="active">0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
这是一个叫photoswipe的插件,挺好用的,平滑滑动,上一张下一张,点击放大等功能
这是我自己精简了一下的.里面有Demo,你自己看吧.
