轮播图

最新推荐文章于 2024-12-23 11:36:10 发布

XiaoXiongV

最新推荐文章于 2024-12-23 11:36:10 发布

阅读量118

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_37607451/article/details/86485275

js 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个自动轮播的图片展示效果，包括鼠标悬停时显示控制按钮、自动播放及点击切换等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="js/com.js"></script>
	<link rel="stylesheet" href="css/com.css" />
	<script type="text/javascript" src="js/index.js"></script>
	<link rel="stylesheet" href="css/index.css" />
</head>

<body>
	<div class="bg">
		<div id="box" class="box">
			<div class="inner">
				<ul>
					<li>
						<a href="#"><img src="img/1.jpg" /> </a>
					</li>
					<li>
						<a href="#"><img src="img/2.jpg" /> </a>
					</li>
					<li>
						<a href="#"><img src="img/3.jpg" /> </a>
					</li>
					<li>
						<a href="#"><img src="img/4.jpg" /> </a>
					</li>
					<li>
						<a href="#"><img src="img/1.jpg" /> </a>
					</li>
				</ul>
				<!--小方小图标-->
				<div class="square">
					<span class="current">1</span>
					<span>2</span>
					<span>3</span>
					<span>4</span>
					<!--<span>5</span>-->
				</div>
				<!--两侧图标-->
				<div id="arr" class="arr">
					<span id="_left" class="_left">&lt;</span>
					<span id="_right" class="_right">&gt;</span>
				</div>
			</div>
		</div>
		<script>
			//获取box
			var box = my$("box");
			//获取inner
			var inner = my$("box").children[0];
			//获取ul
			var ul = inner.children[0];
			//获取小图标
			var square = inner.children[1];
			/*
			 * 下方小图标特效
			 */
			//获取小图标数组			
			var squObj = square.children;
			//左右两侧图标显隐
			ul.onmouseover = function() {
				my$("arr").children[0].style.display = "block";
				my$("arr").children[1].style.display = "block";
			}
			ul.onmouseout = function() {
				my$("arr").children[0].style.display = "none";
				my$("arr").children[1].style.display = "none";
			}
			my$("arr").children[0].onmouseover = function() {
				this.style.display = "block";
				my$("arr").children[1].style.display = "block";

			}
			my$("arr").children[1].onmouseover = function() {
				this.style.display = "block";
				my$("arr").children[0].style.display = "block";
			}

			//点击移动事件
			my$("_left").onclick = f1;

			function f1() {
				if(ul.offsetLeft > 0) {
					ul.style.left = 0 + "px";
				}
				animStep(ul, inner.offsetWidth);
			}
			my$("_right").onclick = f2;

			function f2() {
				animStep(ul, -inner.offsetWidth);
			}
			clickSwitch(squObj, ul, "current", inner.offsetWidth);

			var timeI = setInterval(ft, 1000);

			function ft() {
				//获取当前位置
				var current = ul.offsetLeft;
				console.log(current);
				if(current <= -2920) {
					ul.style.left = 0 + "px";
				} else {
					//目标位置
					var target = current + (-inner.offsetWidth);
					//把left赋给元素
					ul.style.left = target + "px";
				}
			}

			my$("box").onmouseover = function() {
				clearInterval(timeI);
			}
	//				my$("box").onmouseout = function() {
	//					setInterval(ft,1000);
	//				}
		</script>
		<script>
			var a = document.getElementsByClassName("inner");
			console.log(a);
			console.log(a[0].children[0]);
		</script>
	</div>
</body>

</html>

function my$(id) {
return document.getElementById(id);
}
/**
 * 例子：addEventListener(my$("dv"), "click", function() {
		alert("1");
	})
 * @param {Object} ele 元素
 * @param {Object} type 触发事件的种类 去掉on
 * @param {Object} fn 事件函数
 */
function addEventListener(ele, type, fn) {
	if(ele.addEventListener) {
		ele.addEventListener(type, fn, false);
	} else if(ele.attachEvent) {
		ele.attachEvent("on" + type, fn);
	} else {
		ele["on" + type] = fn;
	}
}
/**
 * 
 * @param {Object} ele 
 * @param {Object} text
 */
function setInnerText(ele, text) {
	if(typeof ele.textContent == "undefined") {
		ele.innerText = text;
	} else {
		ele.textContent = text;
	}
}
/**
 * 
 * @param {Object} ele
 */
function getInnerText(ele) {
	if(typeof ele.textContent == "undefined") {
		return ele.innerText;
	} else {
		return ele.textContent;
	}
}
/**
 * 移动一个对象   在X轴上 适用于有往返运动的情况
 * 例子：animate(my$("dv"),400)   dv这个对象移动400px   
 * @param {Object} ele 被移动的对象
 * @param {Object} target 目标位置
 */
function animate(ele, target) {
	//清理定时器
	clearInterval(ele.timeId);
	//var timeId  这样写是创建一个对象 这样连续点击就会多次开辟空间 创建多个对象
	//ele.timeId 这是给ele添加了一个属性					
	ele.timeId = setInterval(function() {
		//获取当前位置current   offsetLeft 使用style标签包裹的left属性不能使用style.left来得到，但可以使用这个方法赋值
		var current = ele.offsetLeft;
		//设置移动距离temp且每20毫秒移动一次，
		var step = 200; //修改该值提高过图速度
		//由于可能目标位置小于当前位置所以给temp添加一个判定
		step = current > target ? -step : step;
		//移动
		current += step;

		//计时器   20毫秒运动一次 一次运动temp 由于有往返运动使用绝对值
		if(Math.abs(current - target) > Math.abs(step)) {
			//此时运动 
			ele.style.left = current + "px";
		} else {
			//此时清理定时器 停止运动且把目标位置赋予当前位置
			clearInterval(ele.timeId);
			ele.style.left = target + "px";
		}
	}, 20)
}

/**
 * 点击切换循环  需要配合animate()使用
 * 例子：clickSwitch(squObj,"current",inner.offsetWidth);
 * @param {Object} ele 被点击的按钮方块
 * @param {Object} moved 被移动的对象
 * @param {Object} current 选中的按钮需显示的背景颜色 这是一个类选择器
 * @param {Object} width 移动的距离
 */
function clickSwitch(ele, moved,current, width) {
	for(var i = 0; i < ele.length; i++) {
		//给所有span添加一个index属性
		ele[i].setAttribute("index", i);

		//鼠标覆盖事件
		ele[i].onmouseover = function() {
			//清除所有span的背景色					
			for(var j = 0; j < ele.length; j++) {
				ele[j].removeAttribute("class");
				//							squObj[j].style.backgroundColor="";
			}
			this.className = "current";
			//给覆盖的span添加class curr
			//						this.style.backgroundColor="yellow";
			//图片切换事件
			var index = this.getAttribute("index"); //获取自己添加的属性					
			animate(moved, (-index) * (width))
		}
	}
}
/**
 * 适用于往一个方向运动
 * 移动元素  若向左移动step取负值即可
 * @param {Object} ele 被移动的元素
 * @param {Object} step 移动的距离 不要写单位
 */
function animStep(ele, step) {
	//获取当前位置
	var current = ele.offsetLeft;
	//目标位置
	var target = current + step;
	//把left赋给元素
	ele.style.left = target + "px";
}

img {
	height: 454px;
	width: 730px;
	vertical-align: top;
}

li {
	float: left;
}

.left_ {
	height: 454px;
	width: 100px;
	background-color: pink;
	float: left;
}

.rigth_ {
	height: 454px;
	width: 100px;
	background-color: pink;
	float: left;
}

.box {
	height: 454px;
	width: 730px;
	background-color: #ccc;
	float: left;
	border: 5px solid gray;
	/*margin: 100px auto;*/
}

.inner {
	width: 730px;
	height: 454px;
	background-color: ;
	position: relative;
	overflow: hidden;
}

.inner ul {
	width: 1000%;
	position: absolute;
	top: 0;
	left: 0;
}

.square {
	position: absolute;
	background-color:#CCCCCC;
	opacity: 0.3;
	bottom: 10px;
	right: 10px;
	cursor: pointer;
}

.square span {
	width: 20px;
	height: 20px;
	display: inline-block;
	text-align: center;
	/*background-color: red;*/
	cursor: pointer;
}

.square .current {
	background-color: yellow;
}

.arr {
	position: absolute;
	top: 50%;
	color: #FFFFFF;
	width: 100%;
	/*height: 100%;*/
}

.arr span {
	background-color: #808080;
	opacity: 0.3;
	font-size: 40px;
	line-height: 40px;
	cursor: pointer;
	display: none;
}

._right {
	position: absolute;
	right: 10px;
}

._left {
	position: absolute;
	left: 10px;
}