前端知识学习
原生JS无缝轮播图（左右切换、导航图标）
功能：
1、实现轮播图的左右无缝切换
2、实现导航图标的跟随显示、点击切换
3、使用定时器进行无缝轮播
css部分
<style>
/* 轮播图容器 */
#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
}
html结构部分
<body>
<div id="carousel">
<!-- 轮播内容 -->
<div id="list" style="left: -800px">
<img src="./images/img5.jpg" alt="">
<img src="./images/img1.jpg" alt="">
<img src="./images/img2.jpg" alt="">
<img src="./images/img3.jpg" alt="">
<img src="./images/img4.jpg" alt="">
<img src="./images/img5.jpg" alt="">
<img src="./images/img1.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>
</body>
js部分
<script >
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 = -800+'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(){
clearInterval(time)
}
// 鼠标移出开启定时器
carousel.onmouseout=function(){
play()
}
}
</script>
