jquery 图片宽度自适应滚动代码

最新推荐文章于 2020-02-23 23:34:41 发布
未来感知-UWB定位
最新推荐文章于 2020-02-23 23:34:41 发布
阅读量2.2k
点赞数
分类专栏： js/jquery
本文链接：https://blog.csdn.net/lyd518/article/details/8929683
版权
js/jquery 专栏收录该内容
31 篇文章 0 订阅
订阅专栏
<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Demo</title>

<style>
* {margin:0;padding:0;}li {list-style:none;}
body {padding:50px;font-size:12px;background:#eee;color:#000;}
a {color:#666;text-decoration:none;}
/* Box */
.wp_box {border:1px solid #bbc9db;background:#fff;}
.wp_box .hd {background:#e3f2fa;height:32px;line-height:32px;padding:0 10px;margin:1px;}
.plst_pt {overflow:hidden;_width:100%;}
.plst_pt ul {overflow:hidden;*zoom:1;padding:15px 0;width:9999em;}
.plst_pt li {float:left;margin-left:16px;display:inline;text-align:center;}
.plst_pt li img {display:block;width:180px;height:85px;margin-bottom:5px;border:1px solid #e3f2fa;padding:1px;}
/* Roll */
.wp_roll {position:relative;_width:100%;}
.roll_lt, .roll_rt {position:absolute;top:15px;left:1px;width:18px;height:89px;line-height:89px;font-size:18px;font-weight:bold;text-align:center;}
.roll_rt {left:auto;right:1px;}
.roll_cnt {padding:0 20px;}
.roll_lt:hover, .roll_rt:hover {color:#000;}

</style>
</head>

<body>

<div class="wp_box">
	<div class="hd">
		<strong>最新活动</strong>
	</div>
	<div class="bd">
		<div class="wp_roll jQ_roll">
			<a href="javascript:;" class="roll_lt jQ_plstRoLt"><</a>
			<a href="javascript:;" class="roll_rt jQ_plstRoRt">></a>
			<div class="roll_cnt">
				<div class="plst_pt jQ_ptLst">
					<ul>
						<li><img src="http://ossweb-img.qq.com/upload/webplat/info/gamevip/201205/1337325122_-1719592020_8849_imageAddr.jpg">QQ炫舞四周年</li>
						<li><img src="http://ossweb-img.qq.com/upload/webplat/info/gamevip/201205/1337310289_-1719592020_13859_imageAddr.jpg">星魂百元Q币礼包</li>
						<li><img src="http://ossweb-img.qq.com/upload/webplat/info/gamevip/201205/1337172532_-1719592020_23994_imageAddr.jpg">御龙新服四大豪礼</li>
						<li><img src="http://ossweb-img.qq.com/upload/webplat/info/gamevip/201205/1337076515_-1719592020_22441_imageAddr.jpg">蓝钻大寻宝十三期</li>
						<li><img src="http://ossweb-img.qq.com/upload/webplat/info/gamevip/201205/1337052580_-1719592020_7552_imageAddr.jpg">宝石总动员公测送礼包</li>
						<li><img src="http://ossweb-img.qq.com/upload/webplat/info/gamevip/201205/1336733600_-1719592020_21080_imageAddr.jpg">谁是至尊蓝钻</li>
						<li><img src="http://ossweb-img.qq.com/upload/webplat/info/gamevip/201205/1336719487_-1719592020_11807_imageAddr.jpg">乐斗派限免开启</li>
						<li><img src="http://ossweb-img.qq.com/upload/webplat/info/gamevip/201205/1336644738_-1719592020_20765_imageAddr.jpg">玩寻仙、看太极</li>
						<li><img src="http://ossweb-img.qq.com/upload/webplat/info/gamevip/201205/1336642972_-1719592020_14717_imageAddr.jpg">就要K歌内测放号</li>
						<li><img src="http://ossweb-img.qq.com/upload/webplat/info/gamevip/201205/1336642850_-1719592020_12626_imageAddr.jpg">王朝霸域竞拍紫将</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<!--//-->
<script type="text/javascript" src="http://minigame.qq.com/js/jquery.js"></script>
<script type="text/javascript">
//jQuery Script
$(function(){
	
	//列表自适应
	var ptListWrp = $('.jQ_ptLst');					//列表容器
	var valLstLiWth = $('.jQ_ptLst li').width();	//图片宽度（图片可能包括边框样式等，取Li宽度参与可视图片计算避免误差）
	var valImgLth = 1;								//可见图数变量*
	var valpLstMg = 0;								//边距变量*
	var pLstLesMg = 5;								//临界间距
	//列表滚动
	var pLstRoLt = $('.jQ_plstRoLt');				//左滚动元素
	var pLstRoRt = $('.jQ_plstRoRt');				//右滚动元素
	var pLstImgLth = ptListWrp.find('img').length;	//获取图片总数

	//宽度自适应方法
	function fnAutoWth(){
		//重置滚动
		$('.jQ_ptLst ul').css({'marginLeft':'0'});
		pLstRoLt.hide();
		pLstRoRt.show();
		
		var pLstWrpWth = ptListWrp.width();		 			 //获取当前可视区域宽度
		valImgLth = Math.floor(pLstWrpWth / valLstLiWth);	///当前可视图片数计算*
		//图片间距算法
		function fnpLstMg(){
			//间距 = 除去图片的宽度 /（图片数 + 1），并向上取整（避免小数误差）
			valpLstMg = Math.ceil((pLstWrpWth - valImgLth * valLstLiWth) / (valImgLth + 1));
		};
		//执行计算
		fnpLstMg();
		//间距临界值
		if(valpLstMg < pLstLesMg){
			valImgLth = valImgLth - 1;	//当间距达到临界值，图片数-1
			fnpLstMg();					//重新计算间距
		};
		//可视图片数 >= 总图片数时，总图片数即可视图片数
		if(valImgLth >= pLstImgLth){
			valImgLth = pLstImgLth;
			fnpLstMg();					//重新计算间距
			pLstRoRt.hide();
		};
		//使可视图不为0
//		if(valImgLth == 0){
//			valpLstMg = 5;
//		};
		//设置间距
		ptListWrp.find('li').css('margin-left',valpLstMg);
	};
	//初始执行宽度自适应方法
	fnAutoWth();
	//动态变化宽度时执行方法
	$(window).resize(function(){
		fnAutoWth();	//宽度自适应方法
	});
	//滚动方法
	function fnPlstArr($this){
		var pLstRoWrp = ptListWrp.find('ul');
		var ptLstCssMg = parseInt(pLstRoWrp.css('margin-left'));					//获取当前已滚动宽度
		var ptLstImgMg = parseInt(pLstRoWrp.find('li:first').css('margin-left'));	//获取当前图片间距
		//向右滚动
		if($this.hasClass('jQ_plstRoRt')){
			//当点击右箭头时，列表向左滚动。需滚动的宽度 = 当前图片间距 + 图片宽度（取Li宽度）
			pLstRoWrp.not(':animated').animate({marginLeft: ptLstCssMg - (ptLstImgMg + valLstLiWth)},200,function(){
				//回调函数判断滚动之后的箭头状态
				var ptLstCurMg = parseInt(pLstRoWrp.css('margin-left'));				//获取当前已滚动宽度
				var ptLstRoWth = (pLstImgLth - valImgLth) * (ptLstImgMg + valLstLiWth);//计算非可视区域宽度
				//当已滚动宽度 = 非可视区宽度，即已滚动至最后一图
				if(ptLstCurMg + ptLstRoWth == 0){
					$this.hide();	//隐藏右箭头
				};
				pLstRoLt.show();	//一旦向右滚动，左箭头即显示
			});
		};
		//向左滚动
		if($this.hasClass('jQ_plstRoLt')){
			pLstRoWrp.not(':animated').animate({marginLeft: ptLstCssMg + (ptLstImgMg + valLstLiWth)},200,function(){
				//回调函数判断滚动之后的箭头状态
				var ptLstCurMg = parseInt(pLstRoWrp.css('margin-left'));					//获取当前已滚动宽度
				var ptLstRoWth = (pLstImgLth - valImgLth - 1) * (ptLstImgMg + valLstLiWth);//计算非可视区域宽度
				//当已滚动宽度 = 0，即已滚动至最前一图
				if(ptLstCurMg == 0){
					$this.hide();	//隐藏左箭头
				};
				pLstRoRt.show();	//一旦向左滚动，右箭头即显示
			});
		};
	};
	//滚动事件绑定
	$('.jQ_plstRoLt, .jQ_plstRoRt').click(function(){
		fnPlstArr($(this));
	})

//..
});
</script>
</body>
</html>
2 还有一款jquery 插件　xslider.js 可以实现横向和竖向滚动　