透明度轮播

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,ul,li{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			img{
				display: block;
				border: none;
			}
			#scrollBanner{
				width: 900px;
				height: 300px;
				overflow: hidden;
				position: relative;
				}
			#scrollList li{
				position: absolute;
				width: 900px;
				height: 300px;
				opacity: 0;
			}
			#scrollList li:first-child{
				opacity: 1;
			}
			#scrollList img{
				width: 900px;
				height: 300px;
			}
			#btns div{
				position: absolute;
				top: 50%;
				width: 50px;
				height: 50px;
				margin-top: -25px;
				background: #000;
				opacity: .3;
				line-height: 50px;
				text-align: center;
				font-size: 50px;
				color: white;
				cursor: pointer;
			}
			#btns div:first-child{
				left:50px;
			}
			#btns div:last-child{
				right:50px;
			}
			#nums{
				position: absolute;
				bottom: 20px;
				right: 20px;
			}
			#nums li{
				float: left;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				background: white;
				color: red;
				cursor: pointer;
				margin:0 10px;
				border-radius: 50%;
			}
			#nums li.hover,#nums li:hover{
				background: red;
				color: white;
			}
		</style>
	</head>
	<body>
		<div id="scrollBanner">
				<ul id="scrollList">
					<li><img src="img/1.jpg"></li>
					<li><img src="img/2.jpg"></li>
					<li><img src="img/3.jpg"></li>
				</ul>
				<div id="btns">
					<div>&lt;</div>
					<div>&gt;</div>
				</div>
				<ul id="nums">
					<li class="hover">1</li>
					<li>2</li>
					<li>3</li>
				</ul>
		</div>
		<script src="startMove.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var oScrollBanner = document.getElementById("scrollBanner");
			var oScrollList = document.getElementById("scrollList");
			var aList  =oScrollList.children;
			var perWidth = aList[0].offsetWidth;
			oScrollList.style.width = perWidth * aList.length + "px";
			var i = 0;
			
			var timer = setInterval(function(){
				move();
			},3000);
			
			function move(){
				i++;
				
				if(i==aList.length){
					i = 0;
				}
				if(i==-1){
					i=aList.length - 1;
				}
				for(var k = 0; k < aList.length; k++){
					startMove(aList[k],{opacity:0});
				}
				startMove(aList[i],{opacity:100});
				//控制角标的变化
				for(var j = 0; j < aNumsList.length; j++){
					aNumsList[j].className = "";
				}
				
					aNumsList[i].className = "hover";

			}
			
			//左右按钮实现图片切换
			var oBtns = document.getElementById("btns");
			var oPrev = oBtns.children[0];
			var oNext = oBtns.children[1];
			
			oNext.onclick = function(){
				move();
			}
			oPrev.onclick = function(){
				i-=2;
				move();
			}
			
			oScrollBanner.onmouseover = function(){
				clearInterval(timer);
			}
			oScrollBanner.onmouseout = function(){
				timer = setInterval(function(){
					move();
				},3000);
			}
			//角标变化
			var oNums = document.getElementById("nums");
			var aNumsList = oNums.children;
			
			for(let j = 0; j < aNumsList.length; j++){
				aNumsList[j].onmouseover = function(){
					i = j-1;
					move();
				}
			}
		</script>
	</body>
</html>
猜你喜欢
