ajax自动轮播图-透明度轮播-可点击-鼠标悬停止等-完善版

效果图（加快处理了）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				list-style: none
			}

			#wrap {
				width: 960px;
				height: 320px;
				border: 2px solid red;
				margin: 50px auto;
				position: relative;
				overflow: hidden;
			}

			#wrap img {
				display: block;
				border: none;
				width: 960px;
				height: 320px;
			}

			#wrap ul {
				/* width: 4800px; */
			}

			#wrap li {
				/* float: left; */
				position: absolute;
				opacity: 0;
			}
			/* #wrap li:first-child {
				opacity: 1;
			} */

			#wrap p {
				position: absolute;
				bottom: 20px;
				width: 100%;
				text-align: center;
			}

			#wrap span {
				padding: 2px 8px;
				background: blue;
				color: #fff;
				margin-right: 4px;
				cursor: default;
			}

			#wrap .active {
				background: red;
			}

			#wrap .bar {
				position: absolute;
				top: 50%;
				width: 960px;
				height: 80px;
				transform: translateY(-50%);
				overflow: hidden;
			}

			#wrap .bar>div {
				position: absolute;
				width: 60px;
				height: 80px;
				border-radius: 4px;
				opacity: .6;
				background: #eee url(img/btn_show.png) no-repeat 0px -80px;
			}

			#wrap .bar>.right {
				position: absolute;
				right: 0;
				background: #eee url(img/btn_show.png) no-repeat 0px 0px;
			}
		</style>
	</head>
	<body>
		<!--1.可视区：一张图片的大小-->
		<div id="wrap">
			<!--2.图片列表-->
			<ul>
				<!-- <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li> -->
			</ul>
			<p>
				<!-- <span class="active">1</span><span>2</span><span>3</span><span>4</span> -->
			</p>
			<div class="bar">
				<div class="left"></div>
				<div class="right"></div>
			</div>
		</div>
		<script src="./js/getPublic.js"></script>
		<script src="./js/lunt.js"></script>
	</body>
</html>

js文件

ajax('./data/img.json','get','',function(res){
	res = JSON.parse(res);
	// console.log(res)
	//渲染
	for(var i=0; i<res.length; i++){
		var li = document.createElement('li');
		li.innerHTML = '<img src="'+res[i]+'">';
		imgUl.appendChild(li);
		//序号
		var span = document.createElement('span');
		span.innerText = i+1;
		p.appendChild(span);
	}
	//初始样式
	p.children[0].className = 'active';
	imgUl.children[0].style.opacity = 1;
	
	//自动轮播
	var timer = setInterval(auto,3000);
	var n = 0;
	function auto(){
		n++;
		if(n >=imgUl.children.length){
			n = 0;
		}else if(n <=-1){
			n = imgUl.children.length-1;
		}
		//将所有li 透明度改0
		for(var i=0; i<imgUl.children.length; i++){
			bufferMove(imgUl.children[i],{opacity:0});
		}
		bufferMove(imgUl.children[n],{opacity:100});
		//序号改变
		for(var i=0; i<p.children.length; i++){
			p.children[i].className = '';
		}
		p.children[n].className = 'active';
	}
	//悬停序号轮播
	var spanS = p.children;
	for(var i=0; i<spanS.length; i++){
		spanS[i].idx = i;
		spanS[i].onmouseover = function(){
			// for(var i=0; i<spanS.length; i++){
			// 	spanS[i].className = '';
			// }
			// this.className = 'active';
			//到auto时还会加1，所有这里先减1处理
			n = this.idx-1;
			auto();
		}
	}
	
	//左右点击轮播
	barS[0].onclick = function(){
		n-=2;
		auto();
	}
	barS[1].onclick = function(){
		auto();
	}
	
	//鼠标悬停停止播放
	var wrap = imgUl.parentNode;
	wrap.onmouseover = function(){
		clearInterval(timer);
	}
	wrap.onmouseout = function(){
		timer = setInterval(auto,3000);
	}
})
//获取ul
var imgUl = document.querySelector('#wrap>ul');
//获取p
var p = document.querySelector('#wrap>p');
//箭头
var barS = document.querySelectorAll(".bar>div");

json文件

[
	"img/1.jpg",
	"img/2.jpg",
	"img/3.jpg",
	"img/4.jpg"
]

 

posted @ 2020-04-19 15:25  JackieDYH  阅读(4)  评论(0)  编辑  收藏  举报  来源