js自动播放效果的实现

原创

于 2016-09-04 23:05:30 发布 · 4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #幻灯片

本文通过示例代码详细介绍了如何使用JavaScript实现一个自动播放的幻灯片效果，包括图片切换的淡入淡出动画，以及鼠标悬停停止播放，离开后自动继续播放的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不不多少多说，先上效果图

先上css代码

<style>

body,div,ul,li{margin:0;padding:0;}ul{list-style-type:none;}body{background:#000;text-align:center;font:12px/20px Arial;}#box{position:relative;width:492px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;}#box .list{position:relative;width:490px;height:170px;overflow:hidden;border:1px solid #ccc;}#box .list li{position:absolute;top:0;left:0;width:490px;height:170px;opacity:0;filter:alpha(opacity=0);}#box .list li.current{opacity:1;filter:alpha(opacity=100);}#box .count{position:absolute;right:0;bottom:5px;}#box .count li{color:#fff;float:left;width:20px;height:20px;cursor