这是一个叫photoswipe的插件,挺好用的,平滑滑动,上一张下一张,点击放大等功能
这是我自己精简了一下的.里面有Demo,你自己看吧.
<style>*{ 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>
先说下实现的思路：
1 页面布局，一堆等待滚动选择的列表 先实现一个竖排的列表，触屏能滚动，也就是说先不考虑选择的问题 写一个固定高度的盒子 把一堆待选择的列表放里面 触屏滚动大概就实现了 简单代码：
<div style="height:300px" id=“box”>
<li style="height:100px"></li>
<li style="height:100px"></li>
...
</div>
2: 滚动选择 第一步监控触屏滚动 onmousedown onmousemove onmouseup 监控鼠标触屏在box里的上下移动距离 也就是说滚动屏幕了多远 然后box scrollTop定位的减去移动的距离也就可以算出当前box距离顶部的距离 例如 mousemove -300px 原来的scrollTop为0 那现在0-（-300）=300px 那么每个li 100px 然后定位当前选中的 li标签 300/100 = 3 当前为选中了 列表中的第三个
3 以上只是提供了一个简单的实现思路 下面是别人的案例你可以看下 大体上就是这种思路实现的
网页链接
