发表于: 2017-03-12 21:14:53

1 655


今天完成的事:1)学习网上的js轮播图写法。这是实现效果比较好的一个。分别获取图片页码,用opacity设置淡入淡出,写进函数分别调用。再设置定时器,在鼠标没有关注的时候自动轮播,鼠标移上去停止。获取左右两边的箭头元素,绑定函数控制图片淡入淡出。

function slideshow() {
   var slideshow=document.getElementById("slideshow"),
       imgs=slideshow.getElementsByTagName("img"), //得到图片们
       pages=slideshow.getElementsByTagName("span"), //得到页码们
       buttons=slideshow.getElementsByTagName("p"), //得到描述们
       left_btn=buttons[0],
       right_btn=buttons[1],
       current=0; //current为当前活跃的图片编号

   function slideOff() {
       imgs[current].className=""; //图片淡出
       pages[current].className="";
   }
   function slideOn() {
       imgs[current].className="active"; //图片淡入
       pages[current].className="active";
   }

   function changeSlide() { //切换图片的函数
       slideOff();
       current++; //自增1
       if(current>=3) current=0;
       slideOn();
   }

   //2s调用changeSlide函数进行图片轮播
   var slideon=setInterval(changeSlide,2000);

   slideshow.onmouseover=function () {
       clearInterval(slideon); //当鼠标移入时清除轮播事件
   }
   slideshow.onmouseout=function () {
       slideon=setInterval(changeSlide,2000); //当鼠标移出时重新开始轮播事件
   }

   for(var i=0; i<pages.length; i++) { //定义鼠标移入和移出页码事件
       pages[i].onmouseover=function(){
           slideOff(); //图片淡出
           current=this.getAttribute("name"); //得到鼠标停留的页码对应的current
           slideOn(); //图片淡出
       }
   }

   left_btn.onclick=function () {
       slideOff(); //图片淡出
       current--;
       if(current<0) current=2;
       slideOn(); //图片淡出
   }
   right_btn.onclick=function () {
       slideOff(); //图片淡出
       current++;
       if(current>2) current=0;
       slideOn(); //图片淡出
   }
}

slideshow();

2)修改了导航栏a标签高度不够的问题。

3)修改了公司列表小圆点不变色。



明天要做的事:1)开始写js任务一。

遇到的问题:1)Q:导航栏只有文字有点击效果,所在小方块不能点击。

A:给a标签设置inline-block,用padding撑开高度。


收获:注意给logo之类的地方都添加链接。

flex会造成边框重叠的问题,改用inline-block排也可以。

图片与文字混搭的模块可以考虑float,这是float设计初衷,根据情况使用,不要一味用div百分比。

js文件引用优先级。


返回列表 返回列表
评论

    分享到