轮播图js实现

最新推荐文章于 2022-06-06 23:38:57 发布

weixin_42568821

最新推荐文章于 2022-06-06 23:38:57 发布

阅读量95

点赞数 1

分类专栏：渣渣练习文章标签： js练习

本文链接：https://blog.csdn.net/weixin_42568821/article/details/93034757

版权

渣渣练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>华为</title>
   <link rel="stylesheet" href="index.css">
   <script src="index.js"></script>
</head>
<body>
   <div class="main">
       
       <div class="banner" id="banner">
           <a href="#">
               <div class="banner-slide slide1 " id="slide1"></div>
           </a>
           <a href="#">
               <div class="banner-slide slide2" id="slide2"></div>
           </a>
           <a href="#">
               <div class="banner-slide slide3" id="slide3"></div>
           </a>
       </div>

<div class="button prev" id="button-prev"><img src="./img/jiantouyou.png" alt="" class="button-img"></div>
       <div class="button next" id="button-next"><img src="./img/jiantouyou.png" alt="" class="button-img"></div>

<div class="button2" id="button2">
           <span></span>
           <span></span>
           <span></span>
       </div>

<ul class="meua">
           <li>
               <div class="meua-head"><a href="">手机</a></div>
           <a href="">荣耀</a>
           <a href="">HUAWEI P系列</a>
           <ul class="meua-second">
                   <li><a href="#"><img src="img/手机1.png" alt=""><span>荣耀</span></a></li>
                   <li><a href="#"><img src="img/手机1.png" alt=""><span>荣耀</span></a></li>
                   <li><a href="#"><img src="img/手机1.png" alt=""><span>荣耀</span></a></li>
       </ul>
       </li>
           <li>
               <div class="meua-head"><a href="">笔记本 & 平板</a></div>
           <a href="">平板电脑</a>
           <a href="">笔记本电脑</a>
           </li>
           <li>
               <div class="meua-head"><a href="">智能穿戴</a></div>
           <a href="">手环</a>
           <a href="">手表</a>
           <a href="">VR</a>
           </li>
           <li>
               <div class="meua-head"><a href="">智能家居</a></div>
           <a href="">路由器</a>
           <a href="">电视盒子</a>
           <a href="">照明</a>
           </li>
           <li>
               <div class="meua-head"><a href="">热销配件</a></div>
           <a href="">保护壳</a>
           <a href="">移动电源</a>
           <a href="">耳机</a>
           </li>
           <li>
               <div class="meua-head"><a href="">增值服务 & 其他</a></div>
           <a href="">服务器</a>
           <a href="">AI计算平台</a>
           </li>
       </ul>

</div>
</body>
</html>

css代码

*{
margin: 0;
padding: 0;

}
body{
font-family: "微软雅黑";
width: 1349px;

}
ul{
   list-style: none;
}
a{
   text-decoration:none;
   color: #a6a6a6;
   font-size: 14px;
}

.main{
   width: 100%;
   height: 550px;
   margin: 0px auto;
   position: relative;
}
/* 焦点图 */
.banner{
   width: 100%;
   height: 550px;
   overflow: hidden;
}
.banner-slide{
   width: 100%;
   height: 550px;
   background-repeat: no-repeat;
   background-position: center;
   display: none;

}

.slide1{
   background-image: url('./img/1.jpg');
   display: block;
}
.slide2{
   background-image: url('./img/2.jpg');
}
.slide3{
   background-image: url('./img/3.jpg');
}

/* 下一页按钮 */
.button{
   position: absolute;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background-color: rgba(2, 14, 10, 0.1);
   top: 275px;
   margin-top: -30px;
   right: 1003px;
   text-align: center;
   line-height: 65px;
}
.prev{
   transform:rotate(180deg);
   margin-bottom: -30px;

}
.next{
   right: 75px;
}
.button-img{
   width: 20px;
   height: 20px;
}
.button:hover{
   background-color: rgba(2, 14, 10, 0.5);
}

/* 下标图 */
.button2{
   position: absolute;
   bottom: 70px;
   right: 80px;

}
.button2 span{
   display: inline-block;
   margin-left: 5px;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   border: 1px solid #fff;

}
.button2 :nth-child(1){
background-color: #fff;
}

/* 菜单一级 */
.meua{
   position: absolute;
   top: 18px;
   left: 77px;
   background-color:rgb(255,255,255,0.95);
   border-radius: 10px;
   width: 197px;
   height: 443px;
}
.meua li{
   margin:0 20px;
   height: 48px;
   padding: 13px 0 12px 0;
   border-bottom: 1px solid rgba(0,0,0,0.06);
}
.meua > li:nth-child(6){
   border-bottom: 0px;

}
.meua-head{
   margin-bottom: 2px;
}
.meua-head >a{
   font-size: 16px ;
   color: #848484;
}
.meua a{
   display: inline-block;
   padding-right: 5px;
}

/* 二级菜单 */
.meua-second{
   position: absolute;
   width: 200px;
   height: 443px;
   background-color: #fff;
   border-radius: 0 10px 10px 0;
   left:197px;
   top: 0px;
   display: none;


}
.meua-second li{
   height: 70px;
   width: 160px;
   margin: 20px;

}
.meua-second img{
   width: 56px;
   height: 56px;
   float: left;

}
/* 点击变化 */
.meua >li:nth-child(1):hover .meua-second{
display: block;

}

js代码

window.onload =function(){

var index = 0, //当前图片的索引
button_next = byId("button-next"),
button_prev = byId("button-prev"),
pics = byId("banner").getElementsByTagName("div"),//这里是个数组
size = pics.length,
spans = byId("button2").getElementsByTagName("span");

//封装getElementById()
function byId(id){
return typeof(id) === "string" ? document.getElementById(id):id;
}

//封装通用事件绑定方法
function addHandler(element,type,handler){
   if(element.addEventListener){
       element.addEventListener(type, handler, false);
   }
   else if(element.attachEvent){
       element.attachEvent("on"+type,handler);
   }
   else{
       element["on" + type] = handler;
   }
}
//图片变化
var qie = function(index){
   for(var i = 0;i<size;i++){
       pics[i].style.display = "none";
       spans[i].style.backgroundColor = 'transparent' ;
   }
   pics[index].style.display = 'block';
   spans[index].style.backgroundColor = '#fff';
}
//点击下一张显示下一张图片,以及下标小圆点的变化
addHandler(button_next,"click",function(){
   index++;
   if(index>=size) index = 0;
   qie(index);

});

//点击prev按钮显示上一张图片,以及下标小圆点的变化
addHandler(button_prev,"click",function(){
   index--;
   if(index<0)index = size-1;
   qie(index);
});

//鼠标滑动到小圆点图片就会变化

for(var j = 0;j<size;j++){
   spans[j].setAttribute("id", j);
   addHandler(spans[j],"mouseover",function(){
       switch (this.id) {
           case "0":
           qie(0);
               break;
           case "1":
           qie(1);
               break;
           case "2":
           qie(2);
               break;
       }
   })
}

}

----------------------------------------------------------------------------------------------------------------

总结：

这可以算是第一个js代码练习了。看了很多遍知识点，不如动手敲几遍代码。

没有教学视频的帮助下我可能想不到要怎么利用dom那些操作

我是先写下一页功能按钮，然后再写上一页功能按钮，再写下标点随着图片变化的功能，最后再写鼠标移到下标小圆点就会发生图片变化的功能。

再写按钮跳转背景图的思路大概是：

因为我的背景图是直接放在div的ccs background-image中，所以每按一下个的案件，下一个的display就要显示出来，其他的设置为不显示。

问题：怎么去设计每按一下按钮，我的会按顺序显示下一个呢？

A：先设置一个图片索引（index）变量，每按一次next按键，我的index就加一。如果我的索引大于图片数就变为第一张图的索引值。

Q：怎么知道我有多少张图片？

A：由于图片都是在div中的，所以可以获取div元素的来知道我们的图片数。获取getElementByTagName。.length来知道有多少图。

Q：然后呢？

A：现在可以操控我们每一个图片了。由于我们已经获取到我们的div了。

先把所有的图片都显示为none，然后当按下一个是，就可以通过div数组【index】.display去控制block

相同的方法去写上一页和点的变化。

（中间有练到这些属性的应用，函数的封装，以及跨浏览器的封装函数，虽然现在应该没什么人会用ie8以下的。学到最重要的是一个设计思路的流程，这是最难想到的。）

（哪些东西是变化的，这个功能会通过什么在变化。）

第一个第二个功能算是完成，接着就开始第三个功能：鼠标移到小圆点上，小圆点就会变化图片。

A：同样的方法为每个小圆点添加事件。这里就不说了。遇到最大的问题就是作用域的问题和this的运用。一个是问题的关键。解决办法就是给每一个小圆点添加一个id，然后在事件function中去判断我【当前点（this）的运用】的这个小圆点的id就是多少，然后就是我的图片的索引值。

weixin_42568821

关注

1
点赞
踩
1

收藏

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

html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>华为</title> <link rel="stylesheet" href="index.css"> <scrip...
复制链接

扫一扫