Front-end——jQuery自动轮播图（实现鼠标悬停）

本案例使用到：

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

方法触发 mouseenter 和 mouseleave 事件。

$(selector).hover(inFunction,outFunction) ——》等价于 $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。

参数	描述
inFunction	必需。规定 mouseenter 事件发生时运行的函数。
outFunction	可选。规定 mouseleave 事件发生时运行的函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.5.1.min.js"></script>
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			@keyframes myshow{
				from{
					left: 750px;
				}
				to{
					left: 0px;
				}
			}
			@keyframes myhide{
				from{
					left: 0px;
				}
				to{
					left: -750px;
				}
			}
			
			#app>.show{
				animation: myshow 1s linear forwards;
			}
			
			#app>.hide{
				animation: myhide 1s linear forwards;
			}
			
			#app{
				height: 500px;
				width: 750px;
				position: absolute;
				top: calc((100% - 500px) / 2);
				left: calc((100% - 750px) / 2);
				border: 2px solid #0000FF;
				overflow: hidden;
			}
			#app>div{
				width: 750px;
				height: 500px;
				position: absolute;
				top: 0;
				left: 0;
			}
			#app>div:nth-child(1) {
				background: url('img/111.jpg');
			}
			#app>div:nth-child(2) {
				background: url('img/222.jpg');
			}
			#app>div:nth-child(3) {
				background: url('img/333.jpg');
			}
			#app>div:nth-child(4) {
				background: url('img/444.jpg');
			}
			#app>div:nth-child(5) {
				background: url('img/555.jpg');
			}
			
			ul{
				position: absolute;
				right: 0;
				bottom: 0;
			}
			ul>li{
				list-style: none;
				width: 20px;
				height: 20px;
				float: left;
				background: white;
				border-radius: 10px;
				margin: 5px 10px;
				border: 2px solid #000000;
				box-sizing: border-box;
			}
			ul>li:hover{
				border-color: white;
				background: #000000;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
		<script>
			$(function(){
				let index = 0
				//定时器为了实现来回切换
				timer = setInterval(function(){
					$('#app>div').eq(index).addClass('show').removeClass('hide').siblings('div').removeClass('show').addClass('hide')
					$('#app>ul>li').eq(index).css({
						'border-color': 'white',
						background: '#000000',
					}).siblings('li').css({
						'border-color': '#000000',
						background: 'white',
					})
					index++
					if(index === 5) {
						index = 0
					}
				},3000)
				
				//hover(over,out)
                //定义鼠标移入移出动作
				$('#app').hover(function(){
					clearInterval(timer)
				},function(){
					timer = setInterval(function(){
						$('#app>div').eq(index).addClass('show').removeClass('hide').siblings('div').removeClass('show').addClass('hide')
						$('#app>ul>li').eq(index).css({
							'border-color': 'white',
							background: '#000000',
						}).siblings('li').css({
							'border-color': '#000000',
							background: 'white',
						})
						index++
						if(index === 5) {
							index = 0
						}
					},3000)
				})
			})
		</script>
	</body>
</html>

Front-end——jQuery自动轮播图（实现鼠标悬停）

本案例使用到：

猜你喜欢