京东版轮播图
来源：互联网 发布：mmd绅士动作数据 编辑：程序博客网 时间：2024/06/06 02:33
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
*{
margin:0;
padding:0;
}
#wrap{
width:300px;
height:200px;
margin:100pxauto;
border:2pxsolid gold;
position:relative;
}
img{
width:300px;
height:200px;
position:absolute;
opacity:0;
transition:all1s;
}
img:nth-child(1){
opacity:1;
}
ul{
list-style:none;
position:absolute;
top:170px;
left:87px;
}
li{
width:20px;
height:20px;
background: gray;
margin-left:3px;
border-radius:50%;
text-align: center;
line-height:20px;
float:left;
}
lia {
text-decoration:none;
color:white;
}
.li1{
background:red;
}
#lefta, #right a {
width:20px;
height:40px;
background:black;
opacity:0.5;
color:white;
text-align: center;
line-height:40px;
text-decoration:none;
position:absolute;
top:85px;
}
#righta {
right:0;
}
</style>
</head>
<body>
<div id="wrap">
<imgsrc="img/01.jpg" alt="" />
<imgsrc="img/02.jpg" alt="" />
<imgsrc="img/03.jpg" alt="" />
<imgsrc="img/04.jpg" alt="" />
<imgsrc="img/05.jpg" alt="" />
<imgsrc="img/06.jpg" alt=""/>
<ul>
<liclass="li1"><ahref="###">1</a></li>
<li><ahref="###">2</a></li>
<li><ahref="###">3</a></li>
<li><ahref="###">4</a></li>
<li><ahref="###">5</a></li>
<li><ahref="###">6</a></li>
</ul>
<div id="left"><a href="###"><</a></div>
<div id="right"><a href="###">></a></div>
</div>
<scripttype="text/javascript">
//图片数组
varimgs = document.getElementsByTagName("img");
//小球数组
varlis = document.getElementsByTagName("li");
//左按钮
varleftbtn = document.getElementById("left");
//右按钮
varrightbtn = document.getElementById("right");
//声明一个变量存储当前是第几张图片
varindex = 0;
//给左按钮绑定点击事件
leftbtn.onclick= function(){
//1.让当前的图片消失
imgs[index].style.opacity= "0";
//2.让上一张图片显示
index--;
if(index== -1){
index= 5;
}
imgs[index].style.opacity= "1";
//3.改变小球
changePoint();
}
//给右按钮绑定点击事件
rightbtn.onclick= function(){
//1.让当前的图片消失
imgs[index].style.opacity= "0";
//2.让下一张图片显示
index++;
if(index== 6){
index= 0;
}
imgs[index].style.opacity= "1";
//3.改变小球
changePoint();
}
//换小球函数
functionchangePoint(){
for(vari = 0; i < lis.length; i++){
if(index== i){
lis[i].style.background= "red";
}else{
lis[i].style.background= "gray";
}
}
}
//为小球添加鼠标移入事件
for(vari = 0; i < lis.length; i++){
lis[i].onmouseenter= (function(nowIndex){
returnfunction(){
imgs[index].style.opacity= "0";
index= nowIndex;
imgs[index].style.opacity= "1";
changePoint();
}
})(i);
}
//自动换图片函数
functionchangeImg(){
//1.让当前的图片消失
imgs[index].style.opacity= "0";
//2.让下一张图片显示
index++;
if(index== 6){
index= 0;
}
imgs[index].style.opacity= "1";
//3.改变小球
changePoint();
}
vartimer = setInterval(changeImg, 1000);
//可视区域加鼠标移入移出事件
varwrap = document.getElementById("wrap");
wrap.onmouseenter= function(){
clearInterval(timer);
}
wrap.onmouseleave= function(){
timer = setInterval(changeImg, 1000);
}
</script>
</body>
</html>
