利用JS做网页特效_大图轮播(实例讲解)

来源：动视网责编：小采时间：2020-11-27 22:33:05

利用JS做网页特效_大图轮播(实例讲解)

利用JS做网页特效_大图轮播(实例讲解):废话不多说，直接上代码： <style> * { margin: 0px; padding: 0px; } .stage { width: 500px; height: 300px; border: 5px solid black; margin: 200px; position: relative; overflow: hidde

推荐度：

点击下载本文 文档为doc格式

导读利用JS做网页特效_大图轮播(实例讲解):废话不多说，直接上代码： <style> * { margin: 0px; padding: 0px; } .stage { width: 500px; height: 300px; border: 5px solid black; margin: 200px; position: relative; overflow: hidde

废话不多说，直接上代码：

<style>
 * {
 margin: 0px;
 padding: 0px;
 }
 
 .stage {
 width: 500px;
 height: 300px;
 border: 5px solid black;
 margin: 200px;
 position: relative;
 overflow: hidden;
 }
 
 .to-left,
 .to-right {
 position: absolute;
 top: 0px;
 width: 50px;
 height: 300px;
 background-color: black;
 color: white;
 font-size: 30px;
 text-align: center;
 line-height: 300px;
 opacity: 0.3;
 }
 
 .to-left {
 left: 0px;
 }
 
 .to-right {
 right: 0px;
 }
 
 .to-left:hover,
 .to-right:hover {
 cursor: pointer;
 opacity: 0.5;
 }
 
 .banner {
 width: 3000px;
 height: 300px;
 }
 
 .items {
 float: left;
 width: 500px;
 height: 300px;
 background-color: blanchedalmond;
 font-size: 100px;
 text-align: center;
 line-height: 300px;
 }
 </style>
 </head>
<!--大图轮播特效-->
 <body>
 <div class="stage">
 <div class="to-left">
 <</div>
 <div class="to-right">></div>
 <div class="banner">
 <div class="items">1</div>
 <div class="items" style="">2</div>
 <div class="items" style="">3</div>
 <div class="items" style="">4</div>
 <div class="items" style="">5</div>
 <div class="items">1</div>
 </div>
 </div>
 </body>

</html>
<script>
 var to_right = document.getElementsByClassName('to-right')[0];
 var to_left = document.getElementsByClassName('to-left')[0];
 var banner = document.getElementsByClassName('banner')[0];
 var arr = [];
 var count = 1;

 to_right.onclick = function() {
 toRight();
 }
 
 function toRight(){
 arr.push(window.setInterval("moveLeft()", 30));
 }
 
 to_left.onclick = function() {
 toLeft();
 }

 function toLeft(){
 arr.push(window.setInterval("moveRight()", 30));
 }
 
 function moveLeft() {
 if(count < 5) {
 if(banner.offsetLeft > count * (-500)) {
 banner.style.marginLeft = banner.offsetLeft - 20 + "px";
 } else {
 for(var x in arr) {
 window.clearInterval(arr[x]);
 }
 count++;
 }
// 连接点
 }else{
 if(banner.offsetLeft > count * (-500)) {
 banner.style.marginLeft = banner.offsetLeft - 20 + "px";
 } else {
 for(var x in arr) {
 window.clearInterval(arr[x]);
 }
 count = 1;
 banner.style.marginLeft = 0 + 'px';
 }
 }
 }
 
 function moveRight() {
 if(count-1 >0) {
 if(banner.offsetLeft < (count-2) * (-500)) {
 banner.style.marginLeft = banner.offsetLeft + 20 + "px";
 } else {
 for(var x in arr) {
 window.clearInterval(arr[x]);
 }
 count--;
 }
 }
 }
 window.setInterval("toRight()",1750);
 

</script>

以上这篇利用JS做网页特效_大图轮播(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

利用JS做网页特效_大图轮播(实例讲解)

推荐度：

点击下载本文 文档为doc格式

标签：使用 js 大图轮播

热门焦点

利用JS做网页特效_大图轮播(实例讲解)

利用JS做网页特效_大图轮播(实例讲解)

利用JS做网页特效_大图轮播(实例讲解)

最新推荐

猜你喜欢

热门推荐