自动滚动播放图片的前端代码 - 简单易用 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>自动滚动播放图片</title>
	<style type="text/css">
		#slider{
			width: 600px;
			height: 400px;
			overflow: hidden;
			margin: 0 auto;
			position: relative;
		}
		#slider img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: none;
		}
		#slider img.active{
			display: block;
		}
		#slider .slider-btn{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			cursor: pointer;
			z-index: 1;
			font-size: 30px;
			color: #fff;
			text-shadow: 1px 1px 2px #000;
		}
		#slider .slider-btn.prev{
			left: 0;
		}
		#slider .slider-btn.next{
			right: 0;
		}
	</style>
</head>
<body>
	<div id="slider">
		<img class="active" src="img/1.jpg">
		<img src="img/2.jpg">
		<img src="img/3.jpg">
		<img src="img/4.jpg">
		<img src="img/5.jpg">
		<img src="img/6.jpg">
		<div class="slider-btn prev">&#10094;</div>
		<div class="slider-btn next">&#10095;</div>
	</div>
	<script type="text/javascript">
		var slider = document.getElementById("slider");
		var sliderImgs = slider.getElementsByTagName("img");
		var sliderBtns = slider.getElementsByClassName("slider-btn");
		var currentSlide = 0;
		var slideInterval = setInterval(nextSlide, 3000);
<pre><code>	function nextSlide(){
		sliderImgs[currentSlide].classList.remove(&quot;active&quot;);
		currentSlide = (currentSlide + 1) % sliderImgs.length;
		sliderImgs[currentSlide].classList.add(&quot;active&quot;);
	}

	function prevSlide(){
		sliderImgs[currentSlide].classList.remove(&quot;active&quot;);
		currentSlide = (currentSlide - 1 + sliderImgs.length) % sliderImgs.length;
		sliderImgs[currentSlide].classList.add(&quot;active&quot;);
	}

	sliderBtns[0].addEventListener(&quot;click&quot;, prevSlide);
	sliderBtns[1].addEventListener(&quot;click&quot;, nextSlide);

	slider.addEventListener(&quot;mouseover&quot;, function(){
		clearInterval(slideInterval);
	});

	slider.addEventListener(&quot;mouseout&quot;, function(){
		slideInterval = setInterval(nextSlide, 3000);
	});
&lt;/script&gt;
</code></pre>
</body>
</html>