轮播图
kying-star的博客
# 轮播图
照样，直接上代码
banner.js
window.onload=function(){
var carousel=document.getElementById('carousel');
var next=document.getElementById('next');
var prev=document.getElementById('prev');
var list=document.getElementById('list');
var span=document.getElementById('slider_nav').getElementsByTagName('span');//获取span
var spanIndex=1;//定义导航图标的下标
var time;//定时器
// 下一步
next.onmousedown=function(){
// 到达最后一张时跳回第一张
if(parseInt(list.style.left)<= -4000){
list.style.left = 0+'px'
list.style.transition=''
}
next.onmouseup=function() {
list.style.left = parseInt(list.style.left)+ -800 +'px'
list.style.transition='1000ms'
// 轮播图导航按钮跟随部分
if(spanIndex < 5){
spanIndex++
}else{
spanIndex=1
}
for(var i = 0; i < span.length; i++){
span[i].className=''
span[spanIndex-1].className='active'
}
}
}
// 上一步
prev.onmousedown=function(){
// 到达第一张时跳最后一张
if(parseInt(list.style.left)> -800){
list.style.left = -4000+'px'
list.style.transition=''
}
prev.onmouseup=function(){
list.style.left = parseInt(list.style.left)+ 800 +'px'
list.style.transition='1000ms'
// 轮播图导航按钮跟随部分
if(spanIndex > 1){
spanIndex--
}else{
spanIndex=5
}
for(var i = 0; i < span.length; i++){
span[i].className=''
span[spanIndex-1].className='active'
}
}
}
// 轮播图导航按钮点击
for(var i = 0; i < span.length; i++){
span[i].index=i+1
span[i].onclick=function(){
for(var i = 0; i < span.length; i++){
span[i].className=''
this.className='active'
}
list.style.left = -800*this.index+'px' //点击导航按钮时跳到指定图片
spanIndex=this.index//重新指定span的下标为当前所点击元素的下标
}
}
// 实现轮播图自动播放
function play(){
time=setInterval(function(){
if( parseInt(list.style.left)> -4800){
list.style.left = parseInt(list.style.left)+ -800 +'px'
list.style.transition='1000ms'
// 轮播图导航按钮跟随部分
if(spanIndex < 5){
spanIndex++
}else{
spanIndex=1
};
for(var i = 0; i < span.length; i++){
span[i].className=''
span[spanIndex-1].className='active'
};
}else if(parseInt(list.style.left)< -4000){
list.style.left = -800 +'px'
list.style.transition=''
}
},3000)
}
// 鼠标移入停止，移出播放
play();//初始为自动播放
// 鼠标移入清除定时器
carousel.onmousemove=function(){
console.log('自动轮播停止');
clearInterval(time)
}
// 鼠标移出开启定时器
carousel.onmouseout=function(){
play();
}
}
banner.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="banner.css">
</head>
<body>
<div id="carousel">
<!-- 轮播内容 -->
<div id="list" style="left: -800px">
<img src="./images/5.jpg" alt="">
<img src="./images/1.jpg" alt="">
<img src="./images/2.jpg" alt="">
<img src="./images/3.jpg" alt="">
<img src="./images/4.jpg" alt="">
<img src="./images/5.jpg" alt="">
</div>
<!-- 导航按钮 -->
<div id="slider_nav">
<span class='active'></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- 下一张、上一张切换 -->
<span id="prev"></span>
<span id="next"></span>
</div>
<script src="banner.js">
</script>
</body>
</html>
banner.css
/* 轮播图容器 */
#carousel{
width: 800px;
height: 400px;
border: 2px solid brown;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
overflow: hidden;
}
/* 轮播图图片内容 */
#list{
height: 400px;
width: 9999px;
position: relative;
}
#list > img{
width:800px;
height: 100%;
display: block;
float: left;
}
/* 轮播图导航按钮 */
#slider_nav{
width: 100%;
position: absolute;
bottom: 30px;
display: flex;
justify-content: center;
}
#slider_nav > span {
width: 40px;
height: 4px;
display: block;
margin: 0 4px 0 4px;
float: left;
background-color: rgba(0,0,0,0.4);
cursor: pointer;
}
/* 导航按钮活动样式*/
#slider_nav .active{
background-color: orangered;
}
/* 下一张、上一张按钮 */
#prev,#next{
width: 40px;
height: 40px;
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
#prev{
left: 20px;
background-image: url(./iconImg/next.png);
background-size: 40px
}
#next{
right: 20px;
background-image: url(./iconImg/prev.png);
background-size: 40px
}