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就是多少,然后就是我的图片的索引值。