效果图：
这次做的轮播图，值得注意的主要功能有：
1、滑动动画切换效果(无缝衔接)；
2、标签和略缩图点击切换效果(自适应性滑动，不同距离滑动速度不同)；
3、自动循环播放；
4、鼠标悬浮在轮播图上时停止自动播放。
难点：
1、循环滑块动画切换效果，主要的算法也集中在这里。我的方法是前后多放一张图，然后在切换结束后的一刻瞬间改变参数，这样就不会有一闪而过同时还能无缝衔接的效果；
2、在轮播图滑动过程中，不应该再响应鼠标点击，这个功能用flag来处理；
3、标签和略缩图自适应性切换时，切换速度是根据当前标签和已有标签之间的距离变的，本来想在闭包中多调用几次next_pic，但是由于带定时器的函数总是最后执行，故这种方法pass，解决方法是另外写一个自适应性函数。
下面上代码：
html：
<!DOCTYPE html>
<html>
<head>
<title>风景轮播图</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="test7.css">
</head>
<body>
<div id="container">
<div id="wrap" style="left: -600px;">
<img src="./images/5.png" class="img-wrap">
<img src="./images/1.png" class="img-wrap">
<img src="./images/2.png" class="img-wrap">
<img src="./images/3.png" class="img-wrap">
<img src="./images/4.png" class="img-wrap">
<img src="./images/5.png" class="img-wrap">
<img src="./images/1.png" class="img-wrap">
</div>
<div id="tag-bkg">
<div class="tag tag-off">1</div>
<div class=
最低0.47元/天 解锁文章
6488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
