csss
*{
margin:0px;
padding:0px;
list-style:none;
}
.div_a{
position: relative;
margin: 100px auto;
width: 384px;
height: 240px;
overflow: hidden;
}
.div_ul{
width:384px;
height:240px;
position: absolute;
}
li{
width:384px;
height:240px;
position: absolute;
opacity: 0;
transition: opacity 1.5s ease;
}
img{
position: absolute;
width: 100%;
height:100%;
}
.show{
opacity: 1;
}
.left,.right{
width: 50px;
height: 100px;
font-size: 30px;
position: absolute;
top: 30%;
z-index: 2;
opacity: 0;
text-align: center;
line-height: 100px;
transition: opacity .5s ease;
background: rgba(0,0,0,0.3);
cursor: pointer;
}
.left{
left: 0;
}
.left:hover{
opacity: .5;
}
.right{
right: 0;
}
.right:hover{
opacity: .5;
}
.dian{
position: absolute;
z-index: 2;
bottom: 20px;
width: 100%;
height: 16px;
overflow: hidden;
zoom: 1;
text-align: center;
}
.dian>span{
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
border: 1px solid orangered;
margin-right: 10px;
font-size: 8px;
cursor: pointer;
}
.on{
background: orange;
}
结构
<div class="div_a">
<div class="dian">
<span class="on">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<ul class="div_ul">
<li class="show"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="right">＞</div>
<div class="left">＜ </div>
</div>
js
function play(){
timer = setInterval(fun,3000);
}
play()
var num = 0;
all_li = document.querySelectorAll(".div_ul>li")
function fun(){
num++;
if(num>all_li.length-1){
num=0
}
for(var i=0;i<all_li.length;i++){
all_li[i].className="";
}
all_li[num].className = "show"
clear_dian(num)
}
function zuo(){
num--;
if(num<0){
num=all_li.length-1
}
for(var i=0;i<all_li.length;i++){
all_li[i].className="";
}
all_li[num].className = "show"
clear_dian(num)
}
//鼠标移入div,清除定时器,左右两边箭头显示
left = document.querySelector(".left")
right = document.querySelector(".right")
div_a = document.querySelector(".div_a");
div_a.onmouseenter = function(){
left.style.opacity = 1
right.style.opacity = 1
clearInterval(timer)
}
div_a.onmouseleave = function(){
play()
left.style.opacity = 0
right.style.opacity = 0
}
//点击左右箭头切换
left.onclick=function(){
zuo()
}
right.onclick=function(){
fun()
}
//点击圆点的时候切换
all_dian = document.querySelectorAll(".dian>span");
for(var i=0;i<all_dian.length;i++){
all_dian[i].index = i;
all_dian[i].onclick = function(){
clear_dian(this.index)
visible(this.index)
}
}
//清除所有圆点的样式
function clear_dian(num){
for(var x = 0;x<all_dian.length;x++){
all_dian[x].className = ""
}
all_dian[num].className = "on"
}
//点击那个就让那个显示
function visible(index){
num = index;
for(var i=0;i<all_li.length;i++){
all_li[i].className="";
}
all_li[index].className = "show"
}
// img = document.querySelectorAll("img")
// img[0].addEventListener("onclick",function(){
// console.log(1)
// },true)
