一、效果
1、html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="slide" id='slide'>
<div class="left-btn btn" id="left-btn"><</div>
<div class="slide-nav">
<div class="slide-container" id='slide-container' style="left:0;"></div>
<div class="slide-mask" id='slide-mask'></div>
</div>
<div class="right-btn btn" id="right-btn">></div>
</div>
<script type="text/javascript" src='js.js'></script>
<!-- <script type="text/javascript" src = 'js/test/test.js'></script> -->
</body>
</html>
2、js代码：
var imgObj = {
"imgList": [
{ "name": "name1", "url": "imgs/1.jpg", "detail": "fewfewfwfewf1", "link": "http://www.hao123.com" },
{ "name": "name2", "url": "imgs/2.jpg", "detail": "fewfewfwfewf2", "link": "http://www.baidu.com" },
{ "name": "name3", "url": "imgs/3.jpg", "detail": "fewfewfwfewf3", "link": "http://www.w3cschool.com" },
{ "name": "name4", "url": "imgs/4.jpg", "detail": "fewfewfwfewf4", "link": "http://www.taobao.com" }
]
}
var parent = document.getElementById("slide");
slideImg(parent, imgObj);
function slideImg(parent, imgObj) {
var leftBtn = document.getElementById("left-btn");
var rightBtn = document.getElementById('right-btn');
var container = document.getElementById("slide-container");
var mask = document.getElementById("slide-mask");
var circles = document.getElementsByClassName("img-list-btn");
var nowIndex = 1;
//填充图片
var len = imgObj.imgList.length;
for (let i = 0; i < len; i++) {
let imgListBoj = "<div class='img'>" +
"<a href='" + imgObj.imgList[i].link + "'>" +
"<img src='" + imgObj.imgList[i].url + "'>" +
"</a>" +
"</div>";
container.innerHTML += imgListBoj;
}
//填充圆点
for (var i = 0; i < len; i++) {
var list;
if (i == 0) {
list = "<span class='img-list-btn choose' id = 'img-list-btn' data-index='" + (i + 1) + "'></span>";
} else {
list = "<span class='img-list-btn' id = 'img-list-btn' data-index='" + (i + 1) + "'></span>";
}
mask.innerHTML += list;
}
//左键
leftBtn.addEventListener("click", function() {
var left = container.getAttribute("left");
if (left == null) {
left = 0;
container.setAttribute("left", "0");
}
if (nowIndex >= 1 && nowIndex < len) {
left = parseInt(left) - 800;
if (nowIndex != len) {
nowIndex++;
for (var j = 0; j < len; j++) {
/* console.log(circles[j]);*/
var className = circles[j].getAttribute("class");
className = className.replace("choose", "");
circles[j].setAttribute("class", className);
}
var circle = document.querySelector(".slide-mask span:nth-child(" + nowIndex + ")");
circle.classList.add("choose");
}
}
container.setAttribute("left", left);
var s = "transform:translateX(" + (parseInt(left)) + "px);";
container.setAttribute("style", s);
})
//右键
rightBtn.addEventListener("click", function() {
var left = container.getAttribute("left");
if (left == null) {
left = 0;
container.setAttribute("left", "0");
}
if (nowIndex > 1 && nowIndex <= len) {
left = parseInt(left) + 800;
if (nowIndex != 1) {
nowIndex--;
}
for (var j = 0; j < len; j++) {
var className = circles[j].getAttribute("class");
className = className.replace("choose", "");
circles[j].setAttribute("class", className);
}
var circle = document.querySelector(".slide-mask span:nth-child(" + nowIndex + ")");
circle.classList.add("choose");
}
container.setAttribute("left", left);
var s = "transform:translateX(" + (parseInt(left)) + "px);";
container.setAttribute("style", s);
})
//圆点点击事件
mask.addEventListener("click", function(ev) {
var ev = ev;
var target = ev.target;
var index = target.getAttribute("data-index");
var s = "transform:translateX(" + (parseInt(index) * -800 + 800) + "px);";
container.setAttribute("style", s);
nowIndex = index;
container.setAttribute("left", (parseInt(index) * -800 + 800));
for (var j = 0; j < len; j++) {
var className = circles[j].getAttribute("class");
className = className.replace("choose", "");
circles[j].setAttribute("class", className);
}
var circle = document.querySelector(".slide-mask span:nth-child(" + nowIndex + ")");
circle.classList.add("choose");
})
setInterval(function() {
var t = parseInt(Math.random() * 2);
if (t == 0) {
rightBtn.click();
} else {
leftBtn.click();
}
}, 3000);
}
3、css代码：
.slide{
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
800px;
height: 400px;
margin: 0 auto;
overflow: hidden;
}
.slide-nav{
800px;
height: 400px;
margin: 0 auto;
position: relative;
top: 0;
left: 0;
}
.slide-nav .slide-container {
height: 400px;
white-space: nowrap;
font-size: 0;
transition: linear 0.4s all;
}
.slide-nav .slide-container .img{
800px;
height: 400px;
display: inline-block;
overflow: hidden;
}
.slide-nav .slide-container .img img {
800px;
}
.slide-mask {
position: absolute;
bottom: -40px;
left: 0;
z-index: 100;
800px;
height: 40px;
text-align: center;
}
.slide:hover .slide-mask {
transform: translateY(-40px);
transition: linear 0.3s all;
}
.slide-mask span{
display: inline-block;
20px;
height: 20px;
margin: 10px 10px 0 0;
border-radius: 10px;
background-color: #BD2D30;
cursor: pointer;
}
.slide-mask .choose{
background-color: white;
}
.left-btn {
position: absolute;
z-index: 120;
60px;
height: 400px;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
float: left;
transform: translateX(-100%);
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
background: linear-gradient(left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
}
.right-btn {
position: absolute;
z-index: 120;
60px;
height: 400px;
transform: translateX(100%);
background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
background: linear-gradient(right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
top: 0;
right: 0;
}
.btn {
line-height: 400px;
text-align: center;
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
}
.slide:hover .left-btn {
transform: translateX(0);
transition: linear 0.4s all;
}
.slide:hover .right-btn {
transform: translateX(0);
transition: linear 0.4s all;
}