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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/286840.html
標籤：其他
上一篇：Python零基礎到實踐/爬蟲/自動化/資料分析與挖掘/機器學習與深度學習 精品就業學習路線資料分享
下一篇：面向物件類的使用（15）