发表于: 2017-04-01 23:53:38
1 633
今天完成的事:
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的基础知识还需要更多的学习。
收获:
可以写简单的轮播,但貌似只局限与简单的轮播效果
评论