淡入淡出式(需自己添加jQuery)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="/go.html?url=css/anji.css">
<script src="js/jQuery.js" charset="utf-8"></script>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
html,body{
height: 100%;
}
body{
font-family:"微软雅黑",Georgia,Serif;
}
.container{
position: relative;
left: 0;
top: 0;
width:100%;
height:100%;;
}
/* 轮播图片 */
.pic{
width:100%;
height:100%;
position: relative;
overflow: hidden;
}
img{
position: absolute;
top:-20%;
left:-20%;
width:140%;
height:140%;
display: none;
}
</style>
<body>
<div class="container">
<div class="pic">
<img src="images/001.jpg" alt="山水图">
<img src="images/002.jpg" alt="山水图">
<img src="images/003.jpg" alt="山水图">
<img src="images/004.jpg" alt="山水图">
</div>
</body>
<script >
$(function(){
var index=-1;
var pic=$('.pic>img');
var text=$('.content');
var i=0;
var transform=function(){
if(index==3){
index=0;
}else{
index++;
}
pic.eq(index).fadeIn(1000);
pic.eq(index).siblings().css({width:"140%",height:"140%",top:'-20%',left:'-20%',display:"none",opacity:"1"});
};
transform();
setInterval(transform,3000);
});
</script>
</html><!DOCTYPE html>
<html lang 
