今天提交了第一个项目,但是项目有点小问题,js轮播图不太会,但在帮助下做出来了 还行
项目主要使用HTML ,CSS 小部分使用JS等其他技术
HTML 主要构造页面实现整体效果
CSS主要辅助HTML 美化页面效果
JS等其他技术用来实现一些其他的样式
这个项目中还学习了精灵图的用法,可以减少页面加载时间
轮播图:
function changeimg(){
document.getElementById("pic").src="img/images/"+"ad-0"+count+".jpg";
var lis=document.getElementsByClassName("lbt");
for (var i=0;i<lis.length;i++) {
if (count==(i+1)) {
lis[i].style.backgroundColor="green";
}else{
lis[i].style.backgroundColor="black";
}
}
count++;
if (count>4) {
count=1;
}
time=setTimeout("changeimg()",3000);
}
function stopChange(index){
var lis=document.getElementsByClassName("lbt");
for (var i=0;i<lis.length;i++) {
if (i==index) {
lis[i].style.backgroundColor="green";
document.getElementById("pic").src="img/images/"+"ad-0"+(i+1)+".jpg";
count=parseInt(index)+1;
clearTimeout(time);
}else{
lis[i].style.backgroundColor="black";
}
}
}
//删除行两种方法
/*有点缺陷
function delete1(obj) {
obj.parentNode.parentNode.remove();//获取父类删除行
}*/
//完美
window.οnlοad=function(){
var dels=document.getElementsByClassName("del");//获取数组
for (var i = 0; i < dels.length; i++) { //循环遍历
dels[i].οnclick=function(){ //绑定单击
this.parentNode.parentNode.remove();
}
}
}