最新【图片特效】CSS+ jQuery独特的网页幻灯片代码

以下是三零网为大家整理的最新【图片特效】CSS+ jQuery独特的网页幻灯片代码的文章，希望大家能够喜欢!

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+ jQuery个性的图片幻灯片</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/javascript" src="/ajaxjs/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");
break;
}
}
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="/jscss/demoimg/wall1.jpg">
<img class="demo_slide" src="/jscss/demoimg/wall2.jpg">
<img class="demo_slide" src="/jscss/demoimg/wall3.jpg">
</div>
</body>
</html>

转载自：http://www.q3060.com/list3/list122/18913.html

ITPub博客

【转载】图片特效CSS+ jQuery独特的网页幻灯片代码

最新文章