js轮播

最新推荐文章于 2024-05-13 09:30:14 发布

sinat_36688909

最新推荐文章于 2024-05-13 09:30:14 发布

阅读量131

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/sinat_36688909/article/details/53141419

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>轮播图</title>
	<link rel="stylesheet" href="">
	<style type="text/css" media="screen">
	*{
	margin: 0;
	padding: 0;
	}
	.clear:after{
	content: '';
	clear: both;
	display: block;
	overflow: hidden;
	height: 0px;
	}
	.box{
	width: 490px;
	height: 170px;
	margin: 100px auto;
	position: relative;
	overflow: hidden;
	}
	.container{
	width: 3430px;
	height: 170px;
	position: absolute;
	top: 0px;
	left: 0px;
	}
	.container>img{
	/display: block;/
	float: left;
	}
	.indicator{
	position: absolute;
	bottom: 0px;
	right: 0px;
	}
	li{
	list-style: none;
	float: left;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	margin-left: 5px;
	background-color: rgba(0,0,0,0.6);
	color: white;
	}
	.indicator .active{
	background-color: red;
	color: yellow;
	}

	</style>
	</head>
	<body>
	<div class="box">
	<div class="container clear">
	<img src="images/img1.jpg" alt="">
	<img src="images/img2.jpg" alt="">
	<img src="images/img3.jpg" alt="">
	<img src="images/img4.jpg" alt="">
	<img src="images/img5.jpg" alt="">
	<img src="images/img6.jpg" alt="">
	<img src="images/img1.jpg" alt="">
	</div>
	<div class="indicator">
	<ul class="clear">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	</ul>
	</div>
	</div>
	<script>
	window.onload = function(){
	var containerElement = document.getElementsByClassName('container')[0];
	var liList = document.getElementsByTagName('li');
	var showIndex = 0;
	var innerTimer = null;
	var outerTimer = setInterval(doMove,1000);
	// 以动画的方式把container向左移动490px;
	function doMove(){
	showIndex++;
	// 高亮显示showIndex 对应的li
	showActive(showIndex);
	// var currentLeft = containerElement.offsetLeft;
	// currentLeft -= 490;
	// containerElement.style.left = currentLeft + 'px';
	var endPos = containerElement.offsetLeft - 490 ;
	clearInterval(innerTimer);
	innerTimer = setInterval(function(){
	var currentLeft = containerElement.offsetLeft;
	currentLeft -= 10;
	containerElement.style.left = currentLeft + 'px';
	if(currentLeft <= endPos){
	clearInterval(innerTimer);
	// 如果是最后一张，需要重置为初始的状态
	if(showIndex >= 6){
	showIndex = 0;
	showActive(showIndex);
	// 把container的left 重置为0
	containerElement.style.left = '0px';
	}
	}
	},10);
	}
	function showActive(index){
	for(var i = 0; i < liList.length; i++){
	if( i == showIndex){
	liList[i].className = 'active';
	}
	else{
	liList[i].className = '';
	}
	}
	}
	// 对每一个li元素添加onmouseover 和 onmouseout 的操作
	for(var i = 0; i < liList.length; i++){
	liList[i].index = i;
	liList[i].onmouseover = function(){
	clearInterval(innerTimer);
	clearInterval(outerTimer);
	// 移动容器container, 显示当前li对应的图片，
	showIndex = this.index;
	containerElement.style.left = (-showIndex *490) + 'px';
	showActive(showIndex);
	}
	liList[i].onmouseout = function(){
	outerTimer = setInterval(doMove,2000);
	}
	}
	}
	</script>
	</body>
	</html>