简易轮播图效果

zichuanhuo221

于 2016-12-29 16:20:42 发布

阅读量261

点赞数

本文链接：https://blog.csdn.net/zichuanhuo221/article/details/53929643

版权

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="css/style.css">
	<style>
	#bannel{overflow:hidden;}
	</style>
	</head>
	<body>
	<div id="bannel">
	<img src="images/1.jpg" alt="">
	<img src="images/2.jpg" alt="">
	<img src="images/3.jpg" alt="">
	<img src="images/4.jpg" alt="">
	<img src="images/5.jpg" alt="">
	</div>
	<script>
	// 获取所有的图片
	var _imgs = document.getElementsByTagName("img");
	// 声明两个表示图片的变量
	var _index = 0;
	var _next = 1;
	// 开始执行切换效果
	setInterval(function() {
	// 画图中的第一步
	_imgs[_index].style.left = _imgs[_index].offsetLeft - _imgs[0].offsetWidth + "px";
	// 画图中的第二部
	_imgs[_next].style.left = _imgs[_next].offsetLeft - _imgs[0].offsetWidth + "px";
	// 画图中的第三部
	_imgs[_index].style.left = _imgs[0].offsetWidth + "px";

	_index++;
	_next++;
	if(_index >= _imgs.length) {
	_index = 0;
	}
	if(_next >= _imgs.length) {
	_next = 0;
	}
	}, 1000);
	</script>
	</body>
	</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注