var arrowImageHeight = 35// Height of arrow image in pixels
var displayWaitMessage=true// Display a please wait message while images are loading?
var previewImage = false
var previewImageParent = false
var slideSpeed = 0
var previewImagePane = false
var slideEndMarker = false
var galleryContainer = false
var imageGalleryCaptions = new Array()
function getTopPos(inputObj)
{
var returnValue = inputObj.offsetTop
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop
return returnValue
}
function getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft
return returnValue
}
function showPreview(newSrc,imageIndex)
{
if(!previewImage){
var images = document.getElementById('previewPane').getElementsByTagName('IMG')
if(images.length>0){
previewImage = images[0]
}else{
previewImage = document.createElement('IMG')
document.getElementById('previewPane').appendChild(previewImage)
}
}
if(displayWaitMessage){
document.getElementById('waitMessage').style.display='inline'
}
document.getElementById('largeImageCaption').style.display='none'
previewImage.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1)}
previewImage.src = newSrc
}
function hideWaitMessageAndShowCaption(imageIndex)
{
document.getElementById('waitMessage').style.display='none'
document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex]
document.getElementById('largeImageCaption').style.display='block'
}
function initSlide(e)
{
if(document.all)e = event
if(this.src.indexOf('over')<0)this.src = this.src.replace('.gif','-over.gif')
slideSpeed = e.clientY + Math.max(document.body.scrollTop,document.documentElement.scrollTop) - getTopPos(this)
if(this.src.indexOf('down')>=0){
slideSpeed = (slideSpeed)*-1
}else{
slideSpeed = arrowImageHeight - slideSpeed
}
slideSpeed = Math.round(slideSpeed * 10 / arrowImageHeight)
}
function stopSlide()
{
slideSpeed = 0
this.src = this.src.replace('-over','')
}
function slidePreviewPane()
{
if(slideSpeed!=0){
var topPos = previewImagePane.style.top.replace(/[^\-0-9]/g,'')/1
if(slideSpeed<0 &&slideEndMarker.offsetTop<(previewImageParent.offsetHeight - topPos)){
slideSpeed=0
}
topPos = topPos + slideSpeed
if(topPos>0)topPos=0
previewImagePane.style.top = topPos + 'px'
}
setTimeout('slidePreviewPane()',30)
}
function revealThumbnail()
{
this.style.filter = 'alpha(opacity=100)'
this.style.opacity = 1
}
function hideThumbnail()
{
this.style.filter = 'alpha(opacity=50)'
this.style.opacity = 0.5
}
function initGalleryScript()
{
previewImageParent = document.getElementById('theImages')
previewImagePane = document.getElementById('theImages').getElementsByTagName('DIV')[0]
previewImagePane.style.top = '0px'
galleryContainer = document.getElementById('galleryContainer')
var images = previewImagePane.getElementsByTagName('IMG')
for(var no=0no<images.lengthno++){
images[no].onmouseover = revealThumbnail
images[no].onmouseout = hideThumbnail
}
slideEndMarker = document.getElementById('slideEnd')
document.getElementById('arrow_up_image').onmousemove = initSlide
document.getElementById('arrow_up_image').onmouseout = stopSlide
document.getElementById('arrow_down_image').onmousemove = initSlide
document.getElementById('arrow_down_image').onmouseout = stopSlide
var divs = previewImageParent.getElementsByTagName('DIV')
for(var no=0no<divs.lengthno++){
if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML
}
slidePreviewPane()
}
window.onload = initGalleryScript
<!DOCTYPE html><html lange="en">
<head>
<title>点击左右按钮图片横向滚动</title>
<meta charset=utf-8" />
<style type="text/css">
* { margin:0padding:0}
body { font-size:12px}
.box {height:66pxfloat:leftwidth:440pxoverflow: hiddenposition:relative}
.box
li { display:blockfloat:leftmargin-left:5pxmargin-right:5px
width:100px
height:70pxbackground:#BBBfont-size:50pxcolor:#cccline-height:66pxtext-decoration:nonetext-align:center
cursor:pointer}
.box li:hover { color:#999}
.box li.active { background-position:-174px 0color:#555cursor:default}
a.prev,
a.next {background:url(http://www.shengyijie.net/images/left_02.png)
no-repeat 0 0display:blockwidth:23pxheight:43pxfloat:left
margin:15px 0 0 0cursor:pointer}
a.next { background-image:url(http://www.shengyijie.net/images/right_02.png)}
.scroll_list{ width:10000emposition:absolute}
</style>
<!-- 引入jQuery -->
<script src="http://jt.875.cn/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var page= 1
var i = 4//每版四个图片
//向右滚动
$(".next").click(function(){ //点击事件
var v_wrap = $(this).parents(".scroll")// 根据当前点击的元素获取到父元素
var v_show = v_wrap.find(".scroll_list")//找到视频展示的区域
var v_cont = v_wrap.find(".box")//找到视频展示区域的外围区域
var v_width = v_cont.width()
var len = v_show.find("li").length//我的视频图片个数
var page_count = Math.ceil(len/i)//只要不是整数，就往大的方向取最小的整数
if(!v_show.is(":animated")){
if(page == page_count){
v_show.animate({left:'0px'},"slow")
page =1
}else{
v_show.animate({left:'-='+v_width},"slow")
page++
}
}
})
//向左滚动
$(".prev").click(function(){ //点击事件
var v_wrap = $(this).parents(".scroll")// 根据当前点击的元素获取到父元素
var v_show = v_wrap.find(".scroll_list")//找到视频展示的区域
var v_cont = v_wrap.find(".box")//找到视频展示区域的外围区域
var v_width = v_cont.width()
var len = v_show.find("li").length//我的视频图片个数
var page_count = Math.ceil(len/i)//只要不是整数，就往大的方向取最小的整数
if(!v_show.is(":animated")){
if(page == 1){
v_show.animate({left:'-='+ v_width*(page_count-1)},"slow")
page =page_count
}else{
v_show.animate({left:'+='+ v_width},"slow")
page--
}
}
})
})
</script>
</head>
<body>
<!-- 例子 -->
<div class="scroll" style="margin:0 autowidth:550px">
<!-- "prev page" link -->
<a class="prev" href="#"></a>
<div class="box">
<div class="scroll_list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
</div>
<!-- "next page" link -->
<a class="next" href="#"></a>
</div>
</body>
</html>
目标描述：多个图片排列下来，按右边的小按钮，抵达相应位置，鼠标滑动，抵达下一图，或者上一图知识点：onmousewheel，addEventListener，scrollTo，setTimeout
过程：
1.body 宽，高钉死，100vw，100vh，overflow：hidden 使得不出现滚动条，不然不好看
2.图片放进去，排起来，（注意：默认空隙的处理，可以使用flex布局，空隙就不见了）
3.制作相对于视窗的按钮，几张图片就几个按钮，（position: fixed计算一下高度，可以利用calc计算top使得上下居中）
4.美化一下，css写写
5.先写简单的按钮事件
6.写监听滑动事件(onmousewheel在火狐无效，DOMMouseScroll只在火狐有效)
react在componentDidMount的时候监听
7.补充写一下火狐的
9.测试检查一下。
完成啦，啦啦啦～
我的截图：
缺点：这里我是一直对页面进行监听，导致滑动过快对时候动画效果开始执行对时间延后。体现为滑动对轻，整个就流畅一点。
ps：写这种带计算带页面，我觉得是考验思维的，你可以对这里的知识点不熟练，但是你必须得能理解每一步的加加减减。
