【两种方法实现 CSS/Javascript 简单的图片轮播效果】

方法①纯CSS动画实现图片轮播效果

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;

				box-sizing: border-box;
			}

			.imgBox {
				margin: 0 auto;
				width: 300px;
				height: 280px;
				overflow: hidden;
				background-color: #00E649;
			}

			.showBox {
				height: 280px;
				width: 1500px;
				animation: move 16s infinite linear;
			}

			.imgBox img {
				float: left;
				width: 300px;
				height: 280px;
				border: 2px solid #FFF;
			}

			@keyframes move {
				0% {
					transform: translateX(0px);
				}

				25% {
					transform: translateX(-300px);
				}

				50% {
					transform: translateX(-600px);
				}

				75% {
					transform: translateX(-900px);
				}

				100% {
					transform: translateX(-1200px);
				}
			}
		style>
	head>
	<body>
		
		<div class="imgBox">
			<div class="showBox">
				<a href=""><img src="image/01.png" alt="">a>
				<a href=""><img src="image/02.png" alt="">a>
				<a href=""><img src="image/03.png" alt="">a>
				<a href=""><img src="image/04.png" alt="">a>
				<a href=""><img src="image/01.png" alt="">a>
			div>
		div>
	body>
html>

方法②Javascript定时器实现图片轮播效果

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;

				box-sizing: border-box;
			}

			.box {
				width: 300px;
				height: 280px;
				overflow: hidden;
				background-color: #00E649;
				margin: 0 auto;
			}

			.box img {
				float: left;
				width: 300px;
				height: 280px;
				border: 2px solid #FFF;
			}
		style>
	head>
	<body>
		
		<div class="box">
			<a href=""><img src="image/01.png" alt="" id="imgSlider" />a>
		div>

		<script type="text/javascript">
			var img = document.getElementById("imgSlider");

			var imgArr = ["image/01.png", "image/02.png", "image/03.png", "image/04.png", "image/01.png"];

			var ind = 0;
			var change = function() {
				ind = (ind + 1) % imgArr.length;
				img.src = imgArr[ind];
			}
			var time = 2000;
			var timer =  setInterval(change,time);
		script>
	body>
html>

你可能感兴趣的:(前端,css,javascript,css3)