直播带货源码,HTML + jQuery 实现轮播图
HTML页面部分
1、首先创建可视窗口添加6张图片，添加CSS样式
2、添加左右切换按钮，设置样式
3、添加图片导航器，设置样式，添加悬停样式
示例代码如下：
<style> .container { width: 1226px; height: 460px; position: relative; overflow: hidden; margin: 0 auto; } .img-list { width: 7356px; height: 460px; position: absolute; /* 相对于父级移动 */ } .img-list img { width: 1226px; height: 460px; display: block; float: left; } .img-controls { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); overflow: hidden; } .img-controls #left, #right { width: 41px; height: 69px; display: block; } .img-controls #left { background-image: url("../imgs/icon-slides.png"); background-repeat: no-repeat; background-position: -84px 50%; } .img-controls #left:hover { background-image: url("../imgs/icon-slides.png"); background-repeat: no-repeat; background-position: 0 50%; } .img-controls #right { background-image: url("../imgs/icon-slides.png"); background-repeat: no-repeat; background-position: -125px 50%; position: absolute; right: 0px; top: 0%; } .img-controls #right:hover { background-image: url("../imgs/icon-slides.png"); background-repeat: no-repeat; background-position: -42px 50%; } .img-direction { list-style: none; padding: 0; margin: 0; overflow: hidden; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .img-direction li { width: 8px; height: 8px; background-color: rgba(0, 0, 0, 0.4); border: 2px solid #fff; border-color: rgba(255, 255, 255, 0.3); border-radius: 6px; margin: 0 5px; float: left; } /* .img-direction li:hover { background-color: #f5f5f5; border-color: rgba(0, 0, 0, 0.4); cursor: pointer; /* 设置鼠标样式 } */ #img-direction .active { background-color: #f5f5f5; border-color: rgba(0, 0, 0, 0.4); cursor: pointer; } </style> </head> <body> <!-- 可视窗口 --> <div class="container"> <div class="img-list"> <img src="../imgs/1.jpg"> <img src="../imgs/2.jpg"> <img src="../imgs/3.jpg"> <img src="../imgs/4.jpg"> <img src="../imgs/5.jpg"> <img src="../imgs/2.jpg"> </div> <!-- 左右切换按钮--> <div class="img-controls"> <a href="#" id="left"></a> <a href="#" id="right"></a> </div> <!-- 图片导航器--> <ul id="img-direction" class="img-direction"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> 以上就是直播带货源码,HTML + jQuery 实现轮播图的全部代码，更多内容请关注之后的文章
原文链接：https://blog.csdn.net/yb1314111/article/details/127362207?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169258333616800182158176%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=169258333616800182158176&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-28-127362207-null-null.268%5Ev1%5Ekoosearch&utm_term=%E7%9B%B4%E6%92%AD%E5%B8%A6%E8%B4%A7
