jq编写轮播图（淡入淡出的效果）

最新推荐文章于 2022-09-04 23:56:48 发布

置顶

魏亚强

最新推荐文章于 2022-09-04 23:56:48 发布

阅读量743

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/wyq188945/article/details/103523448

版权

大概的效果图如下：
在这里插入图片描述
下面是代码，直接复制，然后替换图片就可以使用(图片放在了最下面)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.banner{
			width: 480px;
			height: 210px;
			margin: 0 auto;			
			position: relative;			
		}
		.img li{
			position: absolute;
			opacity: 0;
		}
		.img li:first-child{			
			opacity: 1;
		}
		.img img{
			height: 210px;
		}
		li{
			list-style: none;
			
		}
		.nextImg{
			position: absolute;
			right: 0px;
			top: 95px;
			background: #000000;
			opacity: 0.5;
			padding: 5px;
			line-height: 14px;
			text-align: center;
			border-radius: 2px;
		}
		.nextImg:hover,.preImg:hover{
			opacity: 1;
		}
		.preImg{
			position: absolute;
			left: 0px;
			top: 95px;
			backgrou