本文主要分享了原生JS实现跑马灯效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧

效果如下：（动态效果可复制代码查看，案例中的图片可自行选择添加）

代码如下：

*{
margin:0;
padding:0;
list-style: none;
}
div{
position: relative;
width: 800px;
height: 200px;
border: 5px solid lightgreen;
margin:10px auto;
overflow: hidden;
}
div ul{
position: absolute;
left:0;
top:0;
}
div ul li{
width: 200px;
height: 200px;
float: left;
}
div ul li img{
width:100%;
height: 100%;
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

• 基于Marquee.js插件实现的跑马灯效果示例
• Javascript实现跑马灯效果的简单实例
• JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）
• JavaScript实现跑马灯抽奖活动实例代码解析与优化（一）
• javascript跑马灯抽奖实例讲解
• javascript新闻跑马灯实例代码
• JS实现状态栏跑马灯文字效果代码
• js文本框走动跑马灯效果代码分享
• javascript 单行文字向上跑马灯滚动显示
• js实现文字跑马灯效果

依据《信息网络传播权保护条例》第二十二条之规定，即“避风港原则”，本站所有文章及内容系第三方作者上传，如有侵权行为请及时联系本站删除，本站不对内容传播行为承担赔偿责任。