html+css+js+jq简单实现原神官网动态效果

相信大家一定学过很多种计算机的编程语言，但是有很多人可能很迷茫不知道学这么多语言能做出什么效果,其他语言我可能不是很明白能做出什么,但是在前端的话,我还是知道能做出什么样的效果出来的,比如这次的原神官网

     所以,学一门语言要知道他能做出什么东西我们才可以有学下去的动力,因为我当时也是和好奇一些网站上的效果是怎么实现的,所以去实现了我当时不明白的问题，当然,这只是个起步而已，先说一下前端来做这些效果只是为了来练习语法和运用为以后的框架做基础的，只有基础牢固才能学的更好。所以原神这个小项目还是需要大量的js来实现的，是可以锻炼基础能力很不错的项目之一

    其实我很早就写出了这个项目，只是一直忙没有事件发罢了，哦不不不，好像跑题了，言归正传，先看看最终的效果吧:

前端来实现原神官网效果展示

    大家也已经看出了什么效果，然后我就先简单展示一下，比较东西比较多，只能部分展示一些：

有了基本的工程结构我们才能更清晰的写出之后的效果

     之后就是引入css和js文件是不可少的:



    之前有一段是音乐的自动播放功能，当时也是纠结很久，改了又改，现在看起来还是比较的简单

    <script>
        // 音乐按钮自动播放
       
     var mis=document.getElementById("mis")
     var isplaying=false;
        function play(){
            var mis=document.querySelector('#mis')
            if(isplaying){
                mis.pause();
                mis.src=' '
                isplaying=false
            }else{
                mis.src='音乐/video-bgm.d8637316.mp3'
                isplaying=true
                //mis.play();
            }
        }


   </script>

// 轮播图

var zuobianlunbotu=document.querySelector('.zuobianlunbotu')
var li=zuobianlunbotu.querySelector('li')
var xiaoyuandian=document.querySelector('.xiaoyuandian')
var focusWidth = li.offsetWidth;
for(var i=0 ; i < zuobianlunbotu.children.length ; i++)
{

var span =document.createElement('span');
span.setAttribute('index',i);
xiaoyuandian.appendChild(span);

span.addEventListener('click',function(){
  for(var i=0 ; i < xiaoyuandian.children.length ; i++)
  {xiaoyuandian.children[i].style.backgroundColor='rgba(0,0,0,0.1)';}
  this.style.backgroundColor='rgba(255,255,255,1)';
  var index =this.getAttribute('index');
  num=index;
  a=index;
  console.log(focusWidth)
  animate(zuobianlunbotu, -index * focusWidth)
})

}
num=0;
a=0;

var temp = this.setInterval(function(){
  animate(zuobianlunbotu, -num * focusWidth)
  num++;
  if(num==zuobianlunbotu.children.length)
  {
    num=0;
  }
  xydhs();
  a++;
  console.log(xiaoyuandian.children.length);
  
  if(a==xiaoyuandian.children.length)
  {
    a=0;
  }
  
},2000)

function xydhs(){
  for(var i=0;i<zuobianlunbotu.children.length;i++)
  {
    xiaoyuandian.children[i].style.backgroundColor='rgba(0,0,0,0.1)';
  }
  xiaoyuandian.children[a].style.backgroundColor='rgba(255,255,255,1)';
}

然后后面的就不一 一展示了，实在太多了，如果有需要源码可以私信或者联系我即可