经验分享程序开发文档资料数据资源其它资源

jQuery全屏响应式图片滑块RSlider特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery全屏响应式图片滑块RSlider特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery全屏响应式图片滑块RSlider特效代码

HTML代码(index.html):

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>jQuery全屏响应式图片滑块RSlider</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.responsive.slider.js" type="text/javascript"></script>
<script type="text/javascript">

        $(document).ready(function () {

            $('#r-slider-wrapper').rslider();
			var left  = $(window).width() /2 - 349;
			
			$('#g-ads').css({left:left});
        });

    </script>
<style type="text/css">
		html,body{margin:0px;padding:0px;}
		#r-slider-category-wrapper{margin:100px 5px 5px 0px!important;}	
		#g-ads{position: absolute;z-index: 9999;bottom: 0%;}
	</style>
</head>

<body>

<div id="r-slider-wrapper">
	<div id="r-slider-category-wrapper">
		<select>
		<option value="first-cat">First Category</option>
		<option value="second-cat">Second Category</option>
		<option value="third-cat">Third Category</option>
		<option value="fourth-cat">Fourth Category</option>
		</select>
		<ul>
			<li class="r-cat-active"><a href="#first-cat">First Category</a>
			</li>
			<li><a href="#second-cat">Second Category</a> </li>
			<li><a href="#third-cat">Third Category</a> </li>
			<li><a href="#fourth-cat">Fourth Category</a> </li>
		</ul>
		<div id="r-slider-content-right">
			<div id="r-nav">
				<img src="images/prev.png" id="r-prev" alt="Previous">
				<img id="r-next" src="images/next.png" alt="Next"> </div>
		</div>
	</div>
	<div id="r-slider-contents-wrapper">
		<div id="r-slider-content-left">
			<div id="first-cat" style="opacity: 1; width: 6830px; height: 0px;">
				<div class="r-img-wrap" style="left: 0px;">
					<img src="images/1.jpg" style> </div>
				<div class="r-img-wrap" style="left: 1366px;">
					<img src="images/2.jpg" style> </div>
				<div class="r-img-wrap" style="left: 2732px;">
					<img src="images/3.jpg" style> </div>
				<div class="r-img-wrap" style="left: 4098px;">
					<img src="images/4.jpg" style> </div>
				<div class="r-img-wrap" style="left: 5464px;">
					<img src="images/5.jpg" style> </div>
				<div class="clear">
				</div>
			</div>
			<div id="second-cat" style="opacity: 0; width: 6830px; height: 0px;">
				<div class="r-img-wrap" style="left: 0px;">
					<img src="images/1a.jpg" style> </div>
				<div class="r-img-wrap" style="left: 1366px;">
					<img src="images/2a.jpg" style> </div>
				<div class="r-img-wrap" style="left: 2732px;">
					<img src="images/3a.jpg" style> </div>
				<div class="r-img-wrap" style="left: 4098px;">
					<img src="images/4a.jpg" style> </div>
				<div class="r-img-wrap" style="left: 5464px;">
					<img src="images/5a.jpg" style> </div>
				<div class="clear">
				</div>
			</div>
			<div id="third-cat" style="opacity: 0; width: 6830px; height: 0px;">
				<div class="r-img-wrap" style="left: 0px;">
					<img src="images/1b.jpg" style> </div>
				<div class="r-img-wrap" style="left: 1366px;">
					<img src="images/2b.jpg" style> </div>
				<div class="r-img-wrap" style="left: 2732px;">
					<img src="images/3b.jpg" style> </div>
				<div class="r-img-wrap" style="left: 4098px;">
					<img src="images/4b.jpg" style> </div>
				<div class="r-img-wrap" style="left: 5464px;">
					<img src="images/5b.jpg" style> </div>
				<div class="clear">
				</div>
			</div>
			<div id="fourth-cat" style="opacity: 0; width: 6830px; height: 0px;">
				<div class="r-img-wrap" style="left: 0px;">
					<img src="images/1c.jpg" style> </div>
				<div class="r-img-wrap" style="left: 1366px;">
					<img src="images/2.jpg" style> </div>
				<div class="r-img-wrap" style="left: 2732px;">
					<img src="images/3b.jpg" style> </div>
				<div class="r-img-wrap" style="left: 4098px;">
					<img src="images/4a.jpg" style> </div>
				<div class="r-img-wrap" style="left: 5464px;">
					<img src="images/5.jpg" style> </div>
				<div class="clear">
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

JS代码(jquery.easing.1.3.js):

/* * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ * * Uses the built in easing capabilities added In jQuery 1.1 * to offer multiple easing options * * TERMS OF USE - jQuery Easing * * Open source under the BSD License. * * Copyright © 2008 George McGinley Smith * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
	LOSS OF USE,DATA,OR PROFITS;
	OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. **/
// t:current time,b:begInnIng value,c:change In value,d:durationjQuery.easing['jswing'] = jQuery.easing['swing'];
	jQuery.extend( jQuery.easing,{
	def:'easeOutQuad',swing:function (x,t,b,c,d){
	//alert(jQuery.easing.default);
	return jQuery.easing[jQuery.easing.def](x,t,b,c,d);
}
,easeInQuad:function (x,t,b,c,d){
	return c*(t/=d)*t + b;
}
,easeOutQuad:function (x,t,b,c,d){
	return -c *(t/=d)*(t-2) + b;
}
,easeInOutQuad:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t + b;
	return -c/2 * ((--t)*(t-2) - 1) + b;
}
,easeInCubic:function (x,t,b,c,d){
	return c*(t/=d)*t*t + b;
}
,easeOutCubic:function (x,t,b,c,d){
	return c*((t=t/d-1)*t*t + 1) + b;
}
,easeInOutCubic:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t + b;
	return c/2*((t-=2)*t*t + 2) + b;
}
,easeInQuart:function (x,t,b,c,d){
	return c*(t/=d)*t*t*t + b;
}
,easeOutQuart:function (x,t,b,c,d){
	return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
,easeInOutQuart:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
	return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
,easeInQuint:function (x,t,b,c,d){
	return c*(t/=d)*t*t*t*t + b;
}
,easeOutQuint:function (x,t,b,c,d){
	return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
,easeInOutQuint:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
	return c/2*((t-=2)*t*t*t*t + 2) + b;
}
,easeInSine:function (x,t,b,c,d){
	return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
}
,easeOutSine:function (x,t,b,c,d){
	return c * Math.sin(t/d * (Math.PI/2)) + b;
}
,easeInOutSine:function (x,t,b,c,d){
	return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
,easeInExpo:function (x,t,b,c,d){
	return (t==0) ? b:c * Math.pow(2,10 * (t/d - 1)) + b;
}
,easeOutExpo:function (x,t,b,c,d){
	return (t==d) ? b+c:c * (-Math.pow(2,-10 * t/d) + 1) + b;
}
,easeInOutExpo:function (x,t,b,c,d){
	if (t==0) return b;
	if (t==d) return b+c;
	if ((t/=d/2) < 1) return c/2 * Math.pow(2,10 * (t - 1)) + b;
	return c/2 * (-Math.pow(2,-10 * --t) + 2) + b;
}
,easeInCirc:function (x,t,b,c,d){
	return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
}
,easeOutCirc:function (x,t,b,c,d){
	return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
,easeInOutCirc:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
	return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
,easeInElastic:function (x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if (t==0) return b;
	if ((t/=d)==1) return b+c;
	if (!p) p=d*.3;
	if (a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
,easeOutElastic:function (x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if (t==0) return b;
	if ((t/=d)==1) return b+c;
	if (!p) p=d*.3;
	if (a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}
,easeInOutElastic:function (x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if (t==0) return b;
	if ((t/=d/2)==2) return b+c;
	if (!p) p=d*(.3*1.5);
	if (a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
,easeInBack:function (x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	return c*(t/=d)*t*((s+1)*t - s) + b;
}
,easeOutBack:function (x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
,easeInOutBack:function (x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
	return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
,easeInBounce:function (x,t,b,c,d){
	return c - jQuery.easing.easeOutBounce (x,d-t,0,c,d) + b;
}
,easeOutBounce:function (x,t,b,c,d){
	if ((t/=d) < (1/2.75)){
	return c*(7.5625*t*t) + b;
}
else if (t < (2/2.75)){
	return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75)){
	return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else{
	return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
,easeInOutBounce:function (x,t,b,c,d){
	if (t < d/2) return jQuery.easing.easeInBounce (x,t*2,0,c,d) * .5 + b;
	return jQuery.easing.easeOutBounce (x,t*2-d,0,c,d) * .5 + c*.5 + b;
}
}
);
	/* * * TERMS OF USE - EASING EQUATIONS * * Open source under the BSD License. * * Copyright © 2001 Robert Penner * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
	LOSS OF USE,DATA,OR PROFITS;
	OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. * */

CSS代码(style.css):

body{font-family:Helvetica neue,Arial,Tahoma;font-size:16px;}
#r-slider-wrapper{margin:auto;height:80px;position:absolute;z-index:1000;}
#r-slider-category-wrapper{float:left;height:80px;margin:0 5px;}
#r-slider-category-wrapper ul{list-style:none;margin:0;padding:0;float:left;}
#r-slider-category-wrapper ul li{float:left;}
#r-slider-category-wrapper ul li a{display:block;margin-left:10px;text-decoration:none !important;padding:29px 20px 30px;background:#fff;color:#545454;}
#r-slider-category-wrapper ul li a:hover{background:#f9ed0d;color:#333;}
.r-cat-active a{background-color:Yellow !important;color:Black !important;font-weight:bold !important;}
.r-cat-active a{text-decoration:none !important;}
#r-slider-content-left{display:block;float:left;position:fixed;left:0;top:0;overflow:hidden;z-index:-999;height:100%;width:100%;}
#r-slider-content-right{margin-left:10px;float:left;right:0;}
.r-img-wrap{position:absolute;width:100%;}
.r-img-wrap img{width:100%;height:100%;}
.clear{clear:both;}
#r-nav{}
#r-prev,#r-next{cursor:pointer;display:inline-block;}
#r-slider-category-wrapper select{display:none;}
/* ================= Tablet (Portrait) 768px - 959px ================= */
@media only screen and (min-width:768px) and (max-width:959px){#r-slider-category-wrapper ul li a{padding:15px 15px 15px;}
#r-slider-category-wrapper select{display:none;}
#r-prev,#r-next{width:60px;}
}
/* ================= Mobile (Portrait) < 767px ================= */
@media only screen and (max-width:767px){#r-slider-category-wrapper ul li a{padding:5px;font-size:12px;margin-left:5px;}
#r-slider-category-wrapper select{display:none;}
#r-prev,#r-next{cursor:pointer;display:inline-block;width:30px;margin-left:0px;}
}
/* ================= Mobile (Landscape) 480px - 767px ================= */
@media only screen and (min-width:317px) and (max-width:767px){#r-slider-category-wrapper ul{margin:0px;padding:5px;font-size:12px;margin-left:5px;}
#r-slider-category-wrapper select{display:none;}
#r-prev,#r-next{cursor:pointer;display:inline-block;width:30px;margin-left:0px;margin-top:5px;}
}
/* ================= Mobile (Portrait) < 320px ================= */
@media only screen and (max-width:480px){#bsap_1272538{display:none;}
#r-slider-category-wrapper ul{display:none;}
#r-slider-category-wrapper select{margin:0px;display:inline-block;padding:5px;float:left;margin-top:5px;}
#r-prev,#r-next{cursor:pointer;display:inline-block;width:36px;margin-left:0px;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
2.70 MB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
2.70 MB
立即下载
黄馥黛
了解
打赏作者 鼓励作者
Html JS 图片特效4
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章