浮现式幻灯片：html+js+JQuery
1、作者仅仅在IE上测试过，其它内核浏览器可能略有偏差。
2、如果需要使用此插件，仅仅需要改变图片即可（图片没上传，自行更改）。
3、欢迎用于学习，改进此功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ppt</title>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
</head>
<style type="text/css">
.window{
width:300px;
height:216px;
position: relative;
margin: auto; //居中对齐
overflow: hidden; //隐藏溢出的图片
}
.window .bgi {
cursor: pointer;
position: absolute;
}
.serial{
position: absolute;
top: 200px;
left: 800px;
cursor: pointer;
}
.serial span{
color: #ffffff;
}
.shape{
background-color: red;
}
</style>
<body>
<div class="window">
<img src="bbs-1.jpg" class="bgi" >
<img src="bbs-2.jpg" class="bgi" >
<img src="bbs-3.jpg" class="bgi" >
<img src="bbs-4.jpg" class="bgi" >
</div>
<div class="serial">
<span class="shape">1</span>
<span >2</span>
<span >3</span>
<span >4</span>
</div>
<script>
var num;
num=$('img').length; //计算有多少张图片
script1=function(){ //点击函数
$('span').click(function(){
$('.window img').eq(num-1).show().prependTo('.window');//每按一次，图片浮现一次
$(this).addClass('shape'); //给点击的数字加背景效果
$('span').not($(this)).removeClass('shape'); //除了点击外的其他数字去掉效果
});
}
script1();
script2=function(){ //循环函数
play=setInterval(function(){
n=$('.shape').next();
if(n.length===0){
n=$('span:first');
}
imgs=$('.window img');
imgs.eq(num-1).fadeOut(800,function(){ //从最后一张图片开始浮现
$(this).show().prependTo('.window'); //任意一张图片浮现完后就放到第一张开始新的循环
});
script3();
},2000);
}
script2();
script3=function(){
$('span').removeClass('shape');
n.addClass('shape');
}
$('.window img').hover(function(){ //鼠标移到图片上就停止浮动
clearInterval(play);
},function(){ //移开鼠标继续浮动
script2();
});
</script>
</body>
</html>
2544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
