CSS+ jQuery独特的网页幻灯片代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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="//apps.bdimg.com/libs/jquery/1.11.3/jquery.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="//ku.shouce.ren/files/images/201601/56a34a17e7e03.jpg">
<img class="demo_slide" src="//ku.shouce.ren/files/images/201601/56a34a1903d7e.jpg">
<img class="demo_slide" src="//ku.shouce.ren/files/images/201601/56a34a1a190aa.jpg">
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS+ jQuery独特的网页幻灯片代码

分类

图片代码

描述

CSS+ jQuery个性的图片幻灯片特效代码，网上趴了个幻灯片效果，经过改良目前测试下来兼容了大众浏览器，主要是看中其代码简单易懂。喜欢的朋友下载来玩玩。