js实现轮播

最新推荐文章于 2023-08-09 23:10:39 发布

测试员辣妈

最新推荐文章于 2023-08-09 23:10:39 发布

阅读量213

点赞数

分类专栏： js 文章标签： js 轮播

本文链接：https://blog.csdn.net/hj0903/article/details/86527593

版权

这篇博客展示了如何使用JavaScript从头实现一个图片轮播功能，包括自动滚动、鼠标悬停暂停、点击箭头切换图片等效果。通过HTML、CSS和JavaScript代码的结合，创建了一个简单的轮播图组件，适用于网页中展示多个图片的场景。

摘要由CSDN通过智能技术生成

参考博文：

https://blog.csdn.net/lgx1134569285/article/details/80511795

在原博文基础上进行了一些修改，使其实现其功能

实现效果：
1.自动滚动播放
2.鼠标移上去停止播放

3.点击左右箭头滚动播放

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>轮播图</title>
   <style>
       *{
           margin:0;
           padding:0;
       }
       .box{
           width: 500px;
           height: 300px;
           border: 1px solid #ccc;
           margin: 100px auto;
           padding: 5px;
       }
       .inner{
           width: 500px;
           height: 300px;
           position: relative;
           overflow: hidden;
       }
       .inner img{
           width: 500px;
           height: 300px;
           vertical-align: top;
       }
       ul{
           width: 1000%;
           position: absolute;
           list-style: none;
           left: 0;
           top: 0;
       }
       .inner li{
           float: left;
       }
       ol{
           position: absolute;
           height: 20px;
           right: 20px;
           bottom: 20px;
           text-align: center;
           padding: 5px;
       }
       ol li{
           display

最低0.47元/天解锁文章

测试员辣妈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现轮播

参考博文：https://blog.csdn.net/lgx1134569285/article/details/80511795在原博文基础上进行了一些修改，使其实现其功能实现效果：1.自动滚动播放2.鼠标移上去停止播放3.点击左右箭头滚动播放&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt...
复制链接

扫一扫