jQuery带缩略图幻灯片轮播切换代码



65 256 86



特效描述:jQuery 带缩略图 幻灯片轮播切换,jQuery带缩略图幻灯片轮播切换代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

3. HTML代码

<div class="ag7-main">
	<div class="ag7-bannerslide">
		<ul class="slidebox">
			<li><a href="http://www.51qianduan.com//" target="_blank"><img alt="百元档激斗" src="images/big1.jpg" ></a></li>
			<li><a href="http://www.51qianduan.com//" target="_blank"><img alt="天生美颜" src="images/big2.jpg" ></a></li>
			<li><a href="http://www.51qianduan.com//" target="_blank	"><img alt="4G全网通" src="images/big3.jpg" ></a></li>
			<li><a href="http://www.51qianduan.com//" target="_blank	"><img alt="你弯了吗?" src="images/big4.jpg" ></a></li>
		</ul>
		<div class="slideinfo">
			<div class="slidetitle">
				<h2></h2>
				<h3></h3>
			</div>
			<div class="slidelist">
				<ul>
					<li data-h1="百元档激斗" data-h2="小米 /bong2 /37度手环对比评测视频">
					<img width="50" height="22" src="images/s1.jpg" alt="">
					</li>
					<li data-h1="天生美颜" data-h2="美图 M4 智能手机体验视频">
					<img width="50" height="22" src="images/s2.jpg" alt="">
					</li>
					<li data-h1="4G全网通" data-h2="三星Galaxy S6 edge零售版首发体验视频">
					<img width="50" height="22" src="images/s3.jpg" alt="">
					</li>
					<li data-h1="你弯了吗?" data-h2="LG G Flex2上手体验视频">
					<img width="50" height="22" src="images/s4.jpg" alt="">
					</li>
				</ul>
				<span class="mask"></span>
			</div>
		</div>
	</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 flash焦点图 flash幻灯片 flashbanner flash图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 焦点图 幻灯片 轮播图 bar焦点图 带标题的焦点图 带缩略图的幻灯片 图片切换 图片选项卡 图标选项卡 纯图片轮播 图片轮播

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到