利用jquery怎么实现一个淡入淡出的轮播图效果

2024-01-18 15:38| 来源: 网络整理| 查看: 265

利用jquery怎么实现一个淡入淡出的轮播图效果发布时间：2020-12-14 14:31:07 来源：亿速云阅读：145 作者：Leah 栏目：开发技术

本篇文章为大家展示了利用jquery怎么实现一个淡入淡出的轮播图效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

实现方法如下

Document * { padding: 0px; margin: 0px; } /* 盒子 */ .box { position: relative; } /* banner图 */ .box, .banner { width: 1000px; height: 500px; margin: 50px auto; } .box .banner { position: relative; list-style: none; } .banner li { display: none; } .box ul li img { position: absolute; } .banner .b1 { display: block; } span { background: rgb(0, 0, 0, 0.5); width: 40px; height: 50px; display: block; position: absolute; left: 0px; top: 50%; z-index: 3; line-height: 50px; text-align: center; cursor: pointer; font-family: "宋体"; font-size: 20px; color: white; } .right { left: auto; right: 0px; } .bottom { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); list-style: none; } .bottom li { width: 10px; height: 10px; background: rgb(255, 255, 255); float: left; border-radius: 50%; margin: 0px 5px; /* 重影 */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); cursor: pointer; } .bottom .on { background: rgb(255, 153, 0); }

【本文地址】

公司简介

联系我们