发表于: 2017-03-27 20:20:45

1 587


今天完成的事:

1.用jq写了css15的轮播图。为了解决之前的塌陷问题,重新写了html。

现在是这样

<div class="banner">
<ul class="banner-img">
<li><img src="images/banner-0.jpg" class="banner-li-img img-active" alt=""></li>
<li><img src="images/banner-1.jpg"  class="banner-li-img" alt=""></li>
<li><img src="images/banner-2.jpg"  class="banner-li-img" alt=""></li>
<ul class="banner-index">
<li class="index-li-active"></li>
<li></li>
<li></li>
</ul>
<p class="btn btn-left" id="btnLeft"><</p>
<p class="btn btn-right" id="btnRight">> </p>
</ul>
</div>

把banner图统一设置为display:none;写一个类.img-active{display:block!important;}用jq给想要显示的图片添加类.img-active,同时移除同级兄弟节点中含有的类.img-active。以这种方式达到更换图片。这样过渡比较生硬,于是在css文件中给.img-active类添加了淡入淡出的动画。


把下方小圆点目录与图片显示绑定,点击小圆点更换显示的图片。

还剩两个需求,点击左右按钮切换图片和没有点击时图片自动轮播。左右按钮切换用了jq的trigger()方法,在按钮的点击函数里调用小圆点的click事件;图片自动轮播设置定时器,在定时器函数中同样用trigger()调用小圆点的click事件。记得调用之前先clearInterval。

jq中使用setInterval()写法:

写法一:

function jump(){
  …………  //函数内容
}

time = setInterval("jump",5000); //每个五秒调用一次函数

写法二:

function autoPlay(){
  time = setInterval(function(){
    …………   //函数内容
  },5000);
}
autoPlay();


写法三:

var timer;

timer=setInterval(function(){

.....

},1000 );


2。根据任务5给的流程。先是尝试配置nginx。

启动nginx,在浏览器输入localhost,显示403forbidden。

后来查出原因在于缺少index.html。如果在/home/XXX/www下面没有index.php,index.html的时候,直接访问域名,找不到文件,会报403 forbidden。

了解了nginx是一个性能很好的反向代理服务器,用来做负载均衡。


正向代理:隐藏了真实的请求客户端,服务端不知道真实的客户端是谁,客户端请求的服务都被代理服务器代替来请求。

反向代理:隐藏了真实的服务端。就像拨打10086一样,背后可能有成千上万台服务器为我们服务,但具体是哪一台,你不知道。

叫法是因为出现的时间先后。先有的正向代理,所以后出现的一个叫反向代理。


听师姐讲解了nginx配置文件中每条的意思和注意的点,知道了 listen是监听端口,自定义的四位数字,server_name是自定义的字符只要跟之前没重名,location中index的作用。


3.看了红宝书中AJAX章节。

知道了AJAX技术核心是XHR,就是无需刷新就可以从服务器获取数据。又看了后面的一些方法,但有点懵。


明天要做的事:开始动手写。


遇到的问题:ajax向谁请求数据。

梳理流程大致是   var xhr=creatXHR(),判断readyState后,open,send。那么open("get","aaaa.html")中,这个网址就是要请求的网站吗?

为了保障安全,应该是需要对暗号密码之类的东西。这些又该怎么表达?


收获:如上。


返回列表 返回列表
评论

    分享到