JQ轮播图

最新推荐文章于 2022-05-30 20:51:16 发布

家住三十三重天外

最新推荐文章于 2022-05-30 20:51:16 发布

阅读量1.2k

点赞数

分类专栏： jQuery 文章标签： JQ万能轮播图

本文链接：https://blog.csdn.net/zhangrenliang/article/details/55253521

版权

lunbotu.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery轮播效果图 </title>
<style type="text/css">
body{ margin:0 auto; text-align:center;}
#main{ width:370px; height:240px; overflow:hidden; margin:0 auto; position:relative;}
#images{ width:100%; height:240px; overflow:hidden; position:relative;}
#images div{ display:block; width:100%; height:100%; position:absolute; top:0px; left:0px; opacity:0.3; display:none;}
#images div:nth-child(1){opacity:1; display:block;background:red}

#btn{ width:130px; height:30px; overflow:hidden; text-align:center; position:absolute; left:0px; bottom:0px;}
#btn span{ display:block; width:20px; height:20px; line-height:20px;
font-size:13px; color:#fff; background-color:red; float:left;margin:5px 0px auto 5px;
border-radius:50%; text-align:center;
}
#arrow{
width:100%; height:30px; overflow:hidden; position:absolute;
top:105px; left:0px;
}
#arrow div{
width:100%; height:100%; position:relative;
}
#arrow div span{ display:block; w

最低0.47元/天解锁文章

家住三十三重天外

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQ轮播图

lunbotu.html jquery轮播效果图 body{ margin:0 auto; text-align:center;}#main{ width:370px; height:240px; overflow:hidden; margin:0 auto; position:relative;}#images{ width:100%; he
复制链接

扫一扫