实现qq音乐轮播图

第一次工作室的大作业
把学到的flex布局,原生dom都用到了
学到了一个小技巧,实现图片加深可以用一个层设置raga颜色覆盖图片
或者使用opacity设置图片透明度,background设置为black;
实现qq音乐轮播图

预览效果
实现这样的效果也很简单

js部分
window.onload=function()//网页加载完毕后加载js
{
let left=document.getElementById("left");
let right=document.getElementById("right");
let mainimg=document.getElementById("mainimg");
let li=document.getElementsByClassName("buttonli");
let sum=mainimg.style.left;
let index=0;//当前页数,第一页为0
let color=function (judge)//pointClick颜色判断
{
    mainimg.style.left=sum+"px";
    for (let i=0;i<li.length;i++) {
        li[i].style.background = "";
        if (i==judge)//当前页数则变灰
        {
            li[i].style.background="grey";
        }
        pointClick(i);//给每个pointClick绑定响应函数
    }
}
let pointClick=function (a)
{
    li[a].onclick=function ()
    {
     sum=-1200*a;
     color(a);
    }
}
color(index);
right.onclick=function ()//下一张响应函数
{
    sum-=1200;
    index++;
    if (sum<-2400)//最后一张的下一站为第一张
    {
        sum=0;
        index=0;
    }
    color(index);//每次切换后都要更新一下底部pointClick颜色
}
left.onclick=function ()//上一张响应函数
{
    sum+=1200;
    index--;
    if (sum>0)//第一张的前一张为最后一张
    {
        sum=-2400;
        index=2;
    }
    color(index);//每次切换后都要更新一下底部pointClick颜色
}   

基本框架使用flex布局与绝对定位即可实现
主要运用的css属性

  1. opcity
  2. transform: scale(倍数);
  3. transition

bluexx

好好学习,天天向上

Responses