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

 

html文件

<!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 {
				width: 960px;
				height: 320px;
			}

			#wrap ul {
				width: 4800px;
				position: absolute;
			}

			#wrap li {
				float: left;
			}

			#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;
				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/lun.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++) {
		//创建li
		var li = document.createElement('li');
		li.innerHTML = '<img src="' + res[i] + '">';
		imgUl.appendChild(li);
		//序号
		var span = document.createElement('span');
		span.innerHTML = i + 1;
		p.appendChild(span);
	}
	//初始默认样式 设置ul宽度
	p.children[0].className = 'active';
	imgUl.style.width = res.length * imgUl.children[0].offsetWidth + 'px';
	//自动轮播
	var n = 0;
	//动画
	function auto() {
		if (n >= res.length) {
			imgUl.style.left = 0;
			n = 0;
		}
		n++;
		var end = -n * imgUl.children[0].offsetWidth;
		bufferMove(imgUl, {
			left: end
		});
		//序号
		for (var i = 0; i < p.children.length; i++) {
			p.children[i].className = '';
		}
		if (n >= res.length) {
			p.children[0].className = 'active';
		} else {
			p.children[n].className = 'active';
		}
	}
	//无缝轮播
	var fade = imgUl.children[0].cloneNode(true);
	imgUl.appendChild(fade);
	imgUl.style.width = (res.length + 1) * imgUl.children[0].offsetWidth + 'px';

	//序号切换
	for (var i = 0; i < p.children.length; i++) {
		p.children[i].idx = i;
		p.children[i].onmouseover = function() {
			var end = -this.idx * imgUl.children[0].offsetWidth;
			bufferMove(imgUl, {
				left: end
			});
			//序号
			for (var i = 0; i < p.children.length; i++) {
				p.children[i].className = '';
			}
			p.children[this.idx].className = 'active';
			n = this.idx;
		}
	}

	//箭头切换
	barS[0].onclick = function() {
		if (n <= 0) {
			imgUl.style.left = -res.length * imgUl.children[0].offsetWidth + 'px';
			n = res.length;
		}
		n--;
		var end = -n * imgUl.children[0].offsetWidth;
		bufferMove(imgUl, {
			left: end
		});
		//序号
		for (var i = 0; i < p.children.length; i++) {
			p.children[i].className = '';
		}
		if (n >= res.length) {
			p.children[0].className = 'active';
		} else {
			p.children[n].className = 'active';
		}
	}
	barS[1].onclick = function() {
		auto();
	}
	//开始
	var timer = setInterval(auto, 3000);
	//鼠标移入移出
	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 @ 2021-08-05 15:22  JackieDYH  阅读(8)  评论(0)  编辑  收藏  举报  来源