banner轮播

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lihuijuan_1/article/details/79946648

1.banner正反轮流交替

<style type="text/css">

.banner{
width: 100%;
height: 500px;
transition: all 0.5s;
}
</style>
<script type="text/javascript">
window.onload = function(){var n = 0;
var banner=document.getElementsByClassName("banner")[0]
var abc=["01.jpg","02.jpg"];
setInterval(function(){n++;
var deg = 180*(n%2);
banner.style.transform="rotateX("+deg+"deg)";
setTimeout(function(){banner.style.backgroundImage="url("+abc[deg/180]+")";},300)  
},3000);
}
</script>
<body>
<div class="banner"></div>
 </body>

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试