需要实现的效果

样式分析：

2个主要部分，头部的标题和导航部分，和主要的功能实现区域；

1.头部

<div> <h1>动漫视频</h1> <span><</span> <span>></span> </div> <div> <span> </span> <span> </span> <span> </span> </div>

2.功能区域

<div> <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> </ul> </div>

添加样式

<style> #header{ display: inline-block; } #header h1{ display: inline-block; font-size: 32px; padding-left: 20px; } #header span{ width: 30px; height: 30px; display: inline-block; font-size: 23px; cursor:pointer; border: 1px solid #eee; border-radius: 3px; text-align: center; } #header span:hover{ background: #333; color: #fff; } #viewBox{ width: 960px; height: 140px; font-size: 0; overflow: hidden; border: 1px solid #333; } #contentBox{ width: 2880px; position: relative; } #contentBox>li{ width: 200px; height: 100px; background: pink; display: inline-block; font-size: 12px; margin: 20px; } #tips{ display: inline-block; } #tips span{ display: inline-block; width: 20px; height: 20px; border-radius: 20px; text-align: center; line-height: 20px; border: 1px solid #eee; cursor: pointer; } #tips span:hover{ background: #999; color: white; } #tips span.on{ background: black; color: white; } </style>

此处需要注意，因为需要给 contentBox 添加 animate left 方法，所以需要给它的 position : related 才能使 animate left 生效

功能分析：

1.下一页

2.当下一页滚动到最后一页面，，再点击下一页的时候，需要返回到第一页

3.上一页

4.当上一页滚动到第一页，再点击上一页的时候，需要前进到最后一页

5.当点击圆圈的时候，前进到任意一页

功能实现

首先,我们在接下来的功能中常用的一些元素，先赋值给变量

$vBox = $(‘#viewBox‘); /* 可以见到的展示区域 */ $cBox = $(‘#contentBox‘); /* 内容区域 */ vWidth = $vBox.width(); /* 可见区域的宽度 */ cWidth = $cBox.width(); /* 内容区域的宽度 */

然后，我们有5个小功能，下一页(goNext)，回到顶部(goTop)，上一页(goBack)，回到底部(goBotoom)，到任意页(goPage)

1.下一页(goNext)

var vLeft=$cBox.position().left; //内容区域距左侧的距离 $cBox.animate({left: ‘-=‘+vWidth+‘px‘});

2.回到顶部(goTop)

var vLeft=$cBox.position().left; $cBox.animate({left: 0});

3.上一页(goBack)

var vLeft=$cBox.position().left; //内容区域距左侧的距离 $cBox.animate({left: ‘+=‘+vWidth+‘px‘});

4.回到底部(goBotoom)

var vLeft=$cBox.position().left; //内容区域距左侧的距离 $cBox.animate({left: -cWidth+vWidth});

5.到任意页(goPage)

var vLeft=$cBox.position().left; //内容区域距左侧的距离 $cBox.animate({left: -vWidth*page}); //传递一个page参数用来知道需要跳转到第几页

当每个小功能实现后,组合下功能,并绑定功能

var $vBox; var $cBox; var vWidth; var cWidth; $(function () { $vBox = $(‘#viewBox‘); $cBox = $(‘#contentBox‘); vWidth = $vBox.width(); cWidth = $cBox.width(); $(‘#header span:last-child‘).click(function () { go(‘next‘); }) $(‘#header span:nth-child(2)‘).click(function () { go(‘back‘); }) $(‘#tips>span‘).click(function () { var $ThisS=$(this); $ThisS.addClass(‘on‘).siblings().removeClass(); go($ThisS.index()); }) }) function go(page) { var vLeft=$cBox.position().left; if (!$cBox.is(‘:animated‘)){ switch (page){ case ‘next‘: if( vLeft > -cWidth-vLeft ){ $cBox.animate({left: ‘-=‘+vWidth+‘px‘}); }else{ go(‘top‘); } break; case ‘back‘: if( vLeft < 0){ $cBox.animate({left: ‘+=‘+vWidth+‘px‘}); }else{ go(‘bottom‘); } break; case ‘top‘: $cBox.animate({left: 0}); break; case ‘bottom‘: $cBox.animate({left: -cWidth+vWidth}); break; default: $cBox.animate({left: -vWidth*page}); break; } } }