时间：2021-07-01 10:21:17 帮助过：4人阅读
最近一直在学习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是部分啦，代码也很简单，理清楚就好
以上就是JavaScript实现旋转轮播图的示例代码分享的详细内容，更多请关注Gxl网其它相关文章！