php网站开发百度百科,广州建筑集团有限公司科研成果,莆田网站建设开发,网站后台添加东西不能粘贴无论你想走多远#xff0c;你都需要不断地走下去。前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标#xff0c;也提现这你的代码能力#xff0c;开发的水平。废话不多说#xff0c;进入今天的主要分享————基于面向对象思想的图片轮播。其效果如下所…无论你想走多远你都需要不断地走下去。前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标也提现这你的代码能力开发的水平。废话不多说进入今天的主要分享————基于面向对象思想的图片轮播。其效果如下所示 正如图片所示这样我们要实现的效果这里与我们以往不同的是我们的布局十分简洁。其中html布局如下 1 !DOCTYPE html
2 html langen
3 head
4 meta charsetUTF-8
5 titleDocument/title
6 link relstylesheet hrefindex.css
7 script srctools.js/script
8 script srcjs.js/script
9 /head
10 body
11 div classcontainer idslide1
12 ul
13 lia hrefimg srcimages/1.jpg alt文字1/a/li
14 lia hrefimg srcimages/2.jpg alt文字2/a/li
15 lia hrefimg srcimages/3.jpg alt文字3/a/li
16 lia hrefimg srcimages/4.jpg alt文字4/a/li
17 /ul
18 /div
19 script
20 var s new Slider(slide1);
21 console.info(s);
22 /script
23 /body
24 /html 样式文件index.css 1 ul,ol,li{padding:0;margin:0;list-style: none;}
2 .container{
3 width: 500px;
4 height: 300px;
5 margin:50px auto;
6 position: relative;
7 }
8 #msg{
9 width:100%;
10 height:40px;
11 line-height: 40px;
12 text-indent:10px;
13 position:absolute;
14 bottom:0px;
15 left:0;
16 color:white;
17 font-size: 16px;
18 background:rgba(0,0,0,.8);
19 cursor:pointer;
20 z-index:1;
21 }
22 ul li a{display: block;}
23 img{width: 500px;height: 300px;}
24 ol{position: absolute;bottom:10px; left:50%; -webkit-transform:translateX(-50%); background:rgba(255,255,255,.6);border-radius:7px;padding:3px;z-index:2;}
25 ol li{background: red; float:left; width:8px; height:8px;margin-left:5px; -webkit-border-radius:4px;-mz-border-radius:4px;margin-right: 7px}
26 span{
27 width:30px;
28 height:45px;
29 line-height: 45px;
30 font-size:40px;
31 color:white;
32 background:rgba(255,255,255,.3);
33 cursor:pointer;
34 position:absolute;
35 font-weight: bold;
36 top:50%;
37 left:0;
38 -webkit-transform:translateY(-50%);
39 -mz-transform:translateY(-50%);
40 -webkit-transition:all 1s ease 0s;
41 }
42 #rtBtn{
43 right:0;
44 left:auto;
45 }
46 span:hover{
47 -webkit-transform:rotateY(40deg) translateX(-30px) scale(1.2);
48 } 注意这里的浏览器兼容我这里只兼容了内核为-webkit-的同时注意这里的ol和div的样式设计。
js.js代码 1 function Slider(containerId){
2 this.containerId $(containerId);
3 this.ullis $get($get(containerId,ul)[0],li);
4 this.num this.ullis.length;
5 this.ollis this.createList();
6 this.indexA 1;
7 this.timer;
8 this.init(this.indexA);
9 this.ltBtn $(ltBtn);
10 this.rtBtn $(rtBtn);
11 this.mouseenter();
12 this.autoplay(this.indexA);
13 console.info(this.ollis);
14 }
15 Slider.prototype.createList function(){//创建ol
16 var ol $create(ol);
17 var lis [];
18 for(var i 0; ithis.num;i ){
19 var li $create(li);
20 ol.appendChild(li);
21 lis.push(li);
22 }
23 this.containerId.appendChild(ol);
24 var spanleft $create(span)
25 spanleft.innerHTMLlt;
26 spanleft.idltBtn;
27 this.containerId.appendChild(spanleft);
28 var spanright $create(span);
29 spanright.innerHTML gt;
30 spanright.id rtBtn;
31 this.containerId.appendChild(spanright);
32 var div $create(div)
33 div.id msg;
34 this.containerId.appendChild(div);
35 return lis;
36 }
37 Slider.prototype.init function(index){
38 this.moveto(index);
39 }
40 Slider.prototype.mouseenter function(){
41 var that this;
42 for (var i 0; i this.num; i ) {
43 this.ollis[i].index i;
44 this.ollis[i].onmouseenter function(){
45 that.moveto(this.index);
46 }
47 }
48 this.ltBtn.onclick function(){
49 if(that.indexA0){
50 that.indexA--;
51 that.moveto(that.indexA);
52 }else{
53 that.indexAthat.num-1;
54 that.moveto(that.indexA);
55 }
56 }
57 this.rtBtn.onclick function(){
58 if(that.indexAthat.num-1){
59 that.indexA ;
60 that.moveto(that.indexA);
61 }else{
62 that.indexA 0;
63 that.moveto(that.indexA);
64 }
65 }
66 }
67 Slider.prototype.moveto function(index){
68 for (var i 0; i this.num; i ) {
69 this.ullis[i].style.displaynone;
70 this.ollis[i].style.backgroundColorred;
71 }
72 this.ullis[index].style.displayblock;
73 this.ollis[index].style.backgroundColorblue;
74 $(msg).innerHTML this.ullis[index].firstChild.firstChild.alt;
75 }
76 Slider.prototype.autoplay function(indexA){
77 var that this;
78
79 that.timer setInterval(function(){
80 indexA%that.num;
81 that.moveto(indexA);
82 indexA ;
83 },3000);
84 that.containerId.onmouseenter function(){
85 clearInterval(that.timer);
86 console.info(that.containerId);
87 }
88 that.containerId.onmouseleave function(){
89 that.autoplay(indexA)
90 }
91
92 } 简单讲一下此次开发的大致思想首先我们在html中首先生成一个对象构造器——即Slider这样的好处是我们以后可以很方便地通过我们的构造器来实现一个图片轮播的效果减少代码冗余同时减少了变量命名的冲突当然它也有弊端对于小型项目不是很好所以在开发工程需要考虑。
此次开发中我们需要首先实现html架构和简单的样式操作这里我们只需要下次添加我们需要的图片轮播的图片资源和整个容器div就可以了减少了对应的轮播导航下标的编写提现了代码的简单性更适合小白类开发的编写。
这里遇到的问题有
1.如何创建一个元素如何给创建的元素添加到需要的父亲结点上
2.如何给生成的标签添加类名以及属性
解决办法
1.利用 var li document.creatElement(li)来创建新的属性标签即dom操作。
创建dom元素createElement创建元素createTextNode创建文本结点并且添加 appendChild()示例如下 div iddiv1
p idp1This is a paragraph./p
p idp2This is another paragraph./p
/div
script
var paradocument.createElement(p);
var nodedocument.createTextNode(This is new.);
para.appendChild(node);
var elementdocument.getElementById(div1);
element.appendChild(para);
/script 2.属性的操作和修改
这里对于创建的元素的类名和id进行演示 !DOCTYPE html
html langen
header
meta charset utf-8
style
.cur{
color:red;
}
/style
title创建元素/title
/header
body
ul idcontent
/ul
script
var li document.createElement(li);
li.classList.value cur;
li.innerHTML 今天我学习面向对象开发思想;
document.getElementById(content).appendChild(li);
/script
/body
/html 效果图: 前端开发中的样式设计一般思路首先对于大型网站的开发我们需要统一设计初始化样式一般文件名是base.css,其中是我们对于所有浏览器统一使用的一个文件类型其中设计代码如下 1 charset utf-8;
2
3 /* CSS reset */
4 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
5 table{border-collapse:collapse;border-spacing:0;}
6 fieldset,img {border:0;}
7 img{vertical-align: top;}
8 address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
9 ol,ul {list-style:none;}
10 capation,th{text-align:left;}
11 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
12 q:before, q:after{content:;}
13 abbr,acronym{border:0;}
14
15 .tl{text-align:left;}
16 .tc{text-align:center;}
17 .tr{text-align:right;}
18 .bc{margin-left:auto;margin-right:auto;} /*块状元素集中对齐 block center*/
19 .fl{float:left;display:inline;} /* 可修复IE6中双倍边距bug */
20 .fr{float:right;display:inline;}
21 .cb{clear:both;}
22 .overflow-h{overflow:hidden;}
23
24 .clearfix:after{
25 content:;
26 display:block;
27 height:0;
28 visibility: hidden;
29 clear:both;
30 }
31 .clearfix{ /*IE6中的解决方案*/
32 zoom:1;
33 } 注意这里我添加了一个新的类通过伪对象的方法来解决浮动造成的塌陷问题常用的解决浮动塌陷的方法是
1.给使用float元素的父类结束前添加一个高为0宽为0并且有clearboth样式的div
2.在使用float元素的父类元素添加overflowhidden
3.使用after伪对象清除浮动如上面的代码显示。
在项目开发中样式设计过程中我们不会去修改其他工程师已经编写的样式而是在他们的基础上我们添加新的样式来覆盖他们的样式这样的好处可以避免修改样式而毁坏原来的样式而影响到项目的开发。我们常用的开发的插件如在手机端开发常用的图片轮播插件的样式设计我们也是在后面修改的。
一般我们会把通用的一些样式写在一个新的css文件中提供给大家使用把一些对应的的样式写在index.css文件中。注意这里使用了css3中新增的属性transfrom,border-radius,rotate(),rgba()来实现背景色变化在IE浏览器中不兼容需要写成backgroundrgb(255,255,255);filter(alpha(opacity60));今天就大致说到这里吧。
js.js文件
注意这里不是光引用这个文件就可以了而是在html中通过var s new Slider(id);来调用我们编写的构造器。注意在编写程序的时候不要一开始写完了js构造器所有的代码在去调用因为这样不方便检查我们的编写是否出现了出现了错误这里推荐下错误检查方法一般都老鸟都会通过console.info或者console.log()来答应我们的变量或者传递的参数还以可以通过打印一个变量来检测我们的代码是否执行是否有效常见的错误类型有语法错误引用类型错误逻辑错误等所以要注意错误类型并且及时修改。
工具文件我们可以把我们常用的方法封装成一个函数通过传递形参的形式来获得我们需要的元素和效果如下面所示的tools.js function $(id){
return document.getElementById(id);
}
function $get(containerId,tagName){
if(typeof containerId string $(containerId)){
return $(containerId).getElementsByTagName(tagName);
}
else if(typeof containerIdobject)
{
return containerId.getElementsByTagName(tagName);
}
else{
throw (你写的第一个参数不是一个ID);
}
}
function $create(TagName,attr){
var dom document.createElement(TagName);
for(var p in attr){
dom[p] attr[p];
}
return dom;
} 最后我们分析一下构造器中需要的属性
1.创建对应的ol导航和对应的按钮
2.初始化所有的样式操作
3.显示在对应的容器操作
4.鼠标进入事件
5.自动播放事件
在这些基本的事件中我们需要注意调用的顺序如创建肯定在初始化之前。我们可以把一些通用的属性放在原型链中来编写这样的好处减少了变量空间占用和多次访问属性的效果。
遇到的问题
1.其中的this指代问题这里的解决办法是在鼠标进入之前的函数中缓存一下var that this。 这样就可以访问属性了。
2.图片轮播判断向左点击的时候 如果当前的索引值大于零让它执行自减操作如果不大于0 就让他等于对应图片长度-1 向右点击的时候当前的索引值小于它对应的轮播图片的长度-1执行自加1操作超过图片轮播长度时索引值等于0代码如下所示 this.ltBtn.onclick function(){
if(that.indexA0){
that.indexA--;
that.moveto(that.indexA);
}else{
that.indexAthat.num-1;
that.moveto(that.indexA);
}
}
this.rtBtn.onclick function(){
if(that.indexAthat.num-1){
that.indexA ;
that.moveto(that.indexA);
}else{
that.indexA 0;
that.moveto(that.indexA);
}
} 更多专业前端知识请上
【猿2048】www.mk2048.com
