jquery 手写定时轮播与鼠标滑过取消轮播效果 

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

 

posted @ 2022-02-18 14:27  御世制人  阅读(55)  评论(0)    收藏  举报