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

jQuery实现左右布局带缩略图轮播图特效

发布时间:2015-09-02 12:11:13    您是第0位浏览者

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

jQuery实现左右布局带缩略图轮播图特效
<!DOCTYPE html>    
<html>    
<head>    
<meta charset="utf-8">    
<meta name="viewport" content="width=device-width">    
<title>jQuery实现左右布局带缩略图轮播图特效</title>    
<link rel="stylesheet" type="text/css" href="css/slider-pro.min.css" media="screen"/>    
<link rel="stylesheet" type="text/css" href="css/examples.css" media="screen"/>    
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>    
<script type="text/javascript" src="js/jquery.sliderPro.min.js"></script>    
<script type="text/javascript">    
	$( document ).ready(function( $ ) {    
		$( '#example5' ).sliderPro({    
			width: 670,    
			height: 500,    
			orientation: 'vertical',    
			loop: false,    
			arrows: true,    
			buttons: false,    
			thumbnailsPosition: 'right',    
			thumbnailPointer: true,    
			thumbnailWidth: 290,    
			breakpoints: {    
				800: {    
					thumbnailsPosition: 'bottom',    
					thumbnailWidth: 270,    
					thumbnailHeight: 100    
				},    
				500: {    
					thumbnailsPosition: 'bottom',    
					thumbnailWidth: 120,    
					thumbnailHeight: 50    
				}    
			}    
		});    
	});    
</script>    
</head>    
<body>    
<div id="example5" class="slider-pro">    
<div class="sp-slides">    
<div class="sp-slide"><img class="sp-image" src="css/images/blank.gif" data-src="images/image1_medium.jpg" data-retina="images/image1_large.jpg"/>    
<div class="sp-caption">js特效代码网 - www.jstxdm.com</div>    
</div>    
<div class="sp-slide"><img class="sp-image" src="css/images/blank.gif" data-src="images/image2_medium.jpg" data-retina="images/image2_large.jpg"/>    
<div class="sp-caption">js特效代码网 - www.jstxdm.com</div>    
</div>    
<div class="sp-slide"><img class="sp-image" src="css/images/blank.gif" data-src="images/image3_medium.jpg" data-retina="images/image3_large.jpg"/>    
<div class="sp-caption">js特效代码网 - www.jstxdm.com</div>    
</div>    
<div class="sp-slide"><img class="sp-image" src="css/images/blank.gif" data-src="images/image4_medium.jpg" data-retina="images/image4_large.jpg"/>    
<div class="sp-caption">js特效代码网 - www.jstxdm.com</div>    
</div>    
<div class="sp-slide"><img class="sp-image" src="css/images/blank.gif" data-src="images/image5_medium.jpg" data-retina="images/image5_large.jpg"/>    
<div class="sp-caption">js特效代码网 - www.jstxdm.com</div>    
</div>    
<div class="sp-slide"><img class="sp-image" src="css/images/blank.gif" data-src="images/image1_medium.jpg" data-retina="images/image1_large.jpg"/>    
<div class="sp-caption">js特效代码网 - www.jstxdm.com</div>    
</div>    
<div class="sp-slide"><img class="sp-image" src="css/images/blank.gif" data-src="images/image2_medium.jpg" data-retina="images/image2_large.jpg"/>    
<div class="sp-caption">js特效代码网 - www.jstxdm.com</div>    
</div>    
<div class="sp-slide"><img class="sp-image" src="css/images/blank.gif" data-src="images/image3_medium.jpg" data-retina="images/image3_large.jpg"/>    
<div class="sp-caption">js特效代码网 - www.jstxdm.com</div>    
</div>    
<div class="sp-slide"><img class="sp-image" src="css/images/blank.gif" data-src="images/image4_medium.jpg" data-retina="images/image4_large.jpg"/>    
<div class="sp-caption">js特效代码网 - www.jstxdm.com</div>    
</div>    
<div class="sp-slide"><img class="sp-image" src="css/images/blank.gif" data-src="images/image5_medium.jpg" data-retina="images/image5_large.jpg"/>    
<div class="sp-caption">js特效代码网 - www.jstxdm.com</div>    
</div>    
</div>    
<div class="sp-thumbnails">    
<div class="sp-thumbnail">    
<div class="sp-thumbnail-image-container"> <img class="sp-thumbnail-image" src="images/image1_thumbnail.jpg"/> </div>    
<div class="sp-thumbnail-text">    
<div class="sp-thumbnail-title">js特效代码网</div>    
<div class="sp-thumbnail-description">jstxdm.com</div>    
</div>    
</div>    
<div class="sp-thumbnail">    
<div class="sp-thumbnail-image-container"> <img class="sp-thumbnail-image" src="images/image2_thumbnail.jpg"/> </div>    
<div class="sp-thumbnail-text">    
<div class="sp-thumbnail-title">js特效代码网</div>    
<div class="sp-thumbnail-description">jstxdm.com</div>    
</div>    
</div>    
<div class="sp-thumbnail">    
<div class="sp-thumbnail-image-container"> <img class="sp-thumbnail-image" src="images/image3_thumbnail.jpg"/> </div>    
<div class="sp-thumbnail-text">    
<div class="sp-thumbnail-title">js特效代码网</div>    
<div class="sp-thumbnail-description">jstxdm.com</div>    
</div>    
</div>    
<div class="sp-thumbnail">    
<div class="sp-thumbnail-image-container"> <img class="sp-thumbnail-image" src="images/image4_thumbnail.jpg"/> </div>    
<div class="sp-thumbnail-text">    
<div class="sp-thumbnail-title">js特效代码网</div>    
<div class="sp-thumbnail-description">jstxdm.com</div>    
</div>    
</div>    
<div class="sp-thumbnail">    
<div class="sp-thumbnail-image-container"> <img class="sp-thumbnail-image" src="images/image5_thumbnail.jpg"/> </div>    
<div class="sp-thumbnail-text">    
<div class="sp-thumbnail-title">js特效代码网</div>    
<div class="sp-thumbnail-description">jstxdm.com</div>    
</div>    
</div>    
<div class="sp-thumbnail">    
<div class="sp-thumbnail-image-container"> <img class="sp-thumbnail-image" src="images/image6_thumbnail.jpg"/> </div>    
<div class="sp-thumbnail-text">    
<div class="sp-thumbnail-title">js特效代码网</div>    
<div class="sp-thumbnail-description">jstxdm.com</div>    
</div>    
</div>    
<div class="sp-thumbnail">    
<div class="sp-thumbnail-image-container"> <img class="sp-thumbnail-image" src="images/image7_thumbnail.jpg"/> </div>    
<div class="sp-thumbnail-text">    
<div class="sp-thumbnail-title">js特效代码网</div>    
<div class="sp-thumbnail-description">jstxdm.com</div>    
</div>    
</div>    
<div class="sp-thumbnail">    
<div class="sp-thumbnail-image-container"> <img class="sp-thumbnail-image" src="images/image8_thumbnail.jpg"/> </div>    
<div class="sp-thumbnail-text">    
<div class="sp-thumbnail-title">js特效代码网</div>    
<div class="sp-thumbnail-description">jstxdm.com</div>    
</div>    
</div>    
<div class="sp-thumbnail">    
<div class="sp-thumbnail-image-container"> <img class="sp-thumbnail-image" src="images/image9_thumbnail.jpg"/> </div>    
<div class="sp-thumbnail-text">    
<div class="sp-thumbnail-title">js特效代码网</div>    
<div class="sp-thumbnail-description">jstxdm.com</div>    
</div>    
</div>    
<div class="sp-thumbnail">    
<div class="sp-thumbnail-image-container"> <img class="sp-thumbnail-image" src="images/image10_thumbnail.jpg"/> </div>    
<div class="sp-thumbnail-text">    
<div class="sp-thumbnail-title">js特效代码网</div>    
<div class="sp-thumbnail-description">jstxdm.com</div>    
</div>    
</div>    
</div>    
</div>    
</body>    
</html>



缩略图 轮播图

jquery带缩略图焦点滚动图特效代码

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

jquery仿UC浏览器网站带缩略图淡入淡出的banner特效

jquery仿海信官网带缩略图下拉导航菜单特效

jquery纯色调支持缩略图和描述的焦点图特效

jQuery带缩略图焦点图插件

jQuery实现左右布局带缩略图轮播图特效

jquery实现带缩略图可触摸焦点图特效

jquery实现宽屏带缩略图焦点图

jquery实现带缩略图,按钮控制图片左右滑动切换特效

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

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

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

jQuery实现带缩略图广告特效代码

JQuery实现带缩略图的焦点图展示特效

jQuery实现门户网站带缩略图的图片相册特效代码

jquery鼠标悬停缩略图、实现放大跟随展示大图片特效代码

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

有缩略图5屏焦点图切换

有缩略图和文字描述的JS焦点图代码

友荐云推荐
大家说 此评论不代表本站观点