网页图片循环滚动播放效果

最新推荐文章于 2021-12-22 17:33:17 发布

Richard_Jason

最新推荐文章于 2021-12-22 17:33:17 发布

阅读量7.3k

点赞数 3

文章标签： html javascript 图片滚动播放

本文链接：https://blog.csdn.net/Richard_Jason/article/details/52994390

版权

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

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

图片：http://download.csdn.net/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

最低0.47元/天解锁文章

Richard_Jason

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
网页图片循环滚动播放效果

图片：http://download.csdn.net/detail/richard_jason/9669814效果图：示例代码（HTML）：*{margin:0px;padding:0px;}img {border:none;}#infiniteCarousel { border:1px solid #999; margin:40p
复制链接

扫一扫