JavaScript轮播图简单制作方法

2019-11-19 17:29:28

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了JavaScript制作轮播图的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title></title>  <script src="js/jquery.js"></script>  <style>    .container{      position: absolute;      left: 0;      top:0;      width: 100%;      overflow: hidden;      border:1px solid #c3c3c3;      border-radius: 4px;    }    .block1{      margin:0;      padding: 0;      display: inline-block;      height: 400px;      background-color: #008800;    }    .block2{      margin:0;      padding: 0;      display: inline-block;      height: 400px;      background-color: #ffff00;    }    .block3{      margin:0;      padding: 0;      display: inline-block;      height: 400px;      background-color: #FF9900;    }  </style></head><body><div class="container" style="position: absolute;left: 0;top:0; width: 100%;height: 400px;">  <div class="block1" style="position: absolute;left: 0;top:0;"></div>  <div class="block2" style="position: absolute;left:0;top:0;"></div>  <div class="block3" style="position: absolute; left:0;top:0;"></div></div></body><script>  var wt=window.innerWidth;  $(".block1").css({width:wt});  $(".block2").css({width:wt,left:wt});  $(".block3").css({width:wt,left:wt*2});  var aa=setInterval(function(){    $(".block1").css({left:parseFloat($(".block1")[0].style.left)-1});    $(".block2").css({left:parseFloat($(".block2")[0].style.left)-1});    $(".block3").css({left:parseFloat($(".block3")[0].style.left)-1});    if($(".block3")[0].style.left=="0px"){//      clearInterval(aa);//      清除循环滚动      $(".block1").css({left:0})      $(".block2").css({left:wt})      $(".block3").css({left:wt*2})    }  },2)</script></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：微信小程序左滑删除效果的实现代码

下一篇：Ajax异步获取html数据中包含js方法无效的解决方法