ScrollPic.js—简单易用的图片左右滚动插件

0000000xj

于 2021-01-08 15:21:06 发布

阅读量315

点赞数

分类专栏：帝国cms

原文链接：https://blog.csdn.net/liaoqizhun/article/details/78475809

版权

帝国cms 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

ScrollPic.js对于一些新手来说是一个很好理解运用的图片左右滚动插件，兼容性较好，可以放心大胆的使用。

1：下载ScrollPic.js。下载地址： http://www.jq-school.com/DownLoad.aspx?id=278

2：引入

	<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/ScrollPic.js" type="text/javascript" charset="utf-8"></script>

<!DOCTYPE html>
<html lang="en">
 
<head>
	<meta charset="UTF-8">
	<title>图片左右滚动</title>
	<style type="text/css">
	ul{
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.photo_nr ul li {
		float: left;
		margin: 0 15px;
		line-height: 30px;
		text-align: center;
	}
	.photo_nr p {
		padding: 0;
		margin: 0;
	}
 
	a{
		background: url(img/ljt.jpg) no-repeat;
		width: 40px;
		height: 40px;
		display: block;
	}
</style>
</head>
 
<body>
	<div class="photo_nr">
		<a href="javascript:;" id="LeftArr"></a>
		<ul id="picList1">
			<li>
				<div class="photo_img"><img src="img/news_1.png" alt=""/></div>
				<p>图片滚动</p>
			</li>
			<li>
				<div class="photo_img"><img src="img/news_1.png" alt=""/></div>
				<p>图片滚动</p>
			</li>
			<li>
				<div class="photo_img"><img src="img/news_1.png" alt=""/></div>
				<p>图片滚动</p>
			</li>
			<li>
				<div class="photo_img"><img src="img/news_1.png" alt=""/></div>
				<p>图片滚动</p>
			</li>
			<li>
				<div class="photo_img"><img src="img/news_1.png" alt=""/></div>
				<p>图片滚动</p>
			</li>
			<div style="clear: both;"></div>
		</ul>
		<a href="javascript:;" id="RightArr"></a>
	</div>
	<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/ScrollPic.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
		var cc1 = new ScrollPic();
		cc1.scrollContId = "picList1"; // 内容容器ID,picList1加到容器上，
		cc1.arrLeftId = "LeftArr";//左箭头ID
                cc1.arrRightId = "RightArr"; //右箭头ID
		cc1.frameWidth = 1200; //显示框的宽度
		cc1.pageWidth = 1; //翻页宽度
		cc1.speed = 10; //移动速度(单位毫秒，越小越快)
		cc1.space = 10; //每次移动像素(单位px，越大越快)
		cc1.autoPlay = true; //自动播放
		cc1.autoPlayTime = 0.03; //自动播放间隔时间(秒)
		cc1.initialize(); //初始化            
	});
</script>
</body>
</html>

0000000xj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ScrollPic.js—简单易用的图片左右滚动插件

ScrollPic.js对于一些新手来说是一个很好理解运用的图片左右滚动插件，兼容性较好，可以放心大胆的使用。1：下载ScrollPic.js。下载地址：http://www.jq-school.com/DownLoad.aspx?id=2782：引入 <script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script> <script src=...
复制链接

扫一扫

专栏目录