js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS广告代码 > JS幻灯片

jQuery带缩略图的全屏幻灯片图片切换特效代码

发布时间:2016-01-26 11:16:59    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jQuery带缩略图的全屏幻灯片图片切换特效代码
<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="utf-8">    
		<title>jQuery带缩略图的全屏幻灯片图片切换特效代码</title>    
		<link href="css/style.css" type="text/css" rel="stylesheet" />    
	</head>    
	<body>    
		<div class="banner">    
			<div class="index_b_hero">    
				<div class="hero-wrap">    
					<ul class="heros">    
						<li class="hero"><a href="#"><img class="thumb" src="images/img01.jpg" /></a></li>    
						<li class="hero"><a href="#"><img class="thumb" src="images/img02.jpg" /></a></li>    
						<li class="hero"><a href="#"><img class="thumb" src="images/img03.jpg" /></a></li>    
						<li class="hero"><a href="#"><img class="thumb" src="images/img04.jpg" /></a></li>    
						<li class="hero"><a href="#"><img class="thumb" src="images/img05.jpg" /></a></li>    
						<li class="hero"><a href="#"><img class="thumb" src="images/img06.jpg" /></a></li>    
						<li class="hero"><a href="#"><img class="thumb" src="images/img07.jpg" /></a></li>    
					</ul>    
				</div>    
				<div class="helper">    
					<div class="mask-left"></div>    
					<div class="mask-right"></div>    
					<a href="javascript:;" class="page_btn prev"></a>    
					<a href="javascript:;" class="page_btn next"></a>    
				</div>    
			</div>	    
			<div id="lt_ss_tus" class="little_img">    
				<ul class="small_list">    
					<li class="on">    
						<img id="0" src="images/img01.jpg" height="65" width="162">    
						<div class="bg"></div>    
					</li>    
					<li>    
						<img id="1" src="images/img02.jpg" height="65" width="162">    
						<div class="bg"></div>    
					</li>    
					<li>    
						<img id="2" src="images/img03.jpg" height="65" width="162">    
						<div class="bg"></div>    
					</li>    
					<li>    
						<img id="3" src="images/img04.jpg" height="65" width="162">    
						<div class="bg"></div>    
					</li>    
					<li>    
						<img id="4" src="images/img05.jpg" height="65" width="162">    
						<div class="bg"></div>    
					</li>    
					<li>    
						<img id="5" src="images/img06.jpg" height="65" width="162">    
						<div class="bg"></div>    
					</li>    
					<li class="last">    
						<img id="6" src="images/img07.jpg" height="65" width="162">    
						<div class="bg"></div>    
					</li>    
				</ul>    
			</div>	    
		</div>    
		<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>    
		<script src="js/carousel_focus.min.js" type="text/javascript"></script>    
	</body>    
</html>



幻灯片

js实现轮播幻灯片3D特效并且可以左右翻页

js实现10屏带缩略图和标题的幻灯片轮播特效

JS仿360旅游首页幻灯片效果代码

JS带图片标题自动播放的幻灯片特效

JS视差滑块幻灯片特效

jQuery自动播放淡入淡出的幻灯片特效

jquery.slider多种过渡效果的图片轮播幻灯片特效

js仿淘宝首页缓冲幻灯片特效

jquery实现4款自定义图片切换幻灯片js特效

jquery仿支付宝全屏图片幻灯片淡出淡进切换特效

jquery实现婚纱摄影网站宽屏图片幻灯片轮播切换特效

jquery实现 ChinaJoy2014专题幻灯片特效

jQuery幻灯片插件,按钮控制图片过渡特效

jquery仿百度百科2014新首页幻灯片特效

jquery实现淡出淡入带缩略图的广告图片幻灯片切换特效

jquery仿腾讯新闻网站带缩略图的幻灯片切换代码_js代码

jquery仿搜狐2014巴西世界杯专题幻灯片特效

jquery仿新浪2014成都车展幻灯片

jquery仿网易2014巴西世界杯专题幻灯片特效

jquery仿腾讯网新闻图片特效带缩略图的幻灯片切换特效