jQuery与css实现的个性的图片幻灯片特效代码_图片特效

jQuery与css实现的个性的图片幻灯片特效代码: 发布时间：2020-07-25编辑：脚本学堂

CSS+ jQuery个性的图片幻灯片特效代码，兼容大多数的浏览器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSS+ <a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>个性的图片幻灯片</title>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css">
<style type="text/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;
}
</style>
<script type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>" src="/source/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript"> 
window.onload = function(){	
	$('body').addClass('js');
	
	initDemopageSlides();
}
function initDemopageSlides(){
	demo_slide_animation_speed = 800;
	demo_slide_animation_timeout = 4000;
	if($('.demo_slide').length <= 1) return;
	$("#slide_next").click(onSlideNextClick);
	$("#slide_prev").click(onSlidePrevClick);
	var first_slide = $(".demo_slide:first");
	first_slide.addClass("current");
	var zIndexNumber = 100;	
	
	$('.demo_slide').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 1;
	});
	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){	
	clearTimeout(time_out);
	if(animationInProgress) return;
	var slides_arr = $(".demo_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");
			<a href=http://www.jb200.com/zt/break/ target=_blank class=infotextkey>break</a>;	
		}
	}
	var next_index = s + distance;
	if(next_index < 0) next_index += slides_arr.length;
	if(next_index >= slides_arr.length) next_index = 0;
	var next_slide = $(slides_arr[next_index]);
	next_slide.addClass("current");
	var previous_zIndex = $(previous_slide).css('zIndex');
	next_slide.css('zIndex', Number(previous_zIndex) + 10);
	animationInProgress = true;
	var slide_width = parseFloat(next_slide.css("width"));
	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);
}
</script>
</head>
<body> 
<div id="slide">
<img class="demo_slide" src="/source/images/201207/sz-001.jpg">
<img class="demo_slide" src="/source/images/201207/tg-001.jpg">
<img class="demo_slide" src="/source/images/201207/tg-002.jpg">
</div>
</body>
</html>

提示：可修改代码后再运行!

上一篇：经典的jQuery焦点图代码，JS图片切换特效代码
下一篇：显示隐藏分享图标，鼠标放上后显示图标，移开后隐藏图标

与 jQuery与css实现的个性的图片幻灯片特效代码有关的文章

本文标题：jQuery与css实现的个性的图片幻灯片特效代码
本页链接：http://www.jb200.com/tx/125.html

浏览排行

栏目分类

热点文章

jQuery与css实现的个性的图片幻灯片特效代码