实现网页图片循环滚动播放效果-优快云博客

本文链接：https://blog.youkuaiyun.com/Richard_Jason/article/details/52994390

本文介绍了如何创建一个网页图片循环滚动播放的效果，包括HTML结构、CSS样式和JavaScript实现。提供了示例代码，使用jQuery插件infiniteCarousel，可以左右箭头控制和自动切换，同时展示了图片下方的文字说明。

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

图片：http://download.youkuaiyun.com/detail/richard_jason/9669814

效果图：

示例代码（HTML）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
<!--
*{margin:0px;padding:0px;}
img {border:none;}
#infiniteCarousel { border:1px solid #999; margin:40px auto 0;height:270px; width:520px; position:relative;}
#infiniteCarousel .apawn_dots{width:509px; height:8px; position:absolute; left:0px; margin-top:253px;overflow:hidden; z-index:3;}
#infiniteCarousel .apawn_dots a {float:right; margin:0 4px; display:block; width:8px; height:8px; background: url(images/browser/cir_white.gif) no-repeat;}
#infiniteCarousel .wrapper {float:left;width:520px; height:270px; position:relative; z-index:1px; overflow:hidden;}
#infiniteCarousel .wrapper .slider{width:520px; height:270px;}
#infiniteCarousel .wrapper .slider p {height:270px; width:520px;float:left; overflow:hidden; }
#infiniteCarousel .wrapper .slider p img {width:520px; height:270px;}
#infiniteCarousel .wrapper .slider p span {display:block; width:100%; height:47px; overflow:hidden;margin-top:-47px; line-height:47px; background-color:#000;filter:alpha(opacity=30); opacit