用js简单实现图片轮播

最新推荐文章于 2024-04-17 09:52:42 发布

maxiaoxin1314

最新推荐文章于 2024-04-17 09:52:42 发布

阅读量229

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/maxiaoxin1314/article/details/88354500

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
   *{
       padding: 0;
       margin: 0;
   }
   .main{
       height: 300px;
       width: 560px;
       /*border: 1px solid;*/
       margin: 100px auto;
       position: relative;
   }
   .banner-slide{
       height: 300px;
       width: 560px;
       position: absolute;
       overflow: hidden;
       display: none;
   }
   .slide1{
       /*position: absolute;*/
       background: url("img/B1.jpg");
   }
   .slide2{

       background: url("img/B2.jpg");
   }
   .slide3{
       background: url("img/B3.jpg");
   }
   .slide4{
       background: url("img/B4.jpg");
   }
   .slide-active{
       display: block;
   }

.button{
   width: 30px;
   height: 50px;
   position: absolute;
   font-size: 35px;
   text-decoration: none;
       color: red;
}
.prev{
   left: 395px;
   top: 210px;
}

.next{
right: 395px;
top: 210px;
}
.button:hover{
background-color: #333333;
opacity: 0.5;
}

.dots{
position: absolute;
right: 405px;
bottom: -22px;
text-align: right;
}
.dots span{
display: inline-block;
width: 12px;
height: 12px;
border-radius:50%;
line-height: 12px;
background: rgba(7,17,27,0.4);
/*阴影：X Y Z 模糊度颜色 */
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
margin-left: 10px;
cursor:pointer;
}
.dots span.active{
box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
background: #ffffff;
}
   </style>
</head>
<body>
   <div class="main" id="main">
       <div class="banner" id="banner">
           <a href="">
           <div class="banner-slide slide1 slide-active"></div>
       </a>
       <a href="">
           <div class="banner-slide slide2"></div>
       </a>
       <a href="">
           <div class="banner-slide slide3"></div>
       </a>
       <a href="">
           <div class="banner-slide slide4"></div>
       </a>
       </div>

   </div>
   
   <a href="javascript:void(0)" class="button prev" id="prev"><</a>
   <a href="javascript:void(0)" class="button next" id="next">></a>

<div class="dots" id="dots">
   <span class="active"></span>
   <span></span>
   <span></span>
   <span></span>
</div>
<script>
   // 封装一个代替getElementByID（）的方法
   function byId(id){
       return typeof(id)==="string"?document.getElementById(id):id;

   }
// console.log(document.getElementById("main"));
var index=0;
var timer=null;
var pics=byId("banner").getElementsByTagName("div");
var len=pics.length;
var dots=byId("dots").getElementsByTagName("span");
var prev=byId("prev");
var next=byId("next");

   // 圆点点击事件，实现轮播
   for(var j=0;j<len;j++){
       // 给所有的span添加一个id的属性，值为j，作为当前的索引
       dots[j].id=j;
       dots[j].οnclick=function(){
           // 改变index为当前span的id值
index=this.id;
// 调用函数
changImg();
// alert("hello")
       }
   }

   // // 上一张、下一张事件
next.οnclick=function(){
   index++;
   if(index>=len) index=0;
   // cosole.log(index)
   changImg();
}

prev.οnclick=function(){
   index--;
   if(index<0) index=len-1;
   changImg();
}
}

// 切换图片
function changImg(){
   for(var i=0;i<len;i++){
       pics[i].style.display="none";
       dots[i].className="";
   }
   pics[index].style.display="block";
   dots[index].className="active";
}

slideImg();
</script>
</body>
</html>

maxiaoxin1314

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用js简单实现图片轮播

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; }...
复制链接

扫一扫