Jquery实现轮播图(fade效果)

最新推荐文章于 2022-07-22 10:25:29 发布

原创最新推荐文章于 2022-07-22 10:25:29 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

Jquery 同时被 3 个专栏收录

3 篇文章

订阅专栏

轮播图

1 篇文章

订阅专栏

码云

1 篇文章

订阅专栏

本文展示了一个使用jQuery实现的淡入淡出轮播图效果，包括HTML结构、CSS样式和JavaScript代码。轮播图通过改变图片的透明度实现平滑过渡，自动播放并具有无缝循环特性。

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

效果：https://zo18.gitee.io/lbt/

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<title>jquery实现轮播图</title>

<style>

* {

margin: 0;

padding: 0;

list-style: none;

}

.content {

width: 900px;

height: 450px;

margin: 200px auto;

overflow: hidden;

position: relative;

}

.box {

width: 100%;

height: 100%;

}

.box ul {

width: 100%;

height: 100%;

}

.box ul li {

float: left;

position: absolute;

top: 0;

left: 0;

}

img {

width: 100%;

background: rgba(255, 255, 255, .8)

}

.box1 ul {

width: 100%;

margin: 0 auto;

height: 100%;

border-radius: 15px;

}

.box ul li {

opacity: 0;

}

.box ul li.block {

animation: play 2s forwards;

}

.box ul li.b {

opacity: 1;

}

@keyframes play {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

</style>

</head>

<body>

<div class="content">

<div class="box">

<ul>

<li class="b"><img src="http://e.hiphotos.baidu.com/image/pic/item/500fd9f9d72a6059099ccd5a2334349b023bbae5.jpg" alt=""></li>

<li><img src="http://e.hiphotos.baidu.com/image/pic/item/9358d109b3de9c824d60cc586781800a18d843db.jpg" alt=""></li>

<li><img src="http://h.hiphotos.baidu.com/image/pic/item/c75c10385343fbf20503329abb7eca8065388f58.jpg" alt=""></li>

<li><img src="http://f.hiphotos.baidu.com/image/pic/item/72f082025aafa40f766f5229a064034f79f0199c.jpg" alt=""></li>

<li><img src="http://e.hiphotos.baidu.com/image/pic/item/500fd9f9d72a6059099ccd5a2334349b023bbae5.jpg" alt=""></li>

</ul>

</div>

</body>

</html>

<script>

var count = 0;

function autoplay() {

id = setInterval(function() {

if (count >= 4) {

count = 0;

$("li").eq(2).css("opacity", 0);

}

count++

$("li").eq(count).addClass("block").siblings("li").removeClass("block");

$(".block").prev().css("opacity", 1).siblings().css("opacity", 0);

}, 3000);

}

autoplay();

</script>