JavaScript实现大图轮播效果

本文实例为大家分享了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>

精彩专题分享：jQuery图片轮播 JavaScript图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。