<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
.container{
width: 500px;
height: 300px;
margin:0 auto;
position: relative;
}
img{
display: block;
width:500px;
height: 300px;
position: absolute;
}
button{
display: block;
width: 50px;
height: 100px;
position: absolute;
top:100px;
}
button:nth-of-type(2){
right: 0;
}
.show{
display: block;
}
.dispear{
display: none;
}
.li-cotainer{
width: 130px;
position: absolute;
bottom: 0;
left:100px;
font-size: 0;
}
.li-cotainer>li{
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #FFFFFF;
border-radius: 50%;
margin: 10px ;
}
.ls{
background: #ffffff;
border: 1px solid #FFFFFF;
}
</style>
<body>
<div class="container">
<img class="show"src="img/1.jpg" >
<img src="img/2.jpg" >
<img src="img/3.jpg" >
<img src="img/4.JPG" >
<button><</button>
<button >></button>
<div class="li-cotainer">
<li class="ls"></li>
<li></li>
<li></li>
<li></li>
</div>
</div>
<script type="text/javascript">
// 事件源获取
var btn=document.getElementsByClassName("container")[0].getElementsByTagName("button");
var imgArr=document.getElementsByClassName("container")[0].getElementsByTagName("img");
var liArr=document.getElementsByClassName("container")[0].getElementsByTagName("li");
// 定义全局变量i,可以说是个计数器记录当前显示图片在图片数组中的下标
var i=0;
// 右滑动执行及圆点按钮独立事件关联
btn[1].onclick=function(){
for(var c=0;c<imgArr.length;c++){
if(imgArr[c].className=="show"){
i=c;
}
}
right();
}
// btn[1].onclick=right;
// 左滑动执行及圆点按钮独立事件关联
btn[0].onclick=function(){
for(var c=0;c<imgArr.length;c++){
if(imgArr[c].className=="show"){
i=c;
}
}
left();
}
// btn[0].onclick=left;
// 圆点图片关联执行
for(var j=0;j<liArr.length;j++){
liArr[j].index=j;
liArr[j].onmouseover=lim;
}
// 右滑动方法
function right(){
// console.log(i)
i=i+1;
console.log(i)
for(var j=0;j<imgArr.length;j++){
imgArr[j].className="dispear";
liArr[j].className="";
}
if(i>3){
i=0;
}
imgArr[i].className="show";
liArr[i].className="ls"
}
// 左滑动方法
function left(){
i=i-1;
for(var j=0;j<imgArr.length;j++){
imgArr[j].className="dispear";
liArr[j].className="";
}
if(i<0){
i=3;
}
imgArr[i].className="show";
liArr[i].className="ls"
}
// 圆点图片关联方法
function lim(){
for(var k=0;k<imgArr.length;k++){
imgArr[k].className="dispear";
liArr[k].className="";
}
imgArr[this.index].className="show";
liArr[this.index].className="ls";
//i=this.index;
}
// 图片滑动定时器设置及执行
inter1=setInterval(right,3000);
for(var t=0;t<imgArr.length;t++){
document.getElementsByClassName("container")[0].onmouseover=function(){
clearInterval(inter1);
}
document.getElementsByClassName("container")[0].onmouseout=function(){
inter1=setInterval(right,3000);
}
}
</script>
</body>
</html>
4291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
