<!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秒后，模拟点击向下按钮，实现图片反转，鼠标移到图片后清除定时器，移开后恢复定时器