JavaScript实现旋转轮播图的示例代码分享

来源：动视网责编：小OO 时间：2020-11-27 20:14:14

JavaScript实现旋转轮播图的示例代码分享

最近一直在学习JavaScript，然后看到旋转轮播图的案例，就尝试着用js做了一个简单的轮播图，因为无法显示动态效果，所以就放个截图。这个效果是这样的：一共有7张图片，它们会自动地向左滑动，然后左右箭头也可以控制轮播图的左滑和右滑，同时，如果鼠标停在图片上，那么轮播图会停止自动滑动，当鼠标移开时，将会继续向左轮播。首先，我这里封装了两个函数（因为暂且还没有学jQuery，所以用了封装函数的方法来实现），第一个函数是$函数，调用可以获取html中的元素，代码如下：第二个函数是一个动画函数，用json实现多条样式的动态改变，从而达到一个动画效果，代码如下： `。；接下来就要写html的部分了，因为只有几张图片，所以html的部分很简单。

推荐度：

点击下载本文 文档为doc格式

导读最近一直在学习JavaScript，然后看到旋转轮播图的案例，就尝试着用js做了一个简单的轮播图，因为无法显示动态效果，所以就放个截图。这个效果是这样的：一共有7张图片，它们会自动地向左滑动，然后左右箭头也可以控制轮播图的左滑和右滑，同时，如果鼠标停在图片上，那么轮播图会停止自动滑动，当鼠标移开时，将会继续向左轮播。首先，我这里封装了两个函数（因为暂且还没有学jQuery，所以用了封装函数的方法来实现），第一个函数是$函数，调用可以获取html中的元素，代码如下：第二个函数是一个动画函数，用json实现多条样式的动态改变，从而达到一个动画效果，代码如下： `。；接下来就要写html的部分了，因为只有几张图片，所以html的部分很简单。

这篇文章主要为大家详细介绍了JavaScript实现旋转轮播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

最近一直在学习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实现旋转轮播图的示例代码分享

推荐度：

点击下载本文 文档为doc格式

标签：图片分享 js

热门焦点

JavaScript实现旋转轮播图的示例代码分享

JavaScript实现旋转轮播图的示例代码分享

JavaScript实现旋转轮播图的示例代码分享

最新推荐

猜你喜欢

热门推荐