jquery.RoyalSlider响应式图片滑动插件


jquery.RoyalSlider响应式图片滑动插件
jquery.RoyalSlider响应式图片滑动插件以及响应式图片滑动等js/jquery网页特效代码下载。

1. 引入CSS

<link type="text/css" href="royalslider/royalslider.css" rel="stylesheet">
<link type="text/css" href="royalslider/rs-default.css" rel="stylesheet">
<link type="text/css" href="royalslider/royalslider.css" rel="stylesheet">
<link type="text/css" href="royalslider/rs-default.css" rel="stylesheet">

2. 引入JS

<script src="royalslider/jquery-1.8.3.min.js"></script>
<script src="royalslider/jquery.royalslider.min.js?v=9.3.6"></script>
<script src="royalslider/jquery-1.8.3.min.js"></script>
<script src="royalslider/jquery.royalslider.min.js?v=9.3.6"></script>

3. HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--sucai58.com 专注html3+css3素材的网站-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jquery制作视频画廊切换滚动RoyalSlider插件</title>
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
</style>
<!--以下必要样式-->
<style type="text/css">
#video-gallery{width:100%;}
.videoGallery .rsTmb{padding:20px;}
.videoGallery .rsThumbs .rsThumb{width:220px;height:80px;border-bottom:1px solid #2E2E2E;}
.videoGallery .rsThumbs{width:220px;padding:0;}
.videoGallery .rsThumb:hover{background:#000;}
.videoGallery .rsThumb.rsNavSelected{background-color:#02874A;border-bottom:-color #02874A;}
.sampleBlock{left:3%;top:1%;width:100%;max-width:400px;}
.rsVideoContainer{width:100%;height:100%;overflow:hidden;display:block;float:left;}
@media screen and (min-width:0px) and (max-width:500px){
	.videoGallery .rsTmb{padding:6px 8px;}
	.videoGallery .rsTmb h5{font-size:12px;line-height:17px;}
	.videoGallery .rsThumbs.rsThumbsVer{width:100px;padding:0;}
	.videoGallery .rsThumbs .rsThumb{width:100px;height:47px;}
	.videoGallery .rsTmb span{display:none;}
	.videoGallery .rsOverflow,.royalSlider.videoGallery{height:300px !important;}
	.sampleBlock{font-size:14px;}
}
</style>
</head>
<body >
<div id="video-gallery" class="royalSlider videoGallery rsDefault">
	<a href="https://www.51qianduan.com/">51前端</a>
	<a href="https://www.51qianduan.com/">51前端</a>
	<div class="rsContent">
		<a href="https://www.51qianduan.com/">51前端</a>
		<h3 class="rsABlock sampleBlock">Animated block, to show you that you can put anything you want inside each slide.</h3>
	</div>
	<a href="https://www.51qianduan.com/">51前端</a>
	<a href="https://www.51qianduan.com/">51前端</a>
	<a href="https://www.51qianduan.com/">51前端</a>
	<a href="https://www.51qianduan.com/">51前端</a>
	<a href="https://www.51qianduan.com/">51前端</a>
</div>
<script type="text/javascript">
$(document).ready(function($){
	$('#video-gallery').royalSlider({
		arrowsNav: false,
		fadeinLoadedSlide: true,
		controlNavigationSpacing: 0,
		controlNavigation: 'thumbnails',
		thumbs:{
			autoCenter: false,
			fitInViewport: true,
			orientation: 'vertical',
			spacing: 0,
			paddingBottom: 0
		},
		keyboardNavEnabled: true,
		imageScaleMode: 'fill',
		imageAlignCenter:true,
		slidesSpacing: 0,
		loop: false,
		loopRewind: true,
		numImagesToPreload: 3,
		video: {
			autoHideArrows:true,
			autoHideControlNav:false,
			autoHideBlocks: true
		}, 
		autoScaleSlider: true, 
		autoScaleSliderWidth: 960,     
		autoScaleSliderHeight: 450,
		imgWidth: 640,
		imgHeight: 360
	});
});
</script>
</body>
</html>

相关推荐

发表评论

相关文章