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

loopedSlider带箭头图片切换特效代码

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

以下是 loopedSlider带箭头图片切换特效代码 的示例演示效果:

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

部分效果截图:

loopedSlider带箭头图片切换特效代码

HTML代码(index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>loopedSlider</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.min.js" type="text/javascript"></script>
<script src="js/loopedSlider.js" type="text/javascript"></script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:normal 13px/18px helvetica, arial, sans-serif;color:#444;background:#fafafa;text-align:left;letter-spacing:0.5px;}
/* loopedSlider */
#loopedSlider{position:relative;width:500px;height:410px;margin:50px auto 0 auto;}
.slidepic{position:relative;margin-top:20px;height:375px;width:500px;overflow:hidden;}
.slidepic div{background-color:#eaeaea;opacity:0;z-index:0;position:absolute;top:0;left:0;width:500px;}
.pagination{margin:9px auto;width:140px;height:15px;}
.pagination li,.nav-buttons li{float:left;margin:0 5px;display:inline;}	
.pagination a{display:block;width:12px;padding-top:12px;height:0;overflow:hidden;background:url(img/pagination.png) no-repeat;}
.pagination a.active {background-position:0 -12px}
.nav-buttons li.p{position:absolute;top:200px;left:-32px;}
.nav-buttons li.n{position:absolute;top:200px;right:-32px;}
</style>
</head>

<body>

<div id="loopedSlider">
	<div class="slidepic">
		<div id="photo-1"><img src="img/image-01.jpeg" width="500" height="375" alt="Image 01" /></div>
		<div id="photo-2"><img src="img/image-02.jpeg" width="500" height="375" alt="Image 02" /></div>
		<div id="photo-3"><img src="img/image-03.jpeg" width="500" height="375" alt="Image 03" /></div>
		<div id="photo-4"><img src="img/image-04.jpeg" width="500" height="375" alt="Image 04" /></div>
		<div id="photo-5"><img src="img/image-05.jpeg" width="500" height="375" alt="Image 05" /></div>
		<div id="photo-6"><img src="img/image-06.jpeg" width="500" height="375" alt="Image 06" /></div>
	</div>
	<ul class="nav-buttons">
		<li class="p"><a href="javascript:void(0);" class="previous"><img src="img/previous.png" width="22" height="22" alt="Previous" /></a></li>
		<li class="n"><a href="javascript:void(0);" class="next"><img src="img/next.png" width="22" height="22" alt="Next" /></a></li>
	</ul>
	<ul class="pagination">
		<li><a href="#photo-1">one</a></li>
		<li><a href="#photo-2">two</a></li>
		<li><a href="#photo-3">three</a></li>
		<li><a href="#photo-4">four</a></li>
		<li><a href="#photo-5">five</a></li>
		<li><a href="#photo-6">six</a></li>
	</ul>
</div>


<script type="text/javascript">
$(function(){
	$('#loopedSlider').loopedSlider({
		container : 'slidepic',
		slideClass: 'photo',
		autoHeight: false,
		fadeSpeed: 250,
		slideSpeed: 150
	});
});	
</script>
</body>
</html>

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

/* * jQuery EasIng v1.1.2 - http://gsgd.co.uk/sandbox/jquery.easIng.php * * Uses the built In easIng capabilities added In jQuery 1.1 * to offer multiple easIng options * * Copyright (c) 2007 George Smith * Licensed under the MIT License:* http://www.opensource.org/licenses/mit-license.php */
// t:current time,b:begInnIng value,c:change In value,d:durationjQuery.extend( jQuery.easing,{
	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;
}
}
);

JS代码(loopedSlider.js):

/* *loopedSlider - jQuery plugin *written by Nathan Searles *http://code.google.com/p/loopedslider/ * *Copyright (c) 2009 Nathan Searles (http://nathansearles.com/loopedslider/) *Dual licensed under the MIT (MIT-LICENSE.txt) *and GPL (GPL-LICENSE.txt) licenses. * *Built for jQuery library *http://jquery.com * */
(function($){
	$.fn.extend({
	loopedSlider:function(options){
	return this.each(function(){
	// set defaultsvar defaults ={
	container:'container',slideClass:'slide',pagination:'pagination',navButtons:'nav-buttons',fadeSpeed:400,slideSpeed:250,animateSpeed:200,autoHeight:true,padding:20,easing:'easeOutQuad'}
;
	// set variablesvar obj = $(this);
	var o = $.extend(defaults,options);
	var u = false;
	var w = obj.width();
	var h = obj.height();
	var f = $('.'+o.container,obj).find('div:first').attr('id');
	var l = $('.'+o.container,obj).find('div:last').attr('id');
	// funcitonsfunction setToActive(c){
	var current = $(c).attr('id');
	$('a[href$="'+current+'"]',obj).addClass('active');
}
// applies style to divs$('.'+o.container,obj).find('div').css({
	'z-index':0,opacity:0}
);
	// load first slide$('.'+o.container,obj).find('div:eq(0)').animate({
	opacity:1.0}
,o.fadeSpeed,function(){
	$(this).css({
	'z-index':100}
);
	$(this).addClass('current');
	if (o.autoHeight===true){
	// gets height of new slidevar newHeight = $(this,obj).height() + o.padding;
	$('.'+o.container,obj).animate({
	'height':newHeight}
,o.animateSpeed,o.easing);
}
setToActive(this);
}
);
	// fade code$('.'+o.pagination,obj).find('a').click(function(){
	if(u===false && ($(this).hasClass('active')===false)){
	u = true;
	// removes active$('a',obj).removeClass('active');
	// fades out current slide$('.'+o.container,obj).find('div').animate({
	opacity:0}
,o.fadeSpeed,function(){
	$(this).removeClass('current');
	$(this).css({
	'z-index':0}
);
}
);
	// setsup value for new slidevar x = 0;
	var parentId = $(this).attr('href');
	var parentSplit = parentId.split('-');
	x = ((parentSplit[1]*1));
	if (o.autoHeight===true){
	// gets height of new slidevar newHeight = $('#'+o.slideClass+'-'+(x),obj).height() + o.padding;
	$('.'+o.container,obj).animate({
	'height':newHeight}
,o.animateSpeed,o.easing);
}
// fades in new slide$('#'+o.slideClass+'-'+(x),obj).animate({
	opacity:1.0}
,o.fadeSpeed,function(){
	$(this).css({
	'z-index':100}
);
	$(this).addClass('current');
	u = false;
	setToActive(this);
}
);
}
return false;
}
);
	// slide code$('.'+o.navButtons,obj).find('a').click(function(){
	if(u===false){
	u = true;
	var loop = false;
	var fLoop = f;
	var lLoop = l;
	// removes active state$('a',obj).removeClass('active');
	// flips directionsif ($(this).hasClass('next')){
	var nextD = -w;
	var previousD = w;
	var direction = +1;
}
if ($(this).hasClass('previous')){
	nextD = w;
	previousD = -w;
	direction = -1;
}
// setup the loopif ($('#'+fLoop,obj).hasClass('current')){
	loop = 'first';
}
if (($('#'+lLoop,obj).hasClass('current'))){
	loop = 'last';
}
// get the name of the new slideif ((loop==='first') && ($(this).hasClass('previous'))){
	lLoop = lLoop.split('-');
	x = ((lLoop[1]*1));
}
else if ((loop==='last') && ($(this).hasClass('next'))){
	fLoop = fLoop.split('-');
	x = ((fLoop[1]*1));
}
else{
	// setsup value for new slidevar getCurrent = $('.'+o.container,obj).find('.current').attr('id');
	getCurrent = getCurrent.split('-');
	x = ((getCurrent[1]*1+direction));
}
// gets height of new slideif (o.autoHeight===true){
	var newHeight = $('#'+o.slideClass+'-'+(x),obj).height() + o.padding;
	$('.'+o.container,obj).animate({
	'height':newHeight}
,o.animateSpeed,o.easing);
}
// sets next slide to slide in position$('#'+o.slideClass+'-'+(x),obj).css({
	opacity:1,left:previousD,'z-index':100}
);
	// slides in new slide$('#'+o.slideClass+'-'+(x),obj).animate({
	left:0}
,o.slideSpeed,o.easing,function(){
	$(this).addClass('current');
	$(this).css({
	opacity:1}
);
	u = false;
	// Sets active state for pagination asetToActive(this);
}
);
	// slides out current slide$('.'+o.container,obj).find('.current').animate({
	'left':nextD}
,o.slideSpeed,o.easing,function(){
	$(this).removeClass('current');
	$(this).css({
	opacity:0,left:0,'z-index':0}
);
}
);
}
return false;
}
);
}
);
}
}
);
}
)(jQuery);
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
807.37 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
807.37 KB
立即下载
樊琬凝馨
了解
打赏作者 鼓励作者
Html Js 图片切换触摸2
最新结算
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
打赏文章