JavaScript实现大图轮播效果

来源：懂视网责编：小OO 时间：2020-11-27 20:26:47

JavaScript实现大图轮播效果

<。head>。<。head>。<。meta http-equiv="。Content-Type"。content="。text/html。charset=UTF-8"。/>。<。title>。大图轮播<。/title>。<。style type="。text/css"。>。* { margin： 0px。padding： 0px。}#container { width： 500px。height： 300px。/*border： 1px solid black。*/ position： relative。overflow： hidden。width： 30px。

推荐度：

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

导读<。head>。<。head>。<。meta http-equiv="。Content-Type"。content="。text/html。charset=UTF-8"。/>。<。title>。大图轮播<。/title>。<。style type="。text/css"。>。* { margin： 0px。padding： 0px。}#container { width： 500px。height： 300px。/*border： 1px solid black。*/ position： relative。overflow： hidden。width： 30px。

本文实例为大家分享了js图片轮播效果的具体代码，供大家参考，具体内容如下

<head>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>大图轮播</title>
 <style type="text/css">
 * {
 margin: 0px;
 padding: 0px;
 }
 
 #container {
 width: 500px;
 height: 300px;
 /*border: 1px solid black;*/
 position: relative;
 overflow: hidden;
 }
 
 .btn {
 height: 100%;
 width: 30px;
 /*border: 1px solid red;*/
 position: absolute;
 text-align: center;
 line-height: 300px;
 font-size: 40px;
 font-weight: 900;
 color: black;
 opacity: 0.3;
 transition: 0.6s;
 z-index: 999;
 background-color: white;
 }
 
 .btn:hover {
 cursor: pointer;
 opacity: 0.8;
 }
 
 #left-btn {
 left: 0px;
 top: 0px;
 }
 
 #right-btn {
 right: 0px;
 top: 0px;
 }
 
 #ad-container {
 width: 2500px;
 height: 300px;
 /*border: 1px solid blue;*/
 position: relative;
 }
 
 .ad {
 width: 500px;
 height: 300px;
 float: left;
 text-align: center;
 line-height: 300px;
 font-size: 100px;
 font-family: "微软雅黑";
 }
 </style>
 </head>
 
 <body>
 <div id="container">
 <div id="left-btn" class="btn">
 <</div>
 <div id="right-btn" class="btn">></div>
 <div id="ad-container">
 <div class="ad" style="background-color: mediumpurple;">1</div>
 <div class="ad" style="background-color: yellowgreen;">2</div>
 <div class="ad" style="background-color: rosybrown;">3</div>
 <div class="ad" style="background-color: salmon;">4</div>
 <div class="ad" style="background-color: cyan;">5</div>
 </div>
 </div>
 </body>
 
</html>
<script type="text/javascript">
 var rightBtn = document.getElementById("right-btn");
 var leftBtn = document.getElementById("left-btn");
 var n = 1;
/* var count = 1*/;
 var arr = new Array();
/* var m=1;
*/ rightBtn.onclick = function() {
 var x = window.setInterval("to_right()", 20);
 arr.push(x);
 }
 
 function clear() {
 for(var i in arr) {
 window.clearInterval(arr[i]);
 }
 }
 
 function to_right() {
 
 var adContainer = document.getElementById("ad-container");
 if(n == 5) {
 clear();
 } else if(adContainer.offsetLeft != n * (-500)) {
 adContainer.style.marginLeft = adContainer.offsetLeft - 25 + "px";
 } else {
 n++;
 clear();
 }
 }
 var arr1 = new Array();
 
 leftBtn.onclick = function() {
 var y = window.setInterval("to_left()", 20);
 arr1.push(y);
 }
 
 function clear2() {
 for(var y in arr1) {
 window.clearInterval(arr1[y]);
 }
 }
 
 function to_left() {
 
 var adContainer = document.getElementById("ad-container");
 if(n == 1) {
 clear2();
 } else if(adContainer.offsetLeft != (n-2) * (-500)) {
 adContainer.style.marginLeft = adContainer.offsetLeft + 25 + "px";
 } else {
 n--;
 clear2();
 }
 }
 
 
</script>

JavaScript实现大图轮播效果

推荐度：

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

标签：图片轮播实现

热门焦点

JavaScript实现大图轮播效果

JavaScript实现大图轮播效果

JavaScript实现大图轮播效果

最新推荐

猜你喜欢

热门推荐