jquerybanner按钮控制图片滚动选项卡切换插件

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.slide.js"></script>

2. HTML代码

<div class="layout">
	<h2>淡隐淡现选项卡</h2>
	<div class="row2">
		<div class="JQ-slide">
			<ul class="JQ-slide-nav">
				<li class="on"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			</ul>
			<div class="JQ-slide-content">
				<ul class="newsList">
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				</ul>
				<ul class="newsList">
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				</ul>
				<ul class="newsList">
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				</ul>
			</div>
		</div>
	</div>
	<h2>banner图片左右滚动</h2>			
	<div class="w_ctr">
		<div class="JQ-slide">
			<ul class="JQ-slide-content">
				<li><a href="http://www.51qianduan.com/"><img src="images/aa6d7f26f941d87728eb0716d36d9cbe.jpg" width="297" height="181" alt="用jquery特效制作图片金字塔式放大缩小展示" /><span>用jquery特效制作图片金字塔式放大缩小展示</span></a>
				</li>
				<li><a href="http://www.51qianduan.com/"><img src="images/bb276cedeaeb0438ed3275a9711b1d69.jpg" width="297" height="181" alt="jquery特效制作 slide 图片窗帘式滚动" /><span>jquery特效制作 slide 图片窗帘式滚动</span></a></li>
				<li><a href="http://www.51qianduan.com/"><img src="images/761e64dd86a7ebd0919c18d0c04ebabb.jpg" width="297" height="181" alt="仿苹果视网膜效应的jQuery和CSS" /><span>仿苹果视网膜效应的jQuery和CSS</span></a></li>
				<li><a href="http://www.51qianduan.com/"><img src="images/9202c9767e0383e4db7ccecc92801d10.jpg" width="297" height="181" alt="斯莱德奥特提示使用jQuery和CSS3" /><span>斯莱德奥特提示使用jQuery和CSS3</span></a></li>
			</ul>
			<ul class="JQ-slide-nav">
				<li class="on">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
	</div>
	<h2>用按钮控制图片左右滚动</h2>
	<div class="hotPic">
		<div class="JQ-slide">
			<div class="JQ-slide-nav"><a class="prev" href="javascript:void(0);">&#8249;</a><a class="next" href="javascript:void(0);">&#8250;</a></div>
			<div class="wrap">
				<ul class="JQ-slide-content imgList">
					<li>
						<a href="http://www.51qianduan.com/" class="img"><img src="images/aa6d7f26f941d87728eb0716d36d9cbe.jpg" width="140" height="100" alt="用jquery特效制作图片金字塔式放大缩小展示" /></a>
						<a href="http://www.51qianduan.com/" class="txt">用jquery特效制作图片金字塔式放大缩小展示</a>
					</li>
					<li>
						<a href="http://www.51qianduan.com/" class="img"><img src="images/bb276cedeaeb0438ed3275a9711b1d69.jpg" width="140" height="100" alt="jquery特效制作 slide 图片窗帘式滚动" /></a>
						<a href="http://www.51qianduan.com/" class="txt">jquery特效制作 slide 图片窗帘式滚动</a>
					</li>
					<li>
						<a href="http://www.51qianduan.com/" class="img"><img src="images/761e64dd86a7ebd0919c18d0c04ebabb.jpg" width="140" height="100" alt="仿苹果视网膜效应的jQuery和CSS" /></a>
						<a href="http://www.51qianduan.com/" class="txt">仿苹果视网膜效应的jQuery和CSS</a>
					</li>
					<li>
						<a href="http://www.51qianduan.com/" class="img"><img src="images/9202c9767e0383e4db7ccecc92801d10.jpg" width="140" height="100" alt="斯莱德奥特提示使用jQuery和CSS3" /></a>
						<a href="http://www.51qianduan.com/" class="txt">斯莱德奥特提示使用jQuery和CSS3</a>
					</li>
					<li>
						<a href="http://www.51qianduan.com/" class="img"><img src="images/aa6d7f26f941d87728eb0716d36d9cbe.jpg" width="140" height="100" alt="用jquery特效制作图片金字塔式放大缩小展示" /></a>
						<a href="http://www.51qianduan.com/" class="txt">用jquery特效制作图片金字塔式放大缩小展示</a>
					</li>
					<li>
						<a href="http://www.51qianduan.com/" class="img"><img src="images/bb276cedeaeb0438ed3275a9711b1d69.jpg" width="140" height="100" alt="jquery特效制作 slide 图片窗帘式滚动" /></a>
						<a href="http://www.51qianduan.com/" class="txt">jquery特效制作 slide 图片窗帘式滚动</a>
					</li>
					<li>
						<a href="http://www.51qianduan.com/" class="img"><img src="images/761e64dd86a7ebd0919c18d0c04ebabb.jpg" width="140" height="100" alt="仿苹果视网膜效应的jQuery和CSS" /></a>
						<a href="http://www.51qianduan.com/" class="txt">仿苹果视网膜效应的jQuery和CSS</a>
					</li>
					<li>
						<a href="http://www.51qianduan.com/" class="img"><img src="images/9202c9767e0383e4db7ccecc92801d10.jpg" width="140" height="100" alt="斯莱德奥特提示使用jQuery和CSS3" /></a>
						<a href="http://www.51qianduan.com/" class="txt">斯莱德奥特提示使用jQuery和CSS3</a>
					</li>
				</ul>
			</div>
		</div>
	</div>	
</div>