zhangFan / station · 文件

转到一个项目

审查视图

bin/src/main/webapp/static/SuperSlide/demo/T1.1-multipleLine.html 8.6 KB
原文件 普通视图 历史 永久链接
bin文件夹上传，src下部分文件更新
06a761b8
 
zhangFan authored
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,SuperSlide多行滚动,jQuery多行滚动,javascript多行滚动">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 多行滚动示例</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>

<body>



		<style type="text/css">
		/* css 重置 */
		*{margin:0; padding:0; list-style:none; }
		body{ background:#fff; font:normal 12px/22px 宋体;  }
		img{ border:0;  }
		a{ text-decoration:none; color:#333;  }
		.js{width:90%; margin:10px auto 0 auto; }
		.js p{ padding:5px 0; font-weight:bold; overflow:hidden;  }
		.js p span{ float:right; }
		.js p span a{ color:#f00; text-decoration:underline;   }
		.js textarea{ height:50px;  width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa;  border-left:2px solid #aaa;  }


		/* 本例子css */
		.multipleLine{ overflow:hidden; position:relative; width:450px;  border:1px solid #ccc;   }
		.multipleLine .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
		.multipleLine .hd .prev,.multipleLine .hd .next{ display:block;  width:9px; height:5px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
			 cursor:pointer; background:url("images/icoUp.gif") no-repeat;}
		.multipleLine .hd .next{ background:url("images/icoDown.gif") no-repeat;  }
		.multipleLine .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
		.multipleLine .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
		.multipleLine .hd ul li.on{ background-position:0 0; }
		.multipleLine .bd{ padding:10px; height:240px; overflow:hidden;  }
		.multipleLine .bd ul{ overflow:hidden; zoom:1; margin-bottom:10px;  }
		.multipleLine .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
		.multipleLine .bd ul li .pic{ text-align:center; }
		.multipleLine .bd ul li .pic img{ width:120px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
		.multipleLine .bd ul li .pic a:hover img{ border-color:#999;  }
		.multipleLine .bd ul li .title{ line-height:24px;   }

		</style>

		<div class="multipleLine" style="margin:0 auto">
			<div class="hd">
				<a class="next"></a>
				<ul></ul>
				<a class="prev"></a>
				<span class="pageState"></span>
			</div>
			<div class="bd">

				<div class="ulWrap">

						<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
							</li>
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
							</li>
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
							</li>
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
							</li>
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
							</li>
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
							</li>
						</ul>

						<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
							</li>
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
							</li>
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
							</li>
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
							</li>
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
							</li>
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
							</li>
						</ul>

						<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
							</li>
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
							</li>
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
							</li>
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
							</li>
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
							</li>
							<li>
								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
							</li>
						</ul>
				</div><!-- ulWrap End -->
			</div><!-- bd End -->
		</div><!-- multipleLine End -->

		<script type="text/javascript">
			/*
				多行/多列的滚动解决思路在于：把每次滚动的n个li放到1个ul里面，然后用SuperSlide每次滚动1个ul，相当于每次滚动n个li
			*/
			jQuery(".multipleLine").slide({titCell:".hd ul",mainCell:".bd .ulWrap",autoPage:true,effect:"top",autoPlay:true});
		</script>

	<div class="js">
		<p>多行/多列的滚动解决思路在于：把每次滚动的n个li放到1个ul里面，然后用SuperSlide每次滚动1个ul，相当于每次滚动n个li</p>
		<textarea>本例js调用：jQuery(".multipleLine").slide({titCell:".hd ul",mainCell:".bd .ulWrap",autoPage:true,effect:"top",autoPlay:true});</textarea>
	</div>



</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>