使用Css,JavaScript实现轮播效果图
作者：互联网
css详细代码：
<style>
.container {
width: 980px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.content {
width: calc(980px*8);
height: 330px;
margin-left: 0px;
transition: margin-left 1s;
}
.container:hover>.tab {
opacity: 1;
transition: opacity 1s;
}
.content>img {
float: left;
width: 980px;
height: 330px;
}
.tab {
position: absolute;
top: calc(330px/2 - 20px);
width: 100%;
opacity: 0;
}
.tab>span {
display: block;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: rgba(203, 203, 203, 0.47);
font-size: 30px;
color: #fff;
cursor: pointer;
}
.tab>span:first-child {
float: left;
}
.tab>span:last-child {
float: right;
}
</style>
html详细代码：
<div class="container">
<div class="content">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
<img src="6.jpg" />
<img src="7.jpg" />
<img src="8.jpg" />
</div>
<div class="tab">
<span οnclick="slideImg(0)"><</span>
<span οnclick="slideImg(1)">></span>
</div>
</div>
JS详细代码：
<script>
/**
* @method slideImg
* @param d :direction left 0, right 1.
*/
function slideImg(d) {
var oDiv = document.getElementsByClassName("content")[0];
var mLeft = oDiv.style.marginLeft;
if (mLeft == "") {
mLeft = "0px"
}
mLeft = parseInt(mLeft);
// 向左滑动
if (d === 0) {
mLeft -= 980;
if (mLeft < -6860) {
mLeft = 0;
}
oDiv.style.marginLeft = mLeft + "px";
} else {
// 向右滑动
mLeft += 980;
if (mLeft > 0) {
mLeft = -6860;
}
oDiv.style.marginLeft = mLeft + "px";
}
// console.log(mLeft)
}
</script>
标签：oDiv,轮播,JavaScript,mLeft,width,tab,height,Css,left 来源： https://blog.csdn.net/m0_58813000/article/details/117766388