项目介绍

图片轮播效果在网页中的使用频率越来越高，特别适用于网站首页展示重要事项或广告时使用，得到了各网站的普遍采纳。目前网络上也有越来越多的基于JavaScript框架的轮播组件可供我们选择，这样我们只需要设定好轮播图片的地址和核心参数后即可完成一个轮播的效果。而本项目则使用原生JavaScript，不借助于任何组件和框架来完成的一个图片轮播效果，如图11-5所示。

图11-5 图片轮播效果

开发思路

相信大家通过对各轮播效果的观察，会发现其实质就是几张相同尺寸的图片，在一定的时间内不停地进行平滑的切换显示而已。所以要实现这样的效果，我们首先必须要解决的问题就是图片的切换，进而再解决平滑切换，最后再实现手工切换效果。所以我们将本项目的开发思路进行一个分解，一步一步来实现其效果。

首先，我们先来解决固定时间内图片切换的问题，单纯就这一问题来说，思路非常简单，就是设置一个定时器，然后在固定时间周期内改变图片的地址，从而实现类似轮播的效果。但是这种方案的缺点在于图片是瞬间变化的，并不会看到平滑移动的过程。所以无法从根本上解决视觉效果和用户体验。

那么接下来我们来看看第二种解决方案，通过设定一组无序列表，将N张轮播的图片附加于列表项里面，并保持该列表水平展示。然后在该列表的外面套上一个DIV容器，并设置该窗口的宽度和高度刚好是一张图片的高度与宽度。进而设置该DIV的overflow: hidden将无法展示的其他图片隐藏起来。然后再使用绝对定位的方式在固定的时间内将列表向左或向右移动一张图片的大小，进而实现切换。但是光有这样的切换，我们看上去的效果跟上面的这种直接修改图片地址的视觉效果是类似的，就是图片瞬间就切换了。所以我们还需要控制图片切换时的移动速度，可以给定一个移动的时间，而不是瞬间移动，这样的实现了类似平滑移动的效果。

实现平滑移动的效果有两种可供选择的方案：一种是使用定时器，实现极短的时间移动极端的距离，多移动一些次数进而实现平滑。比如图的宽度是800像素，我们可以实现每5毫秒移动5个像素，移动160次即可。另外一种方案，我们可以使用CSS的Transition来实现平滑移动，只需要设定Transition的关键属性和移动距离即可。

最后，我们再来看看手工切换图片，这也是图片轮播效果的标配。通过，当我们将鼠标移动到轮播图上时，会在图片上出现一个向左和向右的切换按钮，在图11-5中我们也可以看到该按钮。此时我们直接在上面点击，可以忽略定时器直接对轮播图片进行切换。事实上，要实现这个效果，只需要对已经实现的移动效果进行调用即可。所以，我们在设计时，应该将每一个动作放在单独的函数当中，这样更便于代码的重用。另外一方面，我们可以通过响应该DIV容器的onmouseover和onmouseout事件来对两个切换按钮进行显示和隐藏。这里需要注意一下的是我们不能直接使用:hover伪类来实现鼠标悬停的效果，因为这种悬停效果只能针对其自身的CSS属性进行改变，无法去影响到其他元素。

代码实现

针对第一种解决方案，直接利用定时器对图片的地址进行修改进而实现切换，虽然不够平滑，视觉效果较差，但是也不失为一种简单的解决方案。针对该方案的代码我们不作过多解释，大家直接参考代码即可：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
setInterval(function(){
var myimg = document.getElementById("loopimg");
if (myimg.src.match("videoonline.png")) {
myimg.src = "../image/woniufamily.png";
}
else if (myimg.src.match("woniufamily.png")) {
myimg.src = "../image/snow-night.jpg";
}
else {
myimg.src = "../image/videoonline.png";
}
}, 3000);
</script>
</head>
<body>
<div style="width: 800px; height: 50px; font-size: 30px; margin: auto;">图片轮播展示效果</div>
<div style="width: 800px; height: 450px; margin: auto">
<img src="../image/videoonline.png" id="loopimg" width="800" height="450"/>
</div>
</body>
</html>

上述代码中需要注意的是，通过分支结构的方式来对图片切换比较适用于图片比较少的时候，如果图片较多的话，建议大家使用循环的方式，将所有要进行切换的图片命名为同一个系列，通过不同的序号来进行区分。这样我们在循环中可以直接通过生成一个序号的方式来完成图片地址的修改。这才是比较灵活处理的代码，其简洁度和适用性会更高。

接下来我们继续来看如何实现第二种解决方案：利用列表项并进行位置移动的方式完成轮播效果。首先，我们先将页面的基本元素进行布局，此处我们仍然只设计三张图片，如果图片有更多张，其思路没有任何变化，所以不影响实际效果。布局代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS幻灯代码</title>
<style>
#outer {
width: 800px;
height: 450px;
border: solid 2px red;
margin: 0 auto;
}
#main {
width: 800px;
height: 450px;
overflow: hidden;
position: absolute;
}
img {
width: 800px;
height: 450px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0px;
left: 0px;
width: 2400px;
height: 450px;
}
ul li {
list-style: none;
float: left;
}
#prev {
width: 40px;
height: 60px;
background-color: rgba(160,220,240,0.8);
font-size: 40px;
font-weight: bold;
position: absolute;
left: 10px;
top: 45%;
z-index: 100;
text-align: center;
line-height: 60px;
display: none;
}
#prev:hover {
display: block;
}
#next {
width: 40px;
height: 60px;
background-color: rgba(160,220,240,0.8);
font-size: 40px;
font-weight: bold;
position: absolute;
right: 10px;
top: 45%;
z-index: 100;
text-align: center;
line-height: 60px;
display: none;
}
#next:hover {
display: block;
}
</style>
</head>
<body onload="setInterval(startMove, 5000);">
<div style="width: 800px; height: 50px; font-size: 30px; margin: auto;">
图片轮播展示效果
</div>
<div id="outer">
<div id="main">
<div id="prev" onclick="moveToPrev()"><</div>
<div id="next" onclick="moveToNext()">></div>
<ul id="box" onmouseover="showButton()"

onmouseout="hideButton()">
<li><img src="../image/videoonline.png" /></li>
<li><img src="../image/woniufamily.png" /></li>
<li><img src="../image/snow-night.jpg" /></li>
</ul>
</div>
</div>
</body>
</html>

针对上述的布局代码，需要给大家强调一个小细节。就是我们既然已经使用了在图片容器的响应onmouseover和onmouseout事件让切换按钮的显示和隐藏，为什么还要对两个按钮设置:hover属性继续将其设置为显示状态呢？因为一旦我们把鼠标放到按钮上时，其实同时也响应了图片容器的onmouseout事件，所以如果不额外进行设置，我们将无法让鼠标在按钮上进行点击，因为鼠标一放到按钮上，按钮就会被隐藏。

布局完成后，我们已经可以看到正常在页面中显示了第一张图片，另外两张图片被隐藏。接着我们来实现图片的切换和平滑移动的效果。此处我们先使用定时器的方式来实现，整合后的代码如下，详细解释请参考代码的备注：

以蜗牛之名, 行学习之实

技术博客

项目介绍

开发思路

代码实现