Смяна на картинката на JS slider

K

k0kicha

Registered
Имам следния слайдър:

lof-slider.js
Код: 
/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
 * Licensed under the MIT License (LICENSE.txt).
 *
 * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 * Thanks to: Seamus Leahy for adding deltaX and deltaY
 *
 * Version: 3.0.6
 * 
 * Requires: 1.2.2+
 */

(function($) { 

var types = ['DOMMouseScroll', 'mousewheel'];

if ($.event.fixHooks) {
    for ( var i=types.length; i; ) {
        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
    }
}

$.event.special.mousewheel = {
    setup: function() {
        if ( this.addEventListener ) {
            for ( var i=types.length; i; ) {
                this.addEventListener( types[--i], handler, false );
            }
        } else {
            this.onmousewheel = handler;
        }
    },
    
    teardown: function() {
        if ( this.removeEventListener ) {
            for ( var i=types.length; i; ) {
                this.removeEventListener( types[--i], handler, false );
            }
        } else {
            this.onmousewheel = null;
        }
    }
};

$.fn.extend({
    mousewheel: function(fn) {
        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
    },
    
    unmousewheel: function(fn) {
        return this.unbind("mousewheel", fn);
    }
});


function handler(event) {
    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
    event = $.event.fix(orgEvent);
    event.type = "mousewheel";
    
    // Old school scrollwheel delta
    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
    
    // New school multidimensional scroll (touchpads) deltas
    deltaY = delta;
    
    // Gecko
    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
        deltaY = 0;
        deltaX = -1*delta;
    }
    
    // Webkit
    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
    
    // Add event and delta to the front of the arguments
    args.unshift(event, delta, deltaX, deltaY);
    
    return ($.event.dispatch || $.event.handle).apply(this, args);
}

})(jQuery);

/**
 * @version		2.0
 * @package		jquery
 * @subpackage	lofslidernews
 * @copyright	Copyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved.
 * @website     http://landofcoder.com
 * @license		This plugin is dual-licensed under the GNU General Public License and the MIT License 
 */
// JavaScript Document
(function($) {
	 $.fn.lofJSidernews = function( settings ) {
	 	return this.each(function() {
			// get instance of the lofSiderNew.
			new  $.lofSidernews( this, settings ); 
		});
 	 }
	 $.lofSidernews = function( obj, settings ){
		this.settings = {
			direction	    	: '',
			mainItemSelector    : 'li',
			navInnerSelector	: 'ul',
			navSelector  		: 'li' ,
			navigatorEvent		: 'click'/* click|mouseenter */,
			wapperSelector: 	'.sliders-wrap-inner',
			interval	  	 	: 5000,
			auto			    : true,
			maxItemDisplay	 	: 3,
			startItem			: 0,
			navPosition			: 'vertical',/* values: horizontal|vertical*/ 
			navigatorHeight		: 100,
			navigatorWidth		: 310,
			duration			: 600,
			navItemsSelector    : '.navigator-wrap-inner li',
			navOuterSelector    : '.navigator-wrapper' ,
			isPreloaded			: true,
			easing				: 'easeInOutQuad',
			onPlaySlider:function(obj, slider){},
			onComplete:function(slider, index){  }
		}	
		$.extend( this.settings, settings ||{} );	
		this.nextNo         = null;
		this.previousNo     = null;
		this.maxWidth  = this.settings.mainWidth || 684;
		
		

		this.wrapper = $( obj ).find( this.settings.wapperSelector );	
		var wrapOuter = $('<div class="sliders-wrapper"></div>').width( this.maxWidth );
		this.wrapper.wrap( wrapOuter );
		
		this.slides = this.wrapper.find( this.settings.mainItemSelector ); 
		if( !this.wrapper.length || !this.slides.length ) return ;
		// set width of wapper
		if( this.settings.maxItemDisplay > this.slides.length ){
			this.settings.maxItemDisplay = this.slides.length;	
		}
		this.currentNo      = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
		this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );	
		this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;
		this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
		// if use automactic calculate width of navigator
		
	 	if( this.settings.navigatorHeight == null || this.settings.navigatorWidth == null ){
			this.settings.navigatorHeight = this.navigatorItems.eq(0).outerWidth(true);
			this.settings.navigatorWidth = this.navigatorItems.eq(0).outerHeight(true);
			
		}
		if( this.settings.navPosition == 'horizontal' ){ 
			this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
			this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
			this.navigatorOuter.height(	this.settings.navigatorHeight );
			
		} else {
			this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );	
			
			this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
			this.navigatorOuter.width(	this.settings.navigatorWidth );
		}		
		this.slides.width( this.settings.mainWidth );	
		this.navigratorStep = this.__getPositionMode( this.settings.navPosition );		 
		this.directionMode = this.__getDirectionMode();  
		
		
		if( this.settings.direction == 'opacity') {
			this.wrapper.addClass( 'lof-opacity' );
			$(this.slides).css({'opacity':0,'z-index':1}).eq(this.currentNo).css({'opacity':1,'z-index':3});
		} else { 
			this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
		}

		
		if( this.settings.isPreloaded ) {
			this.preLoadImage( this.onComplete );
		} else {
			this.onComplete();
		}
		
		$buttonControl = $( ".button-control", obj);
		if( this.settings.auto ){
			$buttonControl.addClass("action-stop");
		} else {
			$buttonControl.addClass("action-start");
		}
		var self = this;
		
		$( obj ).hover(function(){
				self.stop();	
				$buttonControl.addClass("action-start").removeClass("action-stop").addClass("hover-stop");
		}, function(){
			if( $buttonControl.hasClass("hover-stop") ){
		
				if(	self.settings.auto ){
					$buttonControl.removeClass("action-start").removeClass("hover-stop").addClass("action-stop");
					self.play( self.settings.interval,'next', true );		
				}
			}
		} );
		
		
		$buttonControl.click( function() {
			if( $buttonControl.hasClass("action-start") ){
				self.settings.auto =true;
				self.play( self.settings.interval,'next', true );
				$buttonControl.removeClass("action-start").addClass("action-stop");
			} else{
				self.settings.auto =false;
				self.stop();	
				$buttonControl.addClass("action-start").removeClass("action-stop");
			}
		} );
	 }
     $.lofSidernews.fn =  $.lofSidernews.prototype;
     $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;
	 
	 $.lofSidernews.fn.extend({
							  
		startUp:function( obj, wrapper ) {
			seft = this;

			this.navigatorItems.each( function(index, item ){
				$(item).bind( seft.settings.navigatorEvent,( function(){
					seft.jumping( index, true );
					seft.setNavActive( index, item );					
				} ));
				$(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );
			})
			this.registerWheelHandler( this.navigatorOuter, this );
			this.setNavActive( this.currentNo );
			this.settings.onComplete( this.slides.eq(this.currentNo ),this.currentNo  );
			if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
				this.registerButtonsControl( 'click', this.settings.buttons, this );

			}
			if( this.settings.auto ) 
			this.play( this.settings.interval,'next', true );
			
			return this;
		},
		onComplete:function(){
			setTimeout( function(){ $('.preload').fadeOut( 900, function(){  $('.preload').remove(); } ); }, 400 );	this.startUp( );
		},
		preLoadImage:function(  callback ){
			var self = this;
			var images = this.wrapper.find( 'img' );
	
			var count = 0;
			images.each( function(index,image){ 
				if( !image.complete ){				  
					image.onload =function(){
						count++;
						if( count >= images.length ){
							self.onComplete();
						}
					}
					image.onerror =function(){ 
						count++;
						if( count >= images.length ){
							self.onComplete();
						}	
					}
				}else {
					count++;
					if( count >= images.length ){
						self.onComplete();
					}	
				}
			} );
		},
		navivationAnimate:function( currentIndex ) { 
			if (currentIndex <= this.settings.startItem 
				|| currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
					this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
					if (this.settings.startItem < 0) this.settings.startItem = 0;
					if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
						this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
					}
			}		
		
			this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'), 
												{duration:500, easing:'easeInOutQuad'} );	
		},
		setNavActive:function( index, item ){
			if( (this.navigatorItems) ){ 
				this.navigatorItems.removeClass( 'active' );
				$(this.navigatorItems.get(index)).addClass( 'active' );	
				this.navivationAnimate( this.currentNo );	
			}
		},
		__getPositionMode:function( position ){
			if(	position  == 'horizontal' ){
				return ['left', this.settings.navigatorWidth];
			}
			return ['top', this.settings.navigatorHeight];
		},
		__getDirectionMode:function(){
			switch( this.settings.direction ){
				case 'opacity': this.maxSize=0; return ['opacity','opacity'];
				default: this.maxSize=this.maxWidth; return ['left','width'];
			}
		},
		registerWheelHandler:function( element, obj ){ 
			 element.bind('mousewheel', function(event, delta ) {
				var dir = delta > 0 ? 'Up' : 'Down',
					vel = Math.abs(delta);
				if( delta > 0 ){
					obj.previous( true );
				} else {
					obj.next( true );
				}
				return false;
			});
		},
		registerButtonsControl:function( eventHandler, objects, self ){ 
			for( var action in objects ){ 
				switch (action.toString() ){
					case 'next':
						objects[action].click( function() { self.next( true) } );
						break;
					case 'previous':
						objects[action].click( function() { self.previous( true) } );
						break;
				}
			}
			return this;	
		},
		onProcessing:function( manual, start, end ){	 		
			this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
			this.nextNo 	= this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);				
			return this;
		},
		finishFx:function( manual ){
			if( manual ) this.stop();
			if( manual && this.settings.auto ){ 
				this.play( this.settings.interval,'next', true );
			}		
			this.setNavActive( this.currentNo );
			this.settings.onPlaySlider( this, $(this.slides).eq(this.currentNo) );
		},
		getObjectDirection:function( start, end ){
			return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");	
		},
		fxStart:function( index, obj, currentObj ){
				var s = this;
				if( this.settings.direction == 'opacity' ) { 
					
					$(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing,complete:function(){ 
																					s.slides.css("z-index","1")
																					s.slides.eq(index).css("z-index","3");															
																						}} );
					$(this.slides).eq(index).stop().animate( {opacity:1}, { duration : this.settings.duration, 
																		    easing   :this.settings.easing,
																		    complete :function(){ s.settings.onComplete($(s.slides).eq(index),index); }} );
				}else {
					this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing,complete:function(){ 
																										s.settings.onComplete($(s.slides).eq(index),index)								   
																									} } );
				}
			return this;
		},
		jumping:function( no, manual ){
			this.stop(); 
			if( this.currentNo == no ) return;		
			 var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");
			this.onProcessing( null, manual, 0, this.maxSize )
				.fxStart( no, obj, this )
				.finishFx( manual );	
				this.currentNo  = no;
		},
		next:function( manual , item){

			this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);	
			this.onProcessing( item, manual, 0, this.maxSize )
				.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
				.finishFx( manual );
		},
		previous:function( manual, item ){
			this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;
			this.onProcessing( item, manual )
				.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
				.finishFx( manual	);			
		},
		play:function( delay, direction, wait ){	
			this.stop(); 
			if(!wait){ this[direction](false); }
			var self  = this;
			this.isRun = setTimeout(function() { self[direction](true); }, delay);
		},
		stop:function(){ 
			if (this.isRun == null) return;
			clearTimeout(this.isRun);
            this.isRun = null; 
		}
	})
})(jQuery)

lof-slider.less
Код: 
@import "palette.less";


/*  slider layout ----------------------------------------------------*/ 

.lof-slidecontent,
.main-slider-content{
	width:940px; 
	height:367px;
}


.lof-slidecontent {
	position: relative;
	overflow: hidden;
  	
  	height: 440px; /* Extra Space for the navigator 367 + 73 */
  	
  	
	.preload {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100000;
		text-align: center;
		background: #ffffff;
		
		div {
			height: 100%;
			width: 100%;
			background: transparent url(../img/load-indicator.gif) no-repeat scroll 50% 50%;
		}
	}
	
	
	.sliders-wrapper {
		position: relative;
		height: 100%;
		width: 900px;
		z-index: 3px;
		overflow: hidden;
	}
	
	ul.sliders-wrap-inner {
		overflow: hidden;
		background: transparent url(../img/load-indicator.gif) no-repeat scroll 50% 50%;
		padding: 0px;
		margin: 0;
		position: absolute;
		overflow: hidden;
		
		li {
			overflow: hidden;
			padding: 0px;
			margin: 0px;
			float: left;
			position: relative;
		} 	
	}
	
	.lof-opacity li {
		position: absolute;
		top: 0;
		left: 0;
		float: inherit;
	}
	
	
	.item-meta a:hover {
		text-decoration: underline;
	}
	
	.item-meta i {
		font-size: 70%;
	}
	
	/* Description ----------------------------------------------------*/ 
	
	.slider-description{
		
		.transition();
		
		opacity: 0;
		
		z-index: 100px;
		position: absolute;
		bottom: 50px;
		left: 0px;
		width: 350px;
		background: @headerColor;
		.folder-shadow();
		min-height: 100px;
		padding: 15px;
		font-size: 11px;
		line-height: 1.5em;
		
		p{ color: @fontLightColor; }
		
		h4 {
			font-family: "Voltaire", Arial, Verdana, sans-serif;
			margin: 10px 0;
			padding: 0;
			text-transform: uppercase;
			
			margin-bottom: 15px;
		}
		
		a.link{
			display: table;
			margin-top: 18px;
			padding: 3px;
			background: @accentColor;
			color: #000;
		}
		
	}
	
	.main-slider-content:hover .slider-description{
		opacity: 1;
	}
	
	/* Navigator ----------------------------------------------------*/ 
	
	.navigator-content {
		position: absolute;
		bottom: 0px;
		left: 0px;
		padding: 0px 0px;
		
		.button-next,
		.button-previous,
		.button-control{
			opacity: 0;
			position: absolute;
			bottom: 73px;
			right: 0px;
			display: block;
			width: 30px;
			height: 30px;
			color: #FFF;
			cursor: pointer;
		}
		
		.button-next {
			float: left;
			text-indent: -999px;
			background:  url(../img/arrow-right-dark.png) center center no-repeat @accentColor;
		}
		
		.button-previous {
			float: left;
			text-indent: -999px;
			right: 30px;
			background:  url(../img/arrow-left-dark.png) center center no-repeat @accentColor;
		}
		
		.button-control {
			float: left;
			text-indent: -999px;
			right: 60px;
			background:  url(../img/button-control.png) center center no-repeat @accentColor;
		}
		
		.hover-stop, .action-start{ background:  url(../img/button-control-play.png) center center no-repeat rgba(0,0,0,0.8);}
		
	}
	
	.navigator-wrapper {
		position: relative;
		z-index: 10;
		height: 180px;
		width: 1310px;
		overflow: hidden;
		color: #fff;
		float: left;
	}
	
	.navigator-wrap-inner {
		top: 0;
		padding: 0;
		margin: 0;
		position: absolute;
		width: 100%;
		
		li {
			cursor: hand;
			cursor: pointer;
			list-style: none;
			padding: 0;
			margin-left: 0px;
			overflow: hidden;
			float: left;
			display: block;
			text-align: center;
			background: @accentColor;
			
			img{
				-webkit-transition: all 0.3s ease;
				-moz-transition: all 0.3s ease;
				-o-transition: all 0.3s ease;
				transition: all 0.3s ease;
			}
			
			img:hover{
				opacity: 0.2;
			}
		}
		
		 
		
		
	}

	

}


.lof-slidecontent:hover .button-previous{ opacity: 1; }
.lof-slidecontent:hover .button-next{ opacity: 1; }
.lof-slidecontent:hover .button-control{ opacity: 1; }



Как да направя снимките, които ще добавя в слайда да се сменят след 5 секунди примерно?
 
uphero каза:
Ползвай http://pastebin.com/ за по пригледна тема
Увеличете...
Определено ЗА!
dmx_cs_manqka каза:
Aко рaзбирaш от PHP, може дa използвaш и него, но незнaм кaк.. :shock: O.o
Увеличете...
Абсурд! С php най-много да презарежда страницата на 5 сек :D:D:D
k0kicha каза:
А нещо конкретно по темата ?
Увеличете...
Посъкрати кода, дай само частта, в която се сменят картинките (предполагам, че в момента се сменят чрез натискане на бутон?)
Ако това може да ти свърши работа:
дай на функцията, която сменя картинката, да се изпълни в началото (при зареждането на документа), използвай код като този:
[js]setTimeout(function(){тук е името на функцията, която сменя картинките}, 5000);[/js]
След това в края на въпросната функция сложи отново този код. Така ще на караш функцията да се изпълни 5 сек. след зареждането на страницата, и после да се преизпълнява през 5 сек.
Ако пък нямаш такава отделна функция, просто изкарай съответния код в такава, и използвай името й в това, което ти дадох.

Вероятно няма да ме разбереш, затова дай частта, в която се извършва същинското "слайдване", за да ти го нагодим.
 
custom.js - http://pastebin.com/embed_js.php?i=EgiScruX
lof-slider.js - http://pastebin.com/embed_js.php?i=XQhY8aiu
slider.js - http://pastebin.com/embed_js.php?i=jA1t835a

Това са файловете, които мисля, че са към този slider....
 
Успях да го направя, като и на трите файла промерних auto: false, на auto: true.

Сега се сменят през интервал от 5 секунди, но ако мина с мишката върху слайдъра - спира на картинката, която е била и не продължава. Сега искам и това да променя....

Намерих от къде да направя да не спира, но искам да го направя когато съм с мишката отгоре да е спряло, тъй като е направено да излиза текст върху снимката. Т.е. когато мишката е върху картинката да спира движението, а когато я махна отново да си тръгва смяната. В момента е когато мина движението спира и не продължава изобщо.


Код: 
		$( obj ).hover(function(){
				self.stop();	
				$buttonControl.addClass("action-start").removeClass("action-stop").addClass("hover-stop");
		}, function(){
			if( $buttonControl.hasClass("hover-stop") ){
		
				if(	self.settings.auto ){
					$buttonControl.removeClass("action-start").removeClass("hover-stop").addClass("action-stop");
					self.play( self.settings.interval,'next', true );		
				}
			}
		} );


Ето от този код е така. Когато го махна дори и да съм отгоре с мишката движението си продължава и се сменят картинките и балончетата с текста.
 
[js] $( obj ).hover(function(){
self.stop();
$buttonControl.addClass("action-start").removeClass("action-stop").addClass("hover-stop");
}, function(){
if( $buttonControl.hasClass("hover-stop") ){

if( self.settings.auto ){
$buttonControl.removeClass("action-start").removeClass("hover-stop").addClass("action-stop");
self.play( self.settings.interval,'next', true );
}
}
} );[/js]
Увеличете...
Доколкото разбирам това спира слайдването? Вероятно трябва да напишеш точно обратния код. Пробвай така:

[js]$( obj ).mouseleave(function(){//когато се махне мишката от елемента
self.start();
$buttonControl.removeClass("action-start").addClass("action-stop").removeClass("hover-stop");
}, function(){
if( $buttonControl.hasClass("hover-stop") ){
if(self.settings.auto ){
$buttonControl.addClass("action-start").addClass("hover-stop").removeClass("action-stop");
self.play( self.settings.interval,'next', true );
}
}
} );
[/js]
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе