自己修改图片即可
html代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>banner</title>
<link rel="stylesheet" type="text/css" href="css/banner.css"/>
</head>
<body>
<div class="box">
<div class="banner">
<div class="container" style="left: 0;">
<div class="slider">
<img src="images/banner/banner1.png" >
</div>
<div class="slider">
<img src="images/banner/banner2.png" >
</div>
<div class="slider">
<img src="images/banner/banner3.png" >
</div>
<div class="slider">
<img src="images/banner/banner4.png" >
</div>
</div>
<div class="banner-pagination">
<ul class="flip">
<!-- <li class="active"></li>
<li></li>
<li></li> -->
</ul>
</div>
<div class="slider-next slider-lr">></div>
<div class="slider-prev slider-lr"><</div>
</div>
</div>
</body>
<script src="js/banner.js" type="text/javascript" charset="utf-8"></script>
</html>
css代码:
*{
margin: 0 auto;
padding: 0 auto;
}
a{
text-decoration: none;
color: #000000;
}
ul,li{
list-style: none;
}
.banner{
margin: 5px auto;
border-radius: 5px;
height: 200px;
width: 400px;
overflow: hidden;
position: relative;
}
.container{
position: absolute;
/* width: 1600px; */
height: 200px;
z-index: 1;
/* transition: left 0.2s; */
/* left: -600px; */
}
.slider{
width: 400px;
height: 200px;
border-radius: 5px;
float: left;
}
.slider img{
width: 100%;
height: 100%;
border-radius: 5px;
}
.banner-pagination{
position: absolute;
z-index: 2;
bottom: 5px;
color: #fff;
left: 50%;
/* width: 40%; */
text-align: center;
transform: translate(-50%);
/* bottom: 10px; */
}
.banner-pagination li{
float: left;
height: 3px;
width: 20px;
margin: 5px;
background-color: #fff;
border-radius: 1.5px;
}
li.active{
background-color: #ccc;
}
.slider-lr{
position: absolute;
z-index: 2;
width: 30px;
height: 30px;
background-color: rgba(207,207,207,.7);
text-align: center;
line-height: 27px;
vertical-align: middle;
border-radius: 5px;
color: #fff;
font-size: 18px;
font-weight: bold;
}
.slider-prev{
top: 50%;
left: 20px;
transform: translate(-50%);
}
.slider-next{
top: 50%;
transform: translate(-50%);
right: -10px;
}
js代码
var banner = document.querySelector('.banner')
var container = document.querySelector('.container')
var next = document.querySelector('.slider-next')
var prev = document.querySelector('.slider-prev')
var slider = document.querySelectorAll('.slider')
// 下方翻页按钮
var flip = document.querySelector('.flip')
var index = 0;
// 自动播放
var timer = null;
// 自动播放间隔时间
var interval = 3000
// 循环生成翻页按钮以及页面宽度
function flipGroup(){
for(let i = 0;i<slider.length;i++){
container.style.width = slider.length * slider.offsetWidth;
stripGroup = flip.appendChild(document.createElement('li'))
stripGroup.classList.add('strip')
}
}
flipGroup();
// 下一张图片
next.onclick = function(){
next_pic();
}
// 上一张图片
prev.onclick = function(){
prev_pic();
}
function next_pic(){
var newLeft = 0;
if(container.style.left ===-((slider.length-1)*slider[0].offsetWidth)+'px'){
newLeft = 0;
}else{
newLeft = parseInt(container.style.left)-400;
}
container.style.left = newLeft+'px';
index++;
if(index>slider.length-1){
index=0;
}
showCurrentArrow();
}
function prev_pic(){
var newLeft = 0;
if(container.style.left ==='0px'){
newLeft = -((slider.length-1)*slider[0].offsetWidth)+'px'
}else{
newLeft = parseInt(container.style.left)+400
}
container.style.left = newLeft+'px';
index--;
if(index<0){
index = slider.length-1
}
showCurrentArrow();
}
// 自动播放
function autoPlay(){
timer = setInterval(function(){
next_pic()
},interval)
}
autoPlay();
// 手机端不支持
// banner.onmouseenter = function(e){
// clearInterval(timer)
// console.log('停止播放'+e.target)
// }
// banner.onmouseleave = function(){
// autoPlay();
// }
// 翻页按钮
var arrow = document.querySelectorAll('.strip')
// 给第一个添加默认样式
arrow[0].classList.add('active');
console.log(arrow.length)
// 动态添加翻页按钮样式
function showCurrentArrow(){
for(let i =0;i<arrow.length;i++){
arrow[i].className = ''
}
arrow[index].className = 'active'
}
// 点击翻页按钮实现切换
function onArrow(){
for(let i=0;i<arrow.length;i++){
(function(i){
arrow[i].onclick = function(){
var point = index-i;
if(index == slider.length-1&&parseInt(container.style.left)!==-(slider.length-1)*slider[0].offsetWidth){
point -=slider.length
}
if(index ==0&&parseInt(container.style.left)!==0){
point += slider.length
}
container.style.left = (parseInt(container.style.left)+point*slider[0].offsetWidth)+'px'
index =i;
showCurrentArrow()
}
})(i)
}
}
onArrow();