淡入淡出轮播图
主要用的是HTML+CSS+JS,小白上路,不好的地方请多多指出。
主要实现的功能有淡入淡出自动切换,点击小圆点切换图片,点击左右箭头切换图片。
- HTML代码
<div class="viewPager">
<div class="content">
<div id="ck">
<a href="#" id= "img1" class="show"><img src="img/index_banner1.png" alt=""></a>
<a href="#" id= "img2"><img src="img/2.jpg" alt="" ></a>
<a href="#" id= "img3"><img src="img/3.jpg" alt="" ></a>
<a href="#" id= "img4"><img src="img/4.jpg" alt="" ></a>
</div>
<ul id = "list">
<li id="li1" class="show" onclick="lick(this)"></li>
<li id="li2" onclick="lick(this)"></li>
<li id="li3" onclick="lick(this)"></li>
<li id="li4" onclick="lick(this)"></li>
</ul>
<a href="#" class="left " onclick="leftClick(this)" ><</a>
<a href="#" class="right" onclick="rightClick(this)">></a>
</div>
</div>
- CSS代码
a{
text-decoration: none;
}
.viewPager{
height: 400px;
/*border: 1px solid #000;*/
/*box-sizing: border-box;*/
background-color: #f5f5f5;
}
.viewPager .content{
position: relative;
width: 1000px;
height: 400px;
margin: 0 auto;
border: 1px solid #808080;
box-sizing: border-box;
}
.viewPager .content #ck{
width:100%;
height:100%;
position:relative;/*相对定位,子元素的位置偏移参考物*/
}
.viewPager .content #ck>a{
width:100%;
height:100%;
position:absolute;/*绝对定位,元素堆叠*/
left:0;
top:0;
opacity:0;/*图片初始都透明*/
transition:all 2s linear;
background-color: #f5f5f5;
}
.viewPager .content #ck>a.show{
z-index:1;
opacity:1;
}
.viewPager .content #ck a img{
height: 380px;
width: 980px;
position: absolute;
top: 10px;
right: 10px;
}
.left,
.right{
position: absolute;
border: 1px solid #808080;
box-sizing: border-box;
width: 35px;
font-size: 30px;
line-height: 65px;
top: 170px;
border-radius: 5px;
background-color:#808080 ;
opacity: 0.2;
font-weight: bold;
text-align: center;
z-index: 2; //保证显示在最上层
}
.left{
color: white;
left: 10px;
}
.right{
color: white;
right: 10px;
}
.left:hover{
color: white;
opacity: 0.6;
}
.right:hover{
color: white;
opacity: 0.6;
}
#list{
width: 300px;
height: 20px;
position: absolute;
bottom: 30px;
right: 350px ;
z-index: 2;
}
#list>li{
list-style: none;
/*border: 1px solid #000;*/
/*box-sizing: border-box;*/
float: left;
margin-left: 44px;
height: 20px;
width: 20px;
border-radius: 10px;
opacity: 0.5;
background-color: deepskyblue;
}
#list>li.show{
opacity: 1;
}
- JS代码
function qh(){
//js实现图片淡入淡出切换,只需要将class=show向下传递
//通过选择器查找,class=show的图片
let imgshow = document.querySelector("#ck>a.show");
let lishow = document.querySelector("#list>li.show");
//判断正在显示的图片是否为最后一张
if (imgshow.nextElementSibling){//不是最后一张
//将class=show向下传递
imgshow.nextElementSibling.className = "show";
lishow.nextElementSibling.className = "show";
}else{//是最后一张 class=show传给第一张图
document.getElementById("ck").firstElementChild.className = "show";
document.getElementById("list").firstElementChild.className = "show";
}
//将原来显示图片class=show移除
imgshow.className = "";
lishow.className = "";
}
var time=setInterval(qh,5000); //设置定时器自动播放
window.addEventListener('load',function () {
var left = document.querySelector(".left");
var right = document.querySelector(".right");
var content = document.querySelector(".content");
//设置左右箭头,当鼠标放上去,显示左右箭头,鼠标移开左右箭头消失
content.addEventListener("mouseenter",function () {
left.style.display = 'block';
right.style.display = 'block';
});
content.addEventListener("mouseleave",function () {
left.style.display = 'none';
right.style.display = 'none';
});
});
//定义函数,点击圆点切换图片
function lick(obj){
//清除定时器
clearInterval(time);
//前端js调试常用方法 控制台输出 console.log()
var id = obj.id.slice(2); //得到小圆点id的数字,li2 -> 2
document.querySelector("#list>li.show").className = "";
document.querySelector("#ck>a.show").className = "";
obj.className = "show";
document.getElementById("img"+id).className = "show";
//恢复定时器
time = setInterval(qh,5000);
}
function leftClick(obj) {
//清除定时器
clearInterval(time);
var ul = document.querySelector("#list");
let imgshow = document.querySelector("#ck>a.show");
var id = imgshow.id.slice(3);
document.querySelector("#list>li.show").className = "";
document.querySelector("#ck>a.show").className = "";
if(id == 1){
id = ul.children.length;
}
else {
id--;
}
document.getElementById("li"+id).className = "show";
document.getElementById("img"+id).className = "show";
//恢复定时器
time = setInterval(qh,5000);
}
function rightClick(obj) {
//清除定时器
clearInterval(time);
var ul = document.querySelector("#list");
let imgshow = document.querySelector("#ck>a.show");
var id = imgshow.id.slice(3);
document.querySelector("#list>li.show").className = "";
document.querySelector("#ck>a.show").className = "";
if(id == ul.children.length){
id = 1;
}
else {
id++;
}
document.getElementById("li"+id).className = "show";
document.getElementById("img"+id).className = "show";
//恢复定时器
time = setInterval(qh,5000);
}