html js 纯js 轮播图.opacity: .transition: all .-moz-transition:

介绍

调用的时候
可以使用iframe 嵌入这个东西
有需要设置小宽高
ok
样式

代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#adv {
			position: relative;
			display: flex;
			align-items: center;
			/*弹性盒子实现垂直居中*/
			margin: 0 auto;
			min-width: 1300px;
			max-width: 1366px;
			height: 400px;
		}

		.arrow {
			position: absolute;
			height: 60px;
			width: 60px;
			border-radius: 50%;
			color: #000;
			text-align: center;
			line-height: 60px;
			font-size: 50px;
			background: #e5e5e5;
			filter: alpha(opacity=70);
			/*ie*/
			opacity: .7;
			border: 0;
			z-index: 2;
			transition: all .5s;
			-moz-transition: all .5s;
			/* Firefox 4 */
			-webkit-transition: all .5s;
			/* Safari 和 Chrome */
			-o-transition: all .5s;
			/* Opera */
		}

		.arrow:hover {
			filter: alpha(opacity=40);
			/*ie*/
			opacity: .4;
		}

		#left {
			left: 0;
		}

		#right {
			right: 0;
		}

		#adv-img {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;
		}

		#adv-img-ul {
			position: absolute;
			left: -100%;
			top: 0;
			width: 1000%;
			transition: all 1s linear;
		}

		#adv-img-ul li {
			float: left;
			width: 10%;
		}

		.num {
			position: absolute;
			height: 50px;
			width: 100%;
			top: 400px;
			text-align: center;
			z-index: 99;
		}

		.num ul {
			display: inline-block;
		}

		#adv-img-num li {
			float: left;
			margin: 0 20px 0 20px;
			color: #e5e5e5;
			cursor: pointer;
		}

		#adv-img-num .on {
			float: left;
			margin: 0 20px 0 20px;
			color: #85ace0;
		}
	</style>
</head>

<body>
	<div id="adv">
		<div id="arr">
			<button class="arrow" id="left">←</button>
			<button class="arrow" id="right">→</button>
		</div>
		<div id="adv-img">
			<ul id="adv-img-ul" style="left:0;">
				<li><img src="images/1.jpg" width="100%"></li>
				<li><img src="images/2.jpg" width="100%"></li>
				<li><img src="images/3.jpg" width="100%"></li>
				<li><img src="images/4.jpg" width="100%"></li>
				<li><img src="images/5.jpg" width="100%"></li>
			</ul>
		</div>
		<div class="num">
			<ul id="adv-img-num">
				<li index="1" class="on">○</li>
				<li index="2">○</li>
				<li index="3">○</li>
				<li index="4">○</li>
				<li index="5">○</li>
			</ul>
		</div>
	</div>
</body>
<script>
	var adv = document.getElementById("adv");
	var imgUl = document.getElementById("adv-img-ul");
	var right = document.getElementById("right");
	var left = document.getElementById("left");
	var button = document.getElementById("adv-img-num").children;
	var index = 1;

	//改变位置
	function animate(offset) {
		var newLeft = parseInt(imgUl.style.left) + offset;
		if (newLeft < -400) {
			// 到了最右
			imgUl.style.left = 0 + '%';
		} else if (newLeft > 0) {
			// 到了最左
			imgUl.style.left = -400 + '%';
		} else {
			imgUl.style.left = newLeft + '%';
		}
	}

	//自动轮播 鼠标悬停暂停
	var timer = null;
	function startImg() {
		if (timer) clearInterval(timer);
		timer = setInterval(function () {
			right.onclick();
		}, 2000);
	}
	adv.onmouseover = function stopImg() {
		clearInterval(timer);
	}
	adv.onmouseout = function startImg() {
		if (timer) clearInterval(timer);
		timer = setInterval(function () {
			right.onclick();
		}, 2000);
	}
	// 我一定要写两个原装开始才会动？？什么毛病？？

	//下面按钮
	function buttonShow() {
		// 清除原有样式
		for (var i = 0; i < button.length; i++) {
			if (button[i].className == 'on') {
				button[i].className = '';
			}
		}
		button[index - 1].className = 'on';

	}
	left.onclick = function () {
		index -= 1;
		if (index < 1) {
			index = 5;
		}
		buttonShow();
		animate(100);
	}
	right.onclick = function () {
		index += 1;
		if (index > 5) {
			index = 1;
		}
		buttonShow();
		animate(-100);
	}
	//点击按钮跳转
	for (var i = 0; i < button.length; i++) {
		// 立即执行函数 不闭包就只执行i=5时候
		(function (i) {
			button[i].onclick = function () {
				var clickIndex = parseInt(this.getAttribute('index'));
				var offset = 100 * (index - clickIndex);
				animate(offset);
				index = clickIndex;
				buttonShow();
			}
		})(i)
	}
</script>
</html>
持续更新