发表于: 2017-04-01 23:53:38

1 632


今天完成的事:

a,css15的填坑;

主要轮播图部分

查了些资料,我主要理解为:

利用绝对定位扎起一个DIV内将4张图片叠加一张图片后面;

在给于一个一张图片的高度;

给于一个变量的index函数 赋值为0 

给函数对象做一个判断,如果变量小与4时,变量index赋值依次+1;

利用js函数控制如果大于4时返回第一张图片;

利用JQ eq的属性缩减到指定index上使其show(显示);

在用siblings属性获取同胞元素使其Hide;

给函数设置一个计时器,

以下为JQ部分原代码

var pic_index=0;

//函数控制如果为大于4返回第一个

function slide_pic()

{

    if(pic_index<4){pic_index = pic_index + 1}

    else{pic_index=0}

}

//函数申明主体,以及图片切换函数

slide_pic.prototype = {

   pic_num : '5',

   pic_slide : function() {

       $(".banner ul li").eq(pic_index).show().siblings("li").hide()

   }

}

//实例化函数。以及调用函数

function slide()

{

   var obj = new slide_pic();

   obj.pic_slide(pic_index);

}

//函数计时器

var slide_index = setInterval(slide,3000);

</script>

b,JS的相关学习

明天计划的事:

a,提交任务15;

b,继续JS的学习

c,JS任务4的继续编写

遇到的问题:

轮播还是相当的难写,自己对于js的基础知识还需要更多的学习。

收获:

可以写简单的轮播,但貌似只局限与简单的轮播效果




返回列表 返回列表
评论

    分享到