194 lines
4.9 KiB
HTML
194 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>banner_1</title>
|
||
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3889063_w9zrujr1cf.css">
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
border: 0;
|
||
}
|
||
|
||
.banner {
|
||
width: 560px;
|
||
height: 315px;
|
||
background: rgb(190, 165, 165);
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.banner .banner_ul {
|
||
display: flex;
|
||
position: absolute;
|
||
transition: all 1s;
|
||
}
|
||
|
||
.banner_ul li {
|
||
width: 560px;
|
||
height: 315px;
|
||
}
|
||
|
||
.banner_ul li img {
|
||
width: 560px;
|
||
height: 315px;
|
||
}
|
||
|
||
.button {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 30px;
|
||
}
|
||
|
||
.button div {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 50px;
|
||
background: #00000061;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
}
|
||
.button div:last-child{
|
||
transform: rotate(-90deg);
|
||
}
|
||
.banner_dot {
|
||
position: absolute;
|
||
bottom: 5px;
|
||
left: 50%;
|
||
transform: translatey(-50%);
|
||
width: 100%;
|
||
display: flex;
|
||
}
|
||
|
||
.banner_dot i {
|
||
width: 13px;
|
||
height: 13px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
margin-left: 5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.banner_dot i:first-child {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.banner_dot .active {
|
||
background: red;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="banner">
|
||
<ul class="banner_ul" style="left: 0px">
|
||
<li><img src="https://img.alicdn.com/imgextra/i4/6000000001058/O1CN017HPzlT1Jgbr6Rvc4X_!!6000000001058-0-octopus.jpg"
|
||
alt=""></li>
|
||
<li><img src="https://img.alicdn.com/imgextra/i4/6000000003739/O1CN01ks7Fjr1dUVhwWXLWB_!!6000000003739-0-octopus.jpg"
|
||
alt=""></li>
|
||
<li><img src="https://img.alicdn.com/imgextra/i1/6000000003795/O1CN01g3s9jf1du9t00iRTU_!!6000000003795-0-octopus.jpg"
|
||
alt=""></li>
|
||
</ul>
|
||
<div class="button">
|
||
<div class="button_left iconfont icon-zhankai-copy"></div>
|
||
<div class="button_right iconfont icon-zhankai"></div>
|
||
</div>
|
||
<div class="banner_dot">
|
||
<i class="active"></i>
|
||
<i></i>
|
||
<i></i>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script>
|
||
//轮播图
|
||
//点击按钮向左移动，向右移动
|
||
//小图标跟随点击移动
|
||
|
||
var buttonLeft = $(".button_left"),
|
||
buttoRight = $(".button_right"),
|
||
buttonUl = $(".banner_ul"),
|
||
active = _(".active");
|
||
banner_dot = _(".banner_dot i")
|
||
|
||
var gtime = null;
|
||
|
||
buttonLeft.onclick = () => {
|
||
sport(560)
|
||
}
|
||
buttoRight.onclick = () => {
|
||
sport(-560)
|
||
}
|
||
|
||
banner_dot.forEach((v, i) => {
|
||
v.onclick = () => {
|
||
changeActive(i);
|
||
}
|
||
})
|
||
$(".banner").onmouseover = () => {
|
||
clearInterval(gtime)
|
||
}
|
||
$(".banner").onmouseout = () => {
|
||
auto()
|
||
}
|
||
function changeActive(i) {
|
||
banner_dot.forEach(val => {
|
||
val.classList.remove("active");
|
||
})
|
||
banner_dot[i].classList.add("active");
|
||
//console.log(i);
|
||
//sport(i * 560)
|
||
buttonUl.style.left = `${i * -560}px`
|
||
}
|
||
|
||
function sport(offset) {
|
||
|
||
var oldLeft = parseInt(buttonUl.style.left);
|
||
|
||
var newLeft = `${oldLeft + offset}px `
|
||
|
||
//console.log(parseInt(newLeft));
|
||
if (parseInt(newLeft) >= -1120 && parseInt(newLeft) <= 0) {
|
||
|
||
changeActive(parseInt(newLeft) / -560)
|
||
}
|
||
//向左最大移动到1120，向右最大-1120 >=0 || <=1260
|
||
if (parseInt(newLeft) >= -1120 && parseInt(newLeft) <= 0) {
|
||
buttonUl.style.left = newLeft;
|
||
|
||
} else {
|
||
newLeft = `${0}px`
|
||
buttonUl.style.left = newLeft;
|
||
}
|
||
changeActive(parseInt(newLeft) / -560)
|
||
|
||
}
|
||
|
||
function auto() {
|
||
gtime = setInterval(() => {
|
||
buttoRight.onclick()
|
||
}, 2500)
|
||
}
|
||
auto()
|
||
function $(className) {
|
||
return document.querySelector(className);
|
||
}
|
||
function _(className) {
|
||
return document.querySelectorAll(className);
|
||
}
|
||
</script>
|
||
|
||
</html> |