直播带货源码,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;
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 实现轮播图的全部代码，更多内容请关注之后的文章
标签：jQuery,repeat,轮播,img,50%,controls,HTML,background,position From： https://www.cnblogs.com/yunbaomengnan/p/16798967.html