使用html+css+js制作小米首页

使用html+css+js制作小米首页

其中

index.html是小米官网页面的基本结构

font-awesome是图标样式

base.css是公共样式

index.css是页面中元素的样式

pic_switch.js是实现切换轮播图的功能

文件夹路径结构

1.html制作小米官网页面结构（index.html）

2.使用css设置公共样式（base.css）

/* 公共样式 */
.clearfix::before,
.clearfix::after{
          
   
    content: ;
    display: table;
    clear:both;
}
/* 去除下划线 */
a{
          
   
    text-decoration:none;
}

body {
          
   
    font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    color:#333;
    /* 这个一定要加上，防止页面在放大时出现的奇怪现象 */
    min-width: 1226px ;
}
/* 设置一个类，控制网页的宽度 */
.w{
          
   
    width:1226px;
    /* 设置居中的效果 */
    margin:0 auto;
}

3.使用css设置页面元素样式（index.css）

4.使用js实现切换轮播图效果（pic_switch.js）

window.onload=function() {
          
   
    //需求：自动切换图片
    //3s间隔自动
    //按钮点击切换
    //左右箭头自动切换
    //附加题：滑轮自动切换

    //task1:点击按钮切换图片
    var imgUl=document.getElementById(img-list);
    var img1=imgUl.querySelectorAll(img#img1);
    var pointc=document.querySelectorAll(#pointc);
    console.log(pointc);
    var index=0;
    for(var i=0;i<img1.length;i++){
          
   
        pointc[i].num=i;
        pointc[i].onclick= function (){
          
    
            index=this.num;                   
            for(var i=0;i<img1.length;i++){
          
                
                if (i === index) {
          
   
                    img1[i].style.display = "block";
                    setZero();
                } 
                else {
          
   
                    img1[i].style.display = "none";
                    setZero();
                }
            }
            };
        };


    //task2:左右箭头切换图片
    var leftArrow=document.getElementById(pre-arrow);
    var rightArrow=document.getElementById(next-arrow);
    leftArrow.onclick=function(){
          
   
        //获取当前的index
        img1[index].style.display = "none";
        index--;
        if (index < 0) {
          
   
            index = 4;
        }
        img1[index].style.display = "block";
        setZero();//设置小圆点

    }


    rightArrow.onclick=function(){
          
   
        //获取当前的index
        img1[index].style.display = "none";
        index ++;
        if (index > 4) {
          
   
            index = 0;
        }
        img1[index].style.display = "block";
        setZero();//设置小圆点
    }


    //task3：3s间隔自动切换图片
    setInterval( function() {
          
   
        img1[index].style.display = "none";
        index++;
        if (index > 4) {
          
   
            index = 0;
        }
        img1[index].style.display = "block";
        setZero();
    }, 3000);

    
    //小圆点跟随图片变化
    function setZero() {
          
   
        for (let [n, a] of pointc.entries()) {
          
   
            if (n === index) {
          
   //如果是第index个小圆点，则修改这个小圆点的背景颜色为白色
                a.className = "hover";
            } else {
          
   //其他小圆点恢复默认样式
                a.className = a.className.replace("hover", "");
            }
        }
    }

    
}