js轮播图案例 JavaScript实现轮播图案例
一个学前端的小菜鸟 人气:1想了解JavaScript实现轮播图案例的相关内容吗，一个学前端的小菜鸟在本文为您仔细讲解js轮播图案例的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：js,轮播图，下面大家一起来学习吧。
运用定时器所写成的一个简单的轮播图，直接看代码，如下：
1.css代码
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
.slider-box{
width: 1226px;
height: 460px;
margin: 10px auto;
overflow: hidden;
position: relative;
}
.slider-box .images a{
width: 100%;
height: 460px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all 2s;
}
.slider-box .images a.active{
opacity: 1;
}
.slider-box .images a img{
width: 100%;
height: 100%;
display: block;
}
.slider-box .nav{
position: absolute;
left: 0;
top: 195px;
width: 100%;
/* background-color: red; */
padding: 0 10px;
/* height: 100px; */
}
.slider-box .nav a{
background-image: url(img/icons.png);
width: 41px;
height: 69px;
display: inline-block;
background-repeat: no-repeat;
}
.slider-box .nav .prev{
background-position: -84px 0;
}
.slider-box .nav .prev:hover{
background-position: 0 0;
}
.slider-box .nav .next{
background-position: -125px 0;
float: right;
}
.slider-box .nav .next:hover{
background-position: -42px 0;
}
.slider-box .pages{
position: absolute;
right: 20px;
bottom: 25px;
font-size: 0;
width: 1186px;
text-align: center;
/* background-color: rebeccapurple; */
}
.slider-box .pages .dot{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(0,0,0,0.4);
margin-right: 10px;
}
.slider-box .pages .dot:hover{
background-color: yellow;
}
.slider-box .pages .dot.active{
background-color: yellow;
}
</style>
2.html代码
<div class="slider-box">
<div class="images">
<!-- 以后哪张图片要想显示了，只需要添加一个
active类就行 -->
<a href="#" class="active">
<img src="img/1.jpg" alt="">
</a>
<a href="#" >
<img src="img/2.jpg" alt="">
</a>
<a href="#" >
<img src="img/3.jpg" alt="">
</a>
<a href="#" >
<img src="img/4.jpg" alt="">
</a>
<a href="#" >
<img src="img/5.jpg" alt="">
</a>
</div>
<div class="nav">
<a href="javascript:;" class="prev" title="前一张"></a>
<a href="javascript:;" class="next" title="下一张"></a>
</div>
<div class="pages">
<a href="javascript:;" class="dot active"></a>
<a href="javascript:;" class="dot"></a>
<a href="javascript:;" class="dot"></a>
<a href="javascript:;" class="dot"></a>
<a href="javascript:;" class="dot"></a>
</div>
</div>
3.js代码
<script>
// 定时器切换图片的功能
var images = document.querySelectorAll('.images a')
var index = 0 //定义要播放的图片的索引
var pages = document.querySelectorAll(".dot")
var prev = document.querySelector(".prev")
var next = document.querySelector(".next")
// 根据索引值切换图片
// 找到images的a标签，添加active这个类
function showImage(idx){
images.forEach(function(v,i){
// idx = 1
// i = 0 1 2 3 4
if(i===idx){
v.classList.add('active')
//控制对应点高亮
pages[i].classList.add("active")
}else{
v.classList.remove('active')
pages[i].classList.remove("active")
}
})
}
// showImage(3)
prev.onclick = function(){
if(index===0){
index = images.length - 1// 4
}else{
index = index - 1
}
showImage(index)
}
next.onclick = function(){
if(index===images.length-1){
index = 0
}else{
index+=1
}
showImage(index)
}
var timer = setInterval(function(){
// 定时器控制图片的切换和点击下一张的功能一样
// 调用下一张的点击操作
next.click()// 模拟next的点击操作
},3000)
</script>
加载全部内容