图片左右滚动（可自动，有左右按钮）

最新推荐文章于 2022-04-07 14:12:20 发布

athrunzero

最新推荐文章于 2022-04-07 14:12:20 发布

阅读量1.2w

点赞数 1

分类专栏： javascript 文章标签： javascript JavaScript Javascript javaScript JAVASCRIPT 图片滚动滚动

本文链接：https://blog.csdn.net/yjzhu1987/article/details/7785118

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

图片左右滚动（可自动，有左右按钮）

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=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>图片滚动</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	ul{list-style:none;}
	img{border:0;}
	.scroll{width:358px;height:63px;}
	.scroll_left{width:23px;height:63px;background:url(images/btn_left.jpg) no-repeat;float:left;}
	.scroll_right{width:23px;height:63px;background:url(images/btn_right.jpg) left no-repeat;float:left;}
	.pic{width:312px;height:73px;float:left;overflow-x:scroll;overflow-y:hidden;}
	.pic ul{display:block;}
	.pic li{float:left;display:inline;width:104px;text-align:center;}
	</style>
</head>
<body>
<div style="margin:100px auto;width:358px;">
	<div class="scroll">
		<div class="scroll_left" id="LeftArr"></div>
		<div class="pic" id="scrollPic">
		<ul>
			<li><a href="#" target="_blank" title=""><img src="images/pic01.png" width="100" height="63" alt="" /></a></li>
			<li><a href="#" target="_blank" title=""><img src="images/pic02.jpg" width="100" height="63" alt="" /></a></li>
			<li><a href="#" target="_blank" title=""><img src="images/pic03.jpg" width="100" height="63" alt="" /></a></li>
			<li><a href="#" target="_blank" title=""><img src="images/pic04.jpg" width="100" height="63" alt="" /></a></li>
			<li><a href="#" target="_blank" title=""><img src="images/pic05.jpg" width="100" height="63" alt="" /></a></li>
			<li><a href="#" target="_blank" title=""><img src="images/pic06.jpg" width="100" height="63" alt="" /></a></li>
		</ul>
		</div>
		<div class="scroll_right" id="RightArr"></div>
	</div>
</div>
</body>
</html>
<script src="scrollPic.js" type="text/javascript"></script>

js代码如下：

var scrollPic = new ScrollPic();
scrollPic.scrollContId   = "scrollPic";
scrollPic.arrLeftId      = "LeftArr";
scrollPic.arrRightId     = "RightArr";

scrollPic.frameWidth     = 312;
scrollPic.pageWidth      = 104;

scrollPic.speed          = 10;
scrollPic.space          = 10;
scrollPic.autoPlay       = false;
scrollPic.autoPlayTime   = 3;

scrollPic.initialize();

参数说明：

var scrollPic = new ScrollPic(); //定义变量，并初始化方法

scrollContId //滚动容器的ID

arrLeftId //左按钮ID

arrRightId //右按钮ID

frameWidth //显示框宽度

pageWidth //翻页宽度

speed //移动速度(单位毫秒，越小越快)

space //每次移动像素(单位px，越大越快)

autoPlay //自动播放

autoPlayTine //自动播放间隔时间(秒)

initialize() //初始化

PS：一定要添加<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，否则IE8下面有问题。

最后附上下载地址：http://download.csdn.net/detail/athrunzero/4452419

PS2：博客搬家了，以后不再 CSDN 更新了，见谅。最新博客地址：http://www.cnblogs.com/yjzhu/

athrunzero

关注

1
点赞
踩
42

收藏

觉得还不错? 一键收藏
0
评论
图片左右滚动（可自动，有左右按钮）

图片左右滚动（可自动，有左右按钮）html代码如下：图片滚动 *{margin:0;padding:0;} ul{list-style:none;} img{border:0;} .scroll{width:358px;height:63px;} .scroll_left{width:23px;height:63px;background:url(images
复制链接

扫一扫

专栏目录