当前位置：首页 > news >正文

可以做免费推广的网站吗/西安百度快照优化

news 2025/7/1 8:54:30

可以做免费推广的网站吗,西安百度快照优化,建筑工程网上叫什么,中国建筑工程总公司招聘文章目录一.轮播图的功能分析二.源码三.效果图篇章一.轮播图的功能分析 1.左侧、右侧按钮需要绑定单机事件。 2.利用特效函数。【当前显示的图片淡出之后，下一张图渐渐地淡入】二.源码 <!DOCTYPE html> <html lang"en"> <head><…

文章目录

一.轮播图的功能分析
二.源码
三.效果图
篇章

一.轮播图的功能分析

1.左侧、右侧按钮需要绑定单机事件。

2.利用特效函数。【当前显示的图片淡出之后，下一张图渐渐地淡入】

二.源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图之淡入与淡出</title><script src="./js/jQuery.js"></script><style>*{margin: 0;padding:0;}body{background: #eee;}.container{position: relative;width: 600px;height: 400px;margin: 30px auto;border: 1px solid black;/* 溢出隐藏 */overflow: hidden;}ul{position:absolute;width: 100%;height: 100%;}ul li{display: none;}li.cur{display: block;}img{width: 600px;height: 400px;}.lbtn{position:absolute;width: 40px;height: 20px;left: 0px;top: 40%;/* 小手 */cursor: pointer;}.rbtn{position:absolute;width: 40px;height: 20px;right: 0px;top: 40%;/* 小手 */cursor: pointer;}</style>
</head>
<body><div class="container"><ul><li class="cur"><img src="./img/world.jpg" alt=""></li><li><img src="./img/tank.png" alt=""></li><li><img src="./img/firebox.png" alt=""></li></ul><button class="lbtn">&lt;</button><button class="rbtn">&gt;</button></div>
</body>
</html>
<script>//声明信号量var x=0;//左侧按钮$(".lbtn").click(function(){//图片淡出$("li:eq("+ x +")").fadeOut(1000,function(){x++;x = x > 2 ? 0: x; //信号量约束//下一张图片淡入$("li:eq(" + x + ")").fadeIn(1000);});});//右侧按钮$(".rbtn").click(function(){$("li:eq("+ x +")").fadeOut(1000,function(){x--;x = x < 0 ? 2 : x;$("li:eq("+ x +")").fadeIn(1000);});});
</script>