Welcome, Old Sport!

一款独特的幻灯片效果

by ilikecss ON 2011/10/09 4453

网上趴了个幻灯片效果,经过改良目前测试下来兼容了大众浏览器,主要是看中其代码简单易懂。喜欢的朋友下载来玩玩。※DEMO图片请勿用于商业

Step1. 创建HTML

<div id="slide">
<a href="http://ershou.taobao.com/item.htm?id=13139564619" target="_blank"><img class="demo_slide" src="images/psp3000_sales.jpg"></a>
<a href="http://blog.ilikecss.com/meshiya/" target="_blank"><img class="demo_slide" src="images/pic1c.jpg"></a>
<a href="http://blog.ilikecss.com/2011/05/12/drama-go/" target="_blank"><img class="demo_slide" src="images/pic2c.jpg"></a>
<a href="http://blog.ilikecss.com/2011/05/13/one-piece-fight-together/" target="_blank"><img class="demo_slide" src="images/pic3c.jpg"></a>
<a href="http://shop58703789.taobao.com/" target="_blank"><img class="demo_slide" src="images/pic4c.jpg"></a>
<a href="http://www.toei-anim.co.jp/tv/onep/" target="_blank"><img class="demo_slide" src="images/pic6c.jpg"></a>
</div>

Step2. 创建CSS

#slide {
    height: 284px;
	margin: 50px auto 100px;
    overflow: hidden;
    position: relative;
    width: 480px;
	box-shadow: 3px 3px 6px #333333;
}
body.js .demo_slide {
    position: absolute;
}
.demo_slide {
    height: 284px;
    width: 480px;
}

Step3. 插入jQuery

window.onload = function(){	
	// Add class="js" to body tag
	$('body').addClass('js');
	
	initDemopageSlides();
}
/*------------------------------

	Homepage slideshow

--------------------------------*/
function initDemopageSlides(){
	/*
		TODO 
		Shuffle slides on load
	*/
	demo_slide_animation_speed = 800;
	demo_slide_animation_timeout = 4000;
	
	// Check there is more than one slide
	if($('.demo_slide').length <= 1) return;
	
	// Write event handlers for next and prev buttons
	$("#slide_next").click(onSlideNextClick);
	$("#slide_prev").click(onSlidePrevClick);
	
	// Add current class to first slide
	var first_slide = $(".demo_slide:first");
	first_slide.addClass("current");
	
	// Set zIndex for all slides
	var zIndexNumber = 100;	
	
	$('.demo_slide').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 1;
	});
	
	// Start the slideshow rolling
	onSlideAnimationComplete();
}

function shuffleArray(v){
    for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
    return v;
};

function onSlideNextClick(event){
	navigateSlides(1);
}

function onSlidePrevClick(event){
	navigateSlides(-1);
}

function navigateSlides(distance){	
	// Clear timer
	clearTimeout(time_out);

	// Check if it's safe to animate
	if(animationInProgress) return;
	
	// Get array of slides
	var slides_arr = $(".demo_slide");
	
	// Get index of current slide
	for(var s=0; s < slides_arr.length; s  ){
		if($(slides_arr[s]).hasClass("current")){
			var previous_slide = $(slides_arr[s]);
			previous_slide.removeClass("current");
			break;	
		}
	}
	
	// Get index of next slide
	var next_index = s   distance;
	
	// Normalise slide index
	if(next_index < 0) next_index  = slides_arr.length;
	if(next_index >= slides_arr.length) next_index = 0;
	
	// Get next slide
	var next_slide = $(slides_arr[next_index]);
	next_slide.addClass("current");
	
	// Bring slide to fore
	var previous_zIndex = $(previous_slide).css('zIndex');
	next_slide.css('zIndex', Number(previous_zIndex)   10);
	
	// Animate slide on
	animationInProgress = true;
	var slide_width = parseFloat(next_slide.css("width"));
	
	// Alternate left & right
	next_slide.css(next_index%2?"right":"left",(slide_width * distance)/4   "px");
	next_slide.css("display","block");
	next_slide.css("opacity","0");
	if(next_index%2){
		next_slide.animate( {right:0, opacity:1}, demo_slide_animation_speed, onSlideAnimationComplete);
	} else {
		next_slide.animate( {left:0, opacity:1}, demo_slide_animation_speed, onSlideAnimationComplete);	
	}
}

function onSlideAnimationComplete(){
	animationInProgress = false;
	time_out = setTimeout (onSlideNextClick,demo_slide_animation_timeout);
}

HTML图片中demo_slide这个Class是整个js的关键,可以任意修改成你喜欢的,js修改后请在CSS里也同步一下

1条评论



TOP