html课题研究学习日记#37

编写手机端网页页面

1：首页banner图，选中和鼠标悬停颜色会改变，并控制banner一直在屏幕上方

实现css样式：

.top-navbar .navbar{

         padding: 15px 0px;

         position: fixed;

         width: 100%;

         transition: height .3s ease-out, background .3s ease-out, box-shadow .3s ease-out;

         -webkit-transform: translate3d(0, 0, 0);

         transform: translate3d(0, 0, 0);

         z-index: 100;

}

.top-navbar .navbar-light .navbar-nav .nav-link{

         color: #010101;

         font-size: 18px;

         padding: 0px 20px;

         border-radius: 4px;

}

.top-navbar .navbar-light .navbar-nav .nav-item .nav-link:hover{

         background: #d0a772;

         color: #ffffff;

}

2：Js实现图片轮播效果

window.οnlοad=function(){

var items=document.getElementsByClassName("item");

var circles=document.getElementsByClassName("circle");

var leftBtn=document.getElementById("btn-left");

var rightBtn=document.getElementById("btn-right");

var content=document.querySelector('.content');

var index=0;

var timer=null;

var clearclass=function(){

 for(let i=0;i<items.length;i++){

  items[i].className="item";

  circles[i].className="circle";

  circles[i].setAttribute("num",i);

 }

}

function move(){

 clearclass();

 items[index].className="item active";

 circles[index].className="circle white";

}

rightBtn.οnclick=function(){

 if(index<items.length-1){

  index++;

 }

 else{

  index=0;

 }

 move();

}

leftBtn.οnclick=function(){

 if(index<items.length){

  index--;

 }

 else{

  index=items.length-1;

 }

 move();

}

timer=setInterval(function(){

 rightBtn.onclick();

},1500)

for(var i=0;i<circles.length;i++){

 circles[i].addEventListener("click",function(){

  var point_index=this.getAttribute("num");

  index=point_index;

  move();

 })

}

content.οnmοuseοver=function(){

 clearInterval(timer);

 

  timer=setInterval(function(){

   rightBtn.onclick();

  },3000)

}

content.οnmοuseleave=function(){

 clearInterval(timer);

 timer=setInterval(function(){

  rightBtn.onclick();

 },1500)

}

}

本日学习时间三小时