带自动旋转器的1k图像/内容滑块

Posted 2021-02-25

Small image- and content slider with menu generation and auto-rotator.
The auto-rotator stops, when menu is clicked. Text of the menu is taken from the title-tag of the image(can easily be changed!). Minified size < 1kb.

Call it with
$('.someClass').joeSlide();

html:
<div class="someClass">
	<ul class="sliderContent">
		<li>Slide 1 <img src="image1.jpg" title="Title 1" /></li>
		<li>Slide 2 ...</li>
	</ul>
</div>
CSS(just as i used it):
.someClass { height:320px; background:url('../images/bg_slider.gif') repeat-x; position:relative; }
	.someClass ul { list-style:none; }
	.sliderContent { position:relative; height:300px; width:960px; margin:8px 0; margin:0; padding-top:10px; overflow:hidden;}
	.sliderThumbs { position:absolute; bottom:10px; }
		.sliderThumbs li { float:left; width:192px; height:54px; text-align:center; line-height:60px; cursor:pointer; background:url('../images/buttons_slider.png') no-repeat scroll right 10px transparent }
		.sliderThumbs li:hover { background-position:right -44px; }
		.sliderThumbs li.active{ background-position:right -98px; }
 
jQuery Function:
(function($){
	$.fn.extend({
		joeSlide: function() {
			return this.each(function() {
				var t;
				var obj = $(this);
 
				obj.append('<ul class="sliderThumbs">');
				$('li', obj).each(function (index) {
					$('.sliderThumbs', obj).append('<li>' + $(this).children('img').attr('alt') + '</li>'); 	
			    });
				$('.sliderThumbs li', obj).last().addClass('active');
 
				$('.sliderThumbs li', obj).live('click', function(){
					clearTimeout(t);
 
					if( $('.sliderContent li:visible', obj).index() > $(this).index() )
						$('.sliderContent li', obj).eq($(this).index()).show().siblings().fadeOut(600);
					else
						$('.sliderContent li', obj).eq($(this).index()).fadeIn(600, function(){ $(this).siblings().hide(); });
 
					$('.sliderThumbs li.active', obj).removeClass('active');
					$(this).addClass('active', obj);
				});
 
				var sliderNext = function() {
					if(!$(".sliderThumbs li", obj).last().hasClass('active'))
				    	$(".sliderThumbs li.active", obj).next().click();
					else
						$(".sliderThumbs li", obj).eq(0).click();
 
					t = setTimeout(sliderNext, 5000);
				}
				sliderNext();
			});
		}
	});    
})(jQuery);