本文介绍了一个基于HTML、CSS及JavaScript实现的图片滑动展示效果。通过自定义的脚本初始化滑动组件并设置参数如图片数量、速度等，实现了图片的自动循环播放功能。该示例使用了特定的样式表和脚本来控制图片流的显示。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type='text/css' rel='stylesheet' href='http://www.css88.com/demo/Animate Image/style3.css' />
<script type="text/javascript" src="http://www.css88.com/demo/Animate Image/sliderIMG3.js"></script>
<title>Slider view Images</title>
<script>
window.onload = function(){
sliderIMG.create('imageFlow',{count:8, speed:5, auto:true,timer:5000});
}
</script>
</head>
<body>
<div id='imageFlow'>
<div class='top'></div>
<div class='bank'>
<ul class='imageList'>
<li><a href='#'><img src='div1.jpg' /></a></li>
<li><a href='#'><img src='div2.jpg' /></a></li>
<li><a href='#'><img src='div3.jpg' /></a></li>
<li><a href='#'><img src='div1.jpg' /></a></li>
<li><a href='#'><img src='div2.jpg' /></a></li>
<li><a href='#'><img src='div3.jpg' /></a></li>
<li><a href='#'><img src='div1.jpg' /></a></li>
<li><a href='#'><img src='div2.jpg' /></a></li>
</ul>
</div>
<div class='mainOpacity'></div>
<div class='leftOpacity'></div>
<div class='rightOpacity'></div>
<div class='scrollbar'>
<span class='currentScroll'></span>
</div>
</div>
</body>
</html>
js控制图片
最新推荐文章于 2017-11-03 20:44:49 发布
扫一扫
558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
