jquery实现自动切换背景

最新推荐文章于 2024-03-10 13:54:05 发布
最新推荐文章于 2024-03-10 13:54:05 发布
阅读量702 收藏
点赞数
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lswoqsked/article/details/89643231
版权
<?xml version="1.0"?>
  
		<form action="#"><div>
			<div class="column">
				<div class="row">
					<select id="effect">
						<option value="none">None</option>
						<option value="fade">Fade</option>
						<option value="simpleSlide">Simple Slider</option>
						<option value="superSlide">Super Slider</option>
					</select>
				</div>
				<div class="row slide-directions">
					
					<div class="column small">
						<div class="row"><input type="radio" id="dir-n" name="direction" class="direction" checked="checked"/><label for="dir-n">North</label></div>
						<div class="row"><input type="radio" id="dir-s" name="direction" class="direction"/><label for="dir-s">South</label></div>
						<div class="row"><input type="radio" id="dir-w" name="direction" class="direction"/><label for="dir-w">West</label></div>
						<div class="row"><input type="radio" id="dir-e" name="direction" class="direction"/><label for="dir-e">East</label></div>
					</div>
					<div class="column small super-directions">
						<div class="row"><input type="radio" id="dir-nw" name="direction" class="direction"/><label for="dir-nw">North-West</label></div>
						<div class="row"><input type="radio" id="dir-ne" name="direction" class="direction"/><label for="dir-ne">North-East</label></div>
						<div class="row"><input type="radio" id="dir-sw" name="direction" class="direction"/><label for="dir-sw">South-West</label></div>
						<div class="row"><input type="radio" id="dir-se" name="direction" class="direction"/><label for="dir-se">South-East</label></div>
					</div>
				</div>
				<div class="row">
					<h2>Sequence Mode</h2>
					<input type="radio" id="normal" name="mode" class="mode" checked="checked"/><label for="normal">Normal</label>
					<input type="radio" id="back" name="mode" class="mode"/><label for="back">Back</label>
					<span class="mode-randome"><input type="radio" id="random" name="mode" class="mode"/><label for="random">Random</label></span>
				</div>
			</div>
			<div class="column">
				<div class="row">
					<h2>Manual Controls</h2>
					<div class="nav-buttons">
						<a href="javascript:;" id="prev">Previouse image</a>&nbsp;&nbsp;&nbsp;
						<a href="javascript:;" id="next">Next image</a>
					</div>
				</div>
				<div class="row nav-buttons">
					<span class="pager">Pager:</span> <div id="nav">&nbsp;</div>
				</div>
				<div class="row">
					<a href="javascript:;" id="toggleAnimation" >Pause Animation</a>
				</div>
			</div>
		</div></form>
	</div></div>	
	<div class="page-bottom">&nbsp;</div>
</div>
<div style="text-align:center;clear:both">
</div>

main.js
var slide_effect = ‘fade’;
var slide_direction = ‘N’;
var slide_mode = ‘normal’;

$(document).ready(function(){

bindEvents();

});

function bindEvents(){

// set options 
if (slide_effect == 'fade' || slide_effect == 'none') {
	hideObject($('.slide-directions'), 'slide')
} else {
	if (slide_effect == 'simpleSlide') {
		hideObject($('.mode-randome'), 'none');
		if (slide_mode == 'random') slide_mode = 'normal';	
		if ($('INPUT.direction').index($("INPUT#dir-"+slide_direction.toLowerCase()+"")) > 3) {
			slide_direction = 'N';
		}
		
	} else showObject($('.mode-randome'), 'none'); 

	showObject($('.slide-directions'), 'slide');
	
	if (slide_effect == 'superSlide') showObject($('.super-directions'), 'none'); 
		else hideObject($('.super-directions'), 'none');
}
	
if (slide_mode == 'random') {	
	$('#nav').html('');
	hideObject($('.nav-buttons'), 'fade');
} else showObject($('.nav-buttons'), 'fade');
	
$('#toggleAnimation').html("Pause Animation");

$("select#effect option[value='"+slide_effect+"']").attr("selected", true);
$("INPUT#dir-"+slide_direction.toLowerCase()+"").attr('checked', 'checked');
$("INPUT#"+slide_mode+"").attr('checked', 'checked');

// Play / pause button
$('#toggleAnimation').unbind('click');
$('#toggleAnimation').click(function(){
	if ($(this).html() == "Pause Animation"){
		$(this).html("Resume Animation");
		$('BODY').bgStretcher.pause();
	} else {
		$(this).html("Pause Animation");
		$('BODY').bgStretcher.play();
	}
});

// Change Effect
$('SELECT#effect').unbind('change');
$('SELECT#effect').change(function(){
	if ($(this).val() == slide_effect) return true;
	slide_effect = $(this).val();
	$('BODY').bgStretcher.sliderDestroy();
	initBgStretcher();
	bindEvents();
	return true;
});

// Change Direction
$('INPUT.direction').unbind('change');
$('INPUT.direction').change(function(){	
	var new_slide_deriction = $('INPUT.direction:checked').attr('id').split('dir-');
	new_slide_deriction = new_slide_deriction[1].toUpperCase();

	if (new_slide_deriction == slide_direction)	return true;
	slide_direction = new_slide_deriction;

	$('BODY').bgStretcher.sliderDestroy();
	initBgStretcher();
	bindEvents();
	return true;
});

// Change Mode
$('INPUT.mode').unbind('change');
$('INPUT.mode').change(function(){	
	if ($(this).attr('id') == slide_mode) return true;
	slide_mode = $(this).attr('id');

	$('BODY').bgStretcher.sliderDestroy();
	initBgStretcher();
	bindEvents();
	return true;
});

return true;

}

function initBgStretcher(){

$('BODY').bgStretcher({
	images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg', 'images/sample-5.jpg', 'images/sample-6.jpg'],
	imageWidth: 1024, 
	imageHeight: 768, 
	slideDirection: slide_direction,
	slideShowSpeed: 1000,
	transitionEffect: slide_effect,
	sequenceMode: slide_mode,
	buttonPrev: '#prev',
	buttonNext: '#next',
	pagination: '#nav',
	anchoring: 'left center',
	anchoringImg: 'left center'
});

}

function hideObject(obj, hide_effect) {
if ((KaTeX parse error: Expected 'EOF', got '&' at position 16: .browser.msie) &̲& (parseInt(jQu….browser.msie) && (parseInt(jQuery.browser.version) == 6)) {
obj.css({position: ‘static’, left: ‘0px’});
} else {
if (hide_effect == ‘slider’) obj.slideDown();
else if (hide_effect == ‘fade’) obj.fadeIn();
else obj.show();
}
return true;
}
main.css
/*
Background Stretcher jQuery Plugin
?2009 ajaxBlender.com
*/
HTML, BODY {
margin:0px;
padding:0px;
}
BODY {
font-family: “Lucida Grande”, Arial, Helvetica, sans-serif;
color: #666666;
font-size: 12px;
background: #000;
height:100%;
text-align: center;
}
A { color: #0A8ECC; }
A:HOVER {
text-decoration: none;
color: #CCC;
}
H1, H2 {
color: #CCC;
margin: 0;
padding: 0 0 5px 0;
font-size: 16px;
padding-bottom: 3px;
margin-bottom: 15px;
border-bottom: 1px solid #ccc;
}
H1 {
padding-bottom: 3px;
margin-bottom: 15px;
border-bottom: 1px solid #ccc;
}
H2 { font-size: 14px;}
.bgstretcher-page { text-align: center;}
#page {
margin: 0 auto;
width: 800px;
text-align: left;
}
.page-top, .page-bottom,
.page-content {
float: left;
width: 100%;
}
.page-top, .page-bottom { height: 30px;}
.page-top {
margin-top: 30px;
background: url(“images/bg/page-top.png”) no-repeat left top;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’./images/bg/page-top.png’, sizingMethod=‘image’);
}
.page-bottom {
background: url(“images/bg/page-bottom.png”) no-repeat left top;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’./images/bg/page-bottom.png’, sizingMethod=‘image’);
}
.page-content {
font-size: 12px;
color: #ccc;
background: url(“images/bg/page-bg.png”) repeat-y left top;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’./images/bg/page-bg.png’, sizingMethod=‘scale’);
}
.page-wrapper {
float: left;
width: 740px;
display: inline;
margin-left: 30px;
}
.column {
float: left;
width: 320px;
margin-right: 40px;
}
.column .row {
float: left;
width: 100%;
padding-bottom: 13px;
}
.column.small { width: 90px; }
.column.small .row { padding-bottom: 5px;}
.column SELECT { width: 180px;}
.column LABEL {cursor: pointer;}
.column .row SPAN.pager { float: left; margin-right: 15px;}
.column .row A { position: relative; }
P.larger-size { font-size: 16px; }
#page STRONG { color: #FFFFFF; }
#nav UL {
list-style: none;
margin: 0;
padding: 0;
}
#nav UL LI {
display: inline;
margin-right: 8px;
}
#nav UL LI.showPage A { color: #fff; }

bgstretcher.css
/*
Background Stretcher jQuery Plugin
?2011 ajaxBlender.com
For any questions please visit www.ajaxblender.com
or email us at support@ajaxblender.com
*/

HTML {_background: url(/images/trans.gif) no-repeat fixed;}
.bgstretcher-area { text-align: left; }
.bgstretcher, .bgstretcher UL, .bgstretcher UL LI {
position: absolute;
top: 0;
left: 0;
}
.bgstretcher UL, .bgstretcher UL LI {
margin: 0;
padding: 0;
list-style: none;
}
.bgstretcher {
background: black;
overflow: hidden;
width: 100%;
position: fixed;
z-index: 1;
_position: absolute; /IE6 doesn’t support fixed positioning/
top: 0;
left: 0;
}
bgstretcher.js
/*
Background Stretcher jQuery Plugin
?2011 ajaxBlender.com
For any questions please visit www.ajaxblender.com
or email us at support@ajaxblender.com

Version: 2.0.1

*/

;(function($){
/* Variables */
var container = null;
var allLIs = ‘’, containerStr = ‘’;

var element = this;
var _bgStretcherPause = false;
var _bgStretcherAction = false;
var _bgStretcherTm = null;
var random_line = new Array();
var random_temp = new Array();
var r_image = 0;
var swf_mode = false;
var img_options = new Array();

$.fn.bgStretcher = function(settings){
	
	if ($('.bgstretcher-page').length || $('.bgstretcher-area').length) {
		if(typeof(console) !== 'undefined' && console != null) console.log('More than one bgStretcher'); 
		return false;
	}
	settings = $.extend({}, $.fn.bgStretcher.defaults, settings);
	$.fn.bgStretcher.settings = settings;
	
	function _build(body_content){
		if(!settings.images.length){ return; }
		
		_genHtml(body_content);

		containerStr = '#' + settings.imageContainer;
		container = $(containerStr);
		allLIs = '#' + settings.imageContainer + ' LI';
		$(allLIs).hide().css({'z-index': 1, overflow: 'hidden'});
		
		if(!container.length){ return; }
		$(window).resize(function(){
			_resize(body_content)
		});
		
		_resize(body_content);
		
		var stratElement = 0;
		/*  Rebuild images for simpleSlide  */
		if (settings.transitionEffect == 'simpleSlide') {
			if (settings.sequenceMode == 'random') {
				if(typeof(console) !== 'undefined' && console != null) {
					console.log('Effect \'simpleSlide\' don\'t be to use with mode random.');
					console.log('Mode was automaticly set in normal.');
				}
			}
			$(allLIs).css({'float': 'left', position: 'static'});
			$(allLIs).show();
			if ($.fn.bgStretcher.settings.slideDirection == 'NW' || $.fn.bgStretcher.settings.slideDirection == 'NE') {
				$.fn.bgStretcher.settings.slideDirection = 'N';
			}
			if ($.fn.bgStretcher.settings.slideDirection == 'SW' || $.fn.bgStretcher.settings.slideDirection == 'SE') {
				$.fn.bgStretcher.settings.slideDirection = 'S';
			}
			if ($.fn.bgStretcher.settings.slideDirection == 'S' || $.fn.bgStretcher.settings.slideDirection == 'E') {
				settings.sequenceMode = 'back';
				$(allLIs).removeClass('bgs-current');
				$(allLIs).eq($(allLIs).length - $.fn.bgStretcher.settings.startElementIndex - 1).addClass('bgs-current');
				if ($.fn.bgStretcher.settings.slideDirection == 'E') {
					l = $(containerStr + ' LI').index($(containerStr + ' LI.bgs-current')) * $(containerStr).width()*(-1);
					t = 0;
				} else { // S
					t = $(containerStr + ' LI').index($(containerStr + ' LI.bgs-current')) * $(containerStr).height()*(-1);
					l = 0;
				}
				$(containerStr+' UL').css({left: l+'px', top: t+'px'});
			} else {
				settings.sequenceMode = 'normal';
				if ($.fn.bgStretcher.settings.startElementIndex != 0) {
					if ($.fn.bgStretcher.settings.slideDirection == 'N') {
						t = $(containerStr + ' LI').index($(containerStr + ' LI.bgs-current')) * $(containerStr).height()*(-1);
						l = 0;
					} else { // W
						l = $(containerStr + ' LI').index($(containerStr + ' LI.bgs-current')) * $(containerStr).width()*(-1);
						t = 0;
						console.log(l);
					}
					$(containerStr+' UL').css({left: l+'px', top: t+'px'});
				}
			}
		}
		
		if ($(settings.buttonNext).length || $(settings.buttonPrev).length || $(settings.pagination).length){
			if (settings.sequenceMode == 'random') {
				if(typeof(console) !== 'undefined' && console != null) {
					console.log('Don\'t use random mode width prev-button, next-button and pagination.');
				}
			} else {
				/*  Prev and Next Buttons init  */
				if ($(settings.buttonPrev).length){
					$(settings.buttonPrev).addClass('bgStretcherNav bgStretcherNavPrev');
					$(settings.buttonPrev).click(function(){
						$.fn.bgStretcher.buttonSlide('prev');
					});
				}
				if ($(settings.buttonNext).length){
					$(settings.buttonNext).addClass('bgStretcherNav bgStretcherNavNext');
					$(settings.buttonNext).click(function(){
						$.fn.bgStretcher.buttonSlide('next');
					});
				}
				/*  Pagination  */
				if ($(settings.pagination).length) {
					$.fn.bgStretcher.pagination();
				}
			}
		}
		
		/*  Random mode init  */
		if (settings.sequenceMode == 'random') {
			var i = Math.floor(Math.random()*$(allLIs).length);
			$.fn.bgStretcher.buildRandom(i);
			if (settings.transitionEffect != 'simpleSlide') {
				$.fn.bgStretcher.settings.startElementIndex = i;
			}
			stratElement = i;
		} else {
			if ($.fn.bgStretcher.settings.startElementIndex > ($(allLIs).length - 1)) $.fn.bgStretcher.settings.startElementIndex = 0;
			stratElement = $.fn.bgStretcher.settings.startElementIndex;
			if (settings.transitionEffect == 'simpleSlide') {
				if ($.fn.bgStretcher.settings.slideDirection == 'S' || $.fn.bgStretcher.settings.slideDirection == 'E') {
					stratElement = $(allLIs).length - 1 - $.fn.bgStretcher.settings.startElementIndex;
				}
			}
		}
		
		$(allLIs).eq(stratElement).show().addClass('bgs-current');
		$.fn.bgStretcher.loadImg($(allLIs).eq(stratElement));
		
		/*  Go slideshow  */
		if(settings.slideShow && $(allLIs).length > 1){
			_bgStretcherTm = setTimeout('jQuery.fn.bgStretcher.slideShow(\''+jQuery.fn.bgStretcher.settings.sequenceMode+'\', -1)', settings.nextSlideDelay);
		}
		
	};
	
	function _resize(body_content){
		var winW = 0;
		var winH = 0;
		var contH = 0;
		var contW = 0;
		
		if ($('BODY').hasClass('bgStretcher-container')) {
			winW = $(window).width();
			winH = $(window).height(); 
			if (($.browser.msie) && (parseInt(jQuery.browser.version) == 6)) {
				$(window).scroll(function(){
					$('#'+settings.imageContainer).css('top', $(window).scrollTop());
				});					
			}
		} else {
			$('.bgstretcher').css('position', 'absolute').css('top', '0px');
			winW = body_content.width();
			winH = body_content.height(); 
		}
		
		var imgW = 0, imgH = 0;
		var leftSpace = 0;
		
		//	Max image size
		if(settings.maxWidth != 'auto'){
			if (winW > settings.maxWidth){
				leftSpace = (winW - settings.maxWidth)/2;
				contW = settings.maxWidth;
			} else contW = winW;
		} else contW = winW;
		if(settings.maxHeight != 'auto'){
			if (winH > settings.maxHeight){
				contH = settings.maxHeight;
			} else contH = winH;
		} else contH = winH;
		
		//	Update container's size
		container.width(contW);
		container.height(contH);
		
		//	Non-proportional resize
		if(!settings.resizeProportionally){
			imgW = contH;
			imgH = contH;
		} else {
			var initW = settings.imageWidth, initH = settings.imageHeight;
			var ratio = initH / initW;
			
			imgW = contW;
			imgH = Math.round(contW * ratio);
			
			if(imgH < contH){
				imgH = contH;
				imgW = Math.round(imgH / ratio);
			}
		}
		
		// Anchoring
		var mar_left = 0;
		var mar_top = 0;
		var anchor_arr;
		if ($.fn.bgStretcher.settings.anchoring != 'left top') {
			anchor_arr = ($.fn.bgStretcher.settings.anchoring).split(' ');
			if (anchor_arr[0] == 'right') {
				mar_left = (winW - contW);
			} else {
				if (anchor_arr[0] == 'center') mar_left = Math.round((winW - contW)/2);
			}
			if (anchor_arr[1] == 'bottom') {
				mar_top = (winH - contH);
			} else {
				if (anchor_arr[1] == 'center') {
					mar_top = Math.round((winH - contH)/2);
				}
			}
			container.css('marginLeft', mar_left+'px').css('marginTop', mar_top+'px');
		}
		mar_left = 0;
		mar_top = 0;
		if ($.fn.bgStretcher.settings.anchoringImg != 'left top') {
			anchor_arr = ($.fn.bgStretcher.settings.anchoringImg).split(' ');
			if (anchor_arr[0] == 'right') {
				mar_left = (contW - imgW);
			} else {
				if (anchor_arr[0] == 'center') mar_left = Math.round((contW - imgW)/2);
			}
			if (anchor_arr[1] == 'bottom') {
				mar_top = (contH - imgH);
			} else {
				if (anchor_arr[1] == 'center') {
					mar_top = Math.round((contH - imgH)/2);
				}
			}
		}
		img_options['mar_left'] = mar_left;
		img_options['mar_top'] = mar_top;
		
		//	Apply new size for images
		if (container.find('LI:first').hasClass('swf-mode')) {
			
			var path_swf = container.find('LI:first').html();
			container.find('LI:first').html('<div id="bgstretcher-flash">&nbsp;</div>');
			
			var header = new SWFObject('flash/stars.swf', 'flash-obj', contW, contH, '9');
			header.addParam('wmode', 'transparent');
			header.write('bgstretcher-flash');
			
		}; 
		img_options['imgW'] = imgW;
		img_options['imgH'] = imgH;
		
		if(!settings.resizeAnimate){
			container.children('UL').children('LI.img-loaded').find('IMG').css({'marginLeft': img_options["mar_left"]+'px', 'marginTop': img_options["mar_top"]+'px'});
			container.children('UL').children('LI.img-loaded').find('IMG').css({'width': img_options["imgW"]+'px', 'height': img_options["imgH"]+'px'});
		} else {
			container.children('UL').children('LI.img-loaded').find('IMG').animate({'marginLeft': img_options["mar_left"]+'px', 'marginTop': img_options["mar_top"]+'px'}, 'normal');
			container.children('UL').children('LI.img-loaded').find('IMG').animate({'width': img_options["imgW"]+'px', 'height': img_options["imgH"]+'px'}, 'normal');
		}
		
		$(allLIs).width(container.width()).height(container.height());
		
		if ($.fn.bgStretcher.settings.transitionEffect == 'simpleSlide') {
			if ($.fn.bgStretcher.settings.slideDirection == 'W' || $.fn.bgStretcher.settings.slideDirection == 'E') {
				container.children('UL').width(container.width() * $(allLIs).length).height(container.height());
				if ( $(containerStr + ' LI').index($(containerStr + ' LI.bgs-current')) != -1 ){
					l = $(containerStr + ' LI').index($(containerStr + ' LI.bgs-current')) * container.width()*(-1);
					container.children('UL').css({left: l+'px'});
				}
			} else {
				container.children('UL').height(container.height() * $(allLIs).length).width(container.width());
				if ( $(containerStr + ' LI').index($(containerStr + ' LI.bgs-current')) != -1 ){
					t = $(containerStr + ' LI').index($(containerStr + ' LI.bgs-current')) * $(containerStr).height()*(-1);
					container.children('UL').css({top: t+'px'});
				}
			}
		}
		
	};
	
	function _genHtml(body_content){
		var code = '';
		var cur_bgstretcher;

		body_content.each(function(){
			$(this).wrapInner('<div class="bgstretcher-page" />').wrapInner('<div class="bgstretcher-area" />');
			code = '<div id="' + settings.imageContainer + '" class="bgstretcher"><ul>';
			// if swf
			if (settings.images.length) {
				var ext = settings.images[0].split('.');
				ext = ext[ext.length-1];
				
				if (ext != 'swf') {
					var ind = 0;
					for(i = 0; i < settings.images.length; i++){
						if (settings.transitionEffect == 'simpleSlide' && settings.sequenceMode == 'back') 
							ind = settings.images.length-1-i;
								else ind = i;
						if ($.fn.bgStretcher.settings.preloadImg) {
								code += '<li><span class="image-path">' + settings.images[ind] + '</span></li>';
							} else {
								code += '<li class="img-loaded"><img src="' + settings.images[ind] + '" alt="" /></li>';
							}		
					}
				} else {
					code += '<li class="swf-mode">' + settings.images[0] + '</li>';	
				}
			}
			
			code += '</ul></div>';
			cur_bgstretcher = $(this).children('.bgstretcher-area');
			$(code).prependTo(cur_bgstretcher);
			cur_bgstretcher.css({position: 'relative'});
			cur_bgstretcher.children('.bgstretcher-page').css({'position': 'relative', 'z-index': 3});
		});

	};
	
	/*  Start bgStretcher  */
	this.addClass('bgStretcher-container');
	_build(this);
};

$.fn.bgStretcher.loadImg = function(obj){
	if (obj.hasClass('img-loaded')) return true;
	obj.find('SPAN.image-path').each(function(){
		var imgsrc = $(this).html();
		var imgalt = '';
		var parent = $(this).parent();
		var img = new Image();
		
		$(img).load(function () {
			$(this).hide();
			parent.prepend(this);
			$(this).fadeIn('100');
		}).error(function () {
		}).attr('src', imgsrc).attr('alt', imgalt);
		
		$(img).css({'marginLeft': img_options["mar_left"]+'px', 'marginTop': img_options["mar_top"]+'px'});
		$(img).css({'width': img_options["imgW"]+'px', 'height': img_options["imgH"]+'px'});
	});
	obj.addClass('img-loaded');
	return true;
}

$.fn.bgStretcher.play = function(){
   _bgStretcherPause = false;
   $.fn.bgStretcher._clearTimeout();
   $.fn.bgStretcher.slideShow($.fn.bgStretcher.settings.sequenceMode, -1);
   
};

$.fn.bgStretcher._clearTimeout = function(){
   if(_bgStretcherTm != null){
       clearTimeout(_bgStretcherTm);
       _bgStretcherTm = null;
   }
}

$.fn.bgStretcher.pause = function(){
   _bgStretcherPause = true;
   $.fn.bgStretcher._clearTimeout();
};

$.fn.bgStretcher.sliderDestroy = function(){
	var cont = $('.bgstretcher-page').html();
	$('.bgStretcher-container').html('').html(cont).removeClass('bgStretcher-container');
	$.fn.bgStretcher._clearTimeout();
	_bgStretcherPause = false;
}

/*  Slideshow  */
$.fn.bgStretcher.slideShow = function(sequence_mode, index_next){	
	_bgStretcherAction = true;
	if ($(allLIs).length < 2) return true;
	var current = $(containerStr + ' LI.bgs-current');
	var next;
    
    $(current).stop(true, true);
	
	if (index_next == -1) {
		switch (sequence_mode){
			case 'back':
				next = current.prev();
				if(!next.length){ next = $(containerStr + ' LI:last'); 	}
				break;
			case 'random':
				if (r_image == $(containerStr + ' LI').length) {
					$.fn.bgStretcher.buildRandom(random_line[$(containerStr + ' LI').length-1]);
					r_image = 0;
				}
				next = $(containerStr + ' LI').eq(random_line[r_image]);
				r_image++;
				break;
			default:
				next = current.next();
				if(!next.length){ next = $(containerStr + ' LI:first'); }	
		}
	} else {
		next = $(containerStr + ' LI').eq(index_next);
	}
	
	$(containerStr + ' LI').removeClass('bgs-current');
	$.fn.bgStretcher.loadImg(next);
	next.addClass('bgs-current');
	
	switch ($.fn.bgStretcher.settings.transitionEffect){
		case 'fade':
			$.fn.bgStretcher.effectFade(current, next);
			break;
		case 'simpleSlide':
			$.fn.bgStretcher.simpleSlide();
			break;
		case 'superSlide':
			$.fn.bgStretcher.superSlide(current, next, sequence_mode);
			break;
		default : 
			$.fn.bgStretcher.effectNone(current, next);
			
		}
	if ($($.fn.bgStretcher.settings.pagination).find('LI').length) {
		$($.fn.bgStretcher.settings.pagination).find('LI.showPage').removeClass('showPage');
		$($.fn.bgStretcher.settings.pagination).find('LI').eq($(containerStr + ' LI').index($(containerStr + ' LI.bgs-current'))).addClass('showPage');
	}
		
	// callback
	if ($.fn.bgStretcher.settings.callbackfunction) {
		if(typeof $.fn.bgStretcher.settings.callbackfunction == 'function')
				$.fn.bgStretcher.settings.callbackfunction.call();
	}	
	
	if(!_bgStretcherPause){
	  _bgStretcherTm = setTimeout('jQuery.fn.bgStretcher.slideShow(\''+jQuery.fn.bgStretcher.settings.sequenceMode+'\', -1)', jQuery.fn.bgStretcher.settings.nextSlideDelay);
	}
};

/*  Others effects  */
$.fn.bgStretcher.effectNone = function(current, next){
	next.show();
	current.hide();
	_bgStretcherAction = false;
};	
$.fn.bgStretcher.effectFade = function(current, next){
	next.fadeIn( $.fn.bgStretcher.settings.slideShowSpeed );
	current.fadeOut( $.fn.bgStretcher.settings.slideShowSpeed, function(){
		_bgStretcherAction = false;
	} );
};

$.fn.bgStretcher.simpleSlide = function(){
	var t, l;
	switch ($.fn.bgStretcher.settings.slideDirection) {
		case 'N':
		case 'S':
			t = $(containerStr + ' LI').index($(containerStr + ' LI.bgs-current')) * $(containerStr).height()*(-1);
			l = 0;
			break;
		default:
			l = $(containerStr + ' LI').index($(containerStr + ' LI.bgs-current')) * $(containerStr).width()*(-1);
			t = 0;
	}
	$(containerStr+' UL').animate({left: l+'px', top: t+'px'}, $.fn.bgStretcher.settings.slideShowSpeed, function(){
		_bgStretcherAction = false;
	});
	
};

$.fn.bgStretcher.superSlide = function(current, next, sequence_mode){
	var t, l;
	switch ($.fn.bgStretcher.settings.slideDirection) {
		case 'S':
			t = $(containerStr).height();
			l = 0;
			break;
		case 'E':
			t = 0;
			l = $(containerStr).width();
			break;
		case 'W':
			t = 0;
			l = $(containerStr).width()*(-1);
			break;
		case 'NW':
			t = $(containerStr).height()*(-1);
			l = $(containerStr).width()*(-1);
			break;
		case 'NE':
			t = $(containerStr).height()*(-1);
			l = $(containerStr).width();
			break;
		case 'SW':
			t = $(containerStr).height();
			l = $(containerStr).width()*(-1);
			break;
		case 'SE':
			t = $(containerStr).height();
			l = $(containerStr).width();
			break;	
		default:
			t = $(containerStr).height()*(-1);
			l = 0;

	}
			
	if (sequence_mode == 'back') {
			next.css({'z-index': 2, top: t+'px', left: l+'px'});
			next.show();
			next.animate({left: '0px', top: '0px'}, $.fn.bgStretcher.settings.slideShowSpeed, function(){
					current.hide();
					$(this).css({'z-index': 1});
					_bgStretcherAction = false;
				});
		} else {
				current.css('z-index', 2);
				next.show();
				current.animate({left: l+'px', top: t+'px'}, $.fn.bgStretcher.settings.slideShowSpeed, function(){
					$(this).hide().css({'z-index': 1, top: '0px', left: '0px'});
					_bgStretcherAction = false;
				});
			}	
};

/*  Build line random images  */
$.fn.bgStretcher.buildRandom = function(el_not){
	var l = $(allLIs).length;
	var i, j, rt;
	for (i = 0; i < l; i++ ) {
		random_line[i] = i;
		random_temp[i] = Math.random()*l;
	}
	for (i = 0; i < l; i++ ) {
		for (j = 0; j < (l-i-1); j++) {
			if (random_temp[j] > random_temp[j+1]) {
				rt = random_temp[j];
				random_temp[j] = random_temp[j+1];
				random_temp[j+1] = rt;
				rt = random_line[j];
				random_line[j] = random_line[j+1];
				random_line[j+1] = rt;
			}
		}
	}
	
	if (random_line[0] == el_not) {
		rt = random_line[0];
		random_line[0] = random_line[l-1];
		random_line[l-1] = rt;
	}
};

/*  Prev and Next buttons */
$.fn.bgStretcher.buttonSlide = function(button_point){
	if (_bgStretcherAction || ($(allLIs).length < 2)) return false;
	var mode = '';
	if (button_point == 'prev') {
		mode = 'back';
		if ($.fn.bgStretcher.settings.sequenceMode == 'back')  mode = 'normal';
	} else {
		mode = $.fn.bgStretcher.settings.sequenceMode;
	}
	$(allLIs).stop(true, true);
	$.fn.bgStretcher._clearTimeout();
	$.fn.bgStretcher.slideShow(mode, -1);
	return false;
};

/*  Pagination  */
$.fn.bgStretcher.pagination = function(){
	var l = $(allLIs).length;
	var output = ''; var i = 0;
	if (l > 0) {
		output += '<ul>';
			for (i = 0; i < l; i++){
				output += '<li><a href="javascript:;">'+(i+1)+'</a></li>';
			}
		output += '</ul>';
		$($.fn.bgStretcher.settings.pagination).html(output);
		$($.fn.bgStretcher.settings.pagination).find('LI:first').addClass('showPage');
		
		$($.fn.bgStretcher.settings.pagination).find('A').click(function(){
			if ($(this).parent().hasClass('showPage')) return false;
			$(allLIs).stop(true, true);
			$.fn.bgStretcher._clearTimeout();
			$.fn.bgStretcher.slideShow($.fn.bgStretcher.settings.sequenceMode, $($.fn.bgStretcher.settings.pagination).find('A').index($(this)));
			return false;
		});
		
	}
	return false;
}

/*  Default Settings  */
$.fn.bgStretcher.defaults = {
	imageContainer:             'bgstretcher',
	resizeProportionally:       true,
	resizeAnimate:              false,
	images:                     [],
	imageWidth:                 1024,
	imageHeight:                768,
	maxWidth:					'auto',
	maxHeight:					'auto',
	nextSlideDelay:             3000,
	slideShowSpeed:             'normal',
	slideShow:                  true,
	transitionEffect:			'fade', // none, fade, simpleSlide, superSlide
	slideDirection:				'N', // N, S, W, E, (if superSlide - NW, NE, SW, SE)
	sequenceMode:				'normal', // back, random
	buttonPrev:					'',
	buttonNext:					'',
	pagination: 				'',
	anchoring: 					'left top', // right bottom center
	anchoringImg: 				'left top', // right bottom center
	preloadImg:					false,
	startElementIndex:			0,
	callbackfunction:			null
};
$.fn.bgStretcher.settings = {};

})(jQuery);

lswoqsked
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS+JQuery自动切换背景颜色
weixin_45746054的博客
10-22 486
**JS+JQuery自动切换背景颜色 效果图 HTML代码` <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jQuery.js"></sc...
基于jQuery实现自动或点击切换效果
苦涩
07-01 1041
效果图 功能：元素自动切换，当点击下方小圆点时，控制上方元素同步切换 方法：主要是定义一个全局变量，通过自增变化来控制自动切换效果，其中当自身显示时，兄弟元素隐藏；给小圆点添加单击事件，当点击时，传递自身对象给单击切换函数，通过对象获取点击对象的下标值，从而切换元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</.
jquery背景自动切换特效
u011927449的博客
07-08 294
查看效果网址：http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下。代码如下： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 ..
jquery 轮播 自动切换 手动切换
yuhuamei的博客
06-08 196
jquery 轮播 自动切换 手动切换 js代码 var current = 0; // 存储list的索引值 // 手动点击数字切换内容 $('#parkSer li').click(function(){ var idx = $(this).index(); current = idx; $(this).addClass('serActive'); $(this).siblings().removeClass('serA
jQuery实现网页背景自动切换效果
05-12
内容索引:脚本资源,jQuery,背景切换,jQuery无刷新切换　　jQuery实现网页的背景图片自动播放的实例，程序中加有控制按钮，用于打开、关闭本功能，点击暂停按钮，背景便会静止不动了，与每次打开背景随机载入一张图片是不同的，本效果实现的是打开网页后，背景在一定间隔内自动切换，不需要你控制。当你不需要背景变换时，你可以选择关掉它。
jquery背景自动切换特效特效代码
03-20
标题 "jquery背景自动切换特效特效代码" 涉及到的是使用jQuery库来实现网页背景图像的动态切换效果。jQuery是一个流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在这个特效中，背景...
Jquery实现图片左右自动滚动示例
10-26
`autoSlide()`函数通常会设置一个定时器（例如`setInterval()`），每隔一定时间调用一次滚动函数，实现图片的自动切换。为了在用户交互时暂停自动滚动，可以使用`clearInterval()`。 通过这个示例，我们可以学习到...
jquery实现简单自动轮播图效果
10-15
本文将深入探讨如何使用 jQuery 实现一个简单的自动轮播图效果。 首先，我们来分析给出的 HTML 结构。轮播图的核心部分包含了一个 `id` 为 "box" 的容器，其中包含三个子元素：一个用于展示图片的 `ul`（class 为 ...
jQuery点击切换背景图片代码
06-01
在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM操作、事件处理和动画效果等任务。...在实际项目中，你可以根据需求扩展这个功能，比如增加多个图片选项、添加过渡效果或者设置定时自动切换等。
简单的JQuery背景图自动切换
reiko
05-12 1625
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> swapbackpicture http://keleyi.com/keleyi/phtml/jqplug/9/bgstretcher.css" />-->             HTML {_bac
jQuery 背景图片切换效果插件
10-16
可以为你的网页添加多张背景图，且多个背景图能够自动切换，同时背景图大小可以自适应浏览器窗口的大小。背景图的切换效果有淡入淡出，滚动，幻灯，其中选用滚动和幻灯时，可以选择方向，上下左右，或者左上右下，右上左下。图片切换顺序也可以设置正向，反向或者随机。支持所有新版浏览器；支持单张或者多张图片。
jquery背景图片轮播特效.zip
07-04
jquery背景图片轮播特效是一款支持图片左右滑动，图片自动播放，带左右控制按钮。
jquery切换按钮背景图片
xiao_jam的博客
12-07 3804
有三个按钮，默认背景图片浅色的，当点击任意一个按钮更换其背景图片颜色加深。 第一步：引入jquery包 第二步：HTML页面 第三步：style样式 第四步：jquery事件 第五步：效果展示
jq实现tab转换 php,jQuery实现的定时自动切换tab效果
weixin_35094077的博客
03-16 245
Tab标签式选项卡内容切换是比较常见的网页效果，这种方式能节约网页篇幅。我们常见的是用户点击或鼠标移至触发实现切换，而本文实例讲述的则是基于jQuery实现的定时自动切换tab效果。现在将实例代码分享给大家供大家参考，具体代码如下：htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DT...
jq实现背景图片动态切换
qq_45601889的博客
10-14 2296
在很多需求中都用到了利用jquery实现背景图片的动画效果，接下来我们将实现点击ul中的li实现背景图片的动态切换。 思路和实现步骤： 1、先建立静态页面。其中box盒子用来动态生成ul,li,a和img;box_bg和box_sta盒子主要用来实现背景图片的切换 <body> <div class="box"></div> <div class="box_bg"></div> <div class="box_sta"
jquery自动切换图片
baidu_27055905的博客
06-10 506
/*CSS*/ .BannerBOX{width:100%; height:425px;  position:relative; overflow:hidden; margin:0 auto; min-width:1100px;} .cdl li{ width:20px; height:20px; float:left;  list-style:none; background-image:u
如何使用JQ封装轮播图 实现自动轮播、点击切换等效果..
恩阿、的博客
12-19 395
css部分： *{ margin: 0; padding: 0; } #banner{ width: 800px; height: 500px; margin: 30px auto; position: relative; overflow: hidden; } #box_wrap img{ width: 100%; height: 500px; cursor: pointer; } .listdian{ widt
使用jQuery的两种方法实现背景切换
u_u2020的博客
05-01 3175
使用jQuery的两种方法实现背景切换 背景点击切换 首先给每个div设置背景，再给每个div绑定点击事件，使得body的背景可以切换。 注意：jQuery和js点击事件的绑定有一些差异， js绑定如下： document.getElementById("a1").onclick=function(){} jQuery绑定如下： $(".div1").click(function(){}) 它们很相似，但是有两处不同，我用不同的颜色标记出来了 其中的css()是jQuery中的一个
推荐一款开源的jQuery背景切换插件：jQuery bgSwitcher
最新发布
gitblog_00010的博客
03-10 397
推荐一款开源的jQuery背景切换插件：jQuery bgSwitcher 如果你正在寻找一个轻量级、易于使用的jQuery插件来实现网页背景图片的动态切换效果，那么我推荐你试试jQuery bgSwitcher。 项目简介 jQuery bgSwitcher是一款基于jQuery编写的背景切换插件，可以轻松实现在网页上显示多个背景图片，并在一定时间内自动切换。它具有良好的可定制性，你可以根据自己...
jQuery + easyUI API 实现动态 tabs 功能
这个文档中的核心内容是利用这两个工具组合实现网页上的可切换面板（tabs）功能。 2. **HTML Markup**： - 使用`<div>`元素定义tabs容器，例如`;height:250px;">`，其中包含多个子`<div>`，每个子`<div>`代表一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值