最近一直在学习JavaScript，然后看到旋转轮播图的案例，就尝试着用js做了一个简单的轮播图，因为无法显示动态效果，所以就放个截图：
这个效果是这样的：一共有7张图片，它们会自动地向左滑动，然后左右箭头也可以控制轮播图的左滑和右滑，同时，如果鼠标停在图片上，那么轮播图会停止自动滑动，当鼠标移开时，将会继续向左轮播。
首先，我这里封装了两个函数（因为暂且还没有学jQuery，所以用了封装函数的方法来实现），第一个函数是$函数，调用可以获取html中的元素，代码如下：
第二个函数是一个动画函数，用json实现多条样式的动态改变，从而达到一个动画效果，代码如下： `
接下来就要写html的部分了，因为只有几张图片，所以html的部分很简单：
<body> <p class="box"> <p class="content"> <ul> <li><a href="#"><img src="./images/1.jpg"></a></li> <li><a href="#"><img src="./images/2.jpg"></a></li> <li><a href="#"><img src="./images/3.jpg"></a></li> <li><a href="#"><img src="./images/4.jpg" class="current"></a></li> <li><a href="#"><img src="./images/5.jpg"></a></li> <li><a href="#"><img src="./images/6.jpg"></a></li> <li><a href="#"><img src="./images/7.jpg"></a></li> </ul> </p> <p class="control"> <a href="javascript:;" id="prev"></a> <a href="javascript:;" id="next"></a> </p> </p> </body>
css样式的部分也不多做叙述。
下面就是JS是部分啦，代码也很简单，理清楚就好
下载本文