<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/stylesaq.css">
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.fd{
width: 30%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
background-image: url(./img/aq.png);
box-shadow: 2px 5px 20px 1px #88c18f;
-moz-box-shadow: -2px 11px 20px 1px #ffffff;
background-size: auto;
-webkit-background-size: auto;
-o-background-size: inherit;
background-position: center;
}
</style>
</head>
<body>
<div class="slider3d first container-fluid" id="zong">
<div class="fd">
<div class="row ksry1">
<div class="col-xs-12 col-md-12"><img src="./img/aqks.png" class=" animated bounceIn"></div>
</div>
<div class="row" style="margin-top: 7em;">
<div class="col-xs-6 col-md-6"><a href=""><img src="./img/aqsc.png" width="100%" ></a></div>
<div class="col-xs-6 col-md-6"><a href=""><img src="./img/aqsx.png" width="100%"></a></div>
</div>
</div>
<div class="slider3d__wrapper">
<div class="slider3d__inner">
<div class="slider3d__rotater">
<div class="slider3d__item">
<h2 class="slider3d__heading" data-text="SO HEADING" style="top:0;margin-top:0;"><img src="./img/aq1.jpg" width="100%" ></h2>
</div>
<div class="slider3d__item">
<h2 class="slider3d__heading" data-text="MUCH ROTATION" style="top:0;margin-top:0;"><img src="./img/su-01.jpg" width="100%" ></h2>
</div>
<div class="slider3d__item">
<h2 class="slider3d__heading" data-text="VERY 3D" style="top:0;margin-top:0;"><img src="./img/au-01.jpg" width="100%" ></h2>
</div>
<div class="slider3d__item">
<h2 class="slider3d__heading" data-text="SUCH JAVASCRIPT" style="top:0;margin-top:0;"><img src="./img/wi-01.jpg" width="100%" ></h2>
</div>
<div class="slider3d__item">
<h2 class="slider3d__heading" data-text="WOW WOW!" style="top:0;margin-top:0;"><img src="./img/sp-01.jpg" width="100%" ></h2>
</div>
</div>
</div>
</div>
<div class="slider3d__controls">
<div class="slider3d__handle">
<div class="slider3d__handle__inner">
<div class="slider3d__handle__rotater">
<div class="slider3d__handle__item active">Page 1</div>
<div class="slider3d__handle__item">Page 2</div>
<div class="slider3d__handle__item">Page 3</div>
<div class="slider3d__handle__item">Page 4</div>
<div class="slider3d__handle__item">Page 5</div>
</div>
</div>
</div>
<div class="slider3d__control m--up" id="mup"></div>
<div class="slider3d__control m--down" id="mdown"></div>
</div>
</div>
<script src="./js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<script>
play();
var timer;
function play(){
timer=setInterval(function(){ //打开定时器
$("#mdown").trigger("click"); //模拟触发数字按钮的click
},5000); //2000为轮播的时间
}
function stop() {
clearInterval(timer);//取消定时器
}
$("#zong").hover(function(){
stop();
},function(){
play();
});
</script>
</body>
</html>点击上下按钮，图片翻转轮播滚动，网上找的轮播动画，但是没有自动轮播功能，
原理就是，5秒后，模拟点击向下按钮，实现图片反转，鼠标移到图片后清除定时器，移开后恢复定时器
