图片轮转 编写记录(一）

近段时间，我开始学习写网站。从html，css，Javascript一路走来，东学一点，西学一点。磕磕碰碰一个月就过去了。感觉学到了一点东西，但是回忆起来呢，好像又有点模糊。今天突发奇想，我应该写点东西记录下来。所以就从这边文章开始吧，坚持着，越走越远。

今天的第一个文章，我打算记录自己写图片轮转的过程。

先写一个ul，添加li，把图片都放到li里面去，当然啦，得添加css:{list-style:none;}，然后我们就得到一个一个图片竖直排列。我做这个东西的时候，先把图片处理了一下，图片的宽和高是一样的。

我的想法是把所有的图片隐藏在一起，然后每一次只显示一张，设置一个时间，让它可以自动变换图片显示。

在css中写了一个 display_none 的class

.display_none{
display:none;
}

把除第一个li以外的全部li都添加隐藏属性

<li class="display_none"><img src="images/img_02.jpg"></li>

然后我们就只见到一张图片显示在网页上面了。
接着，我们需要一个函数，设定一个时间，时间到了，给当前这一个li添加隐藏，把需要显示的li的隐藏属性去除；

但是，需要明白使用Javascript添加和删除class的方法

添加：

elements.className = elements.className.replace(className," " );

删除：

elements.className += className;

其中className为字符串“display_none”

具体操作

1.取得ul下的li，其中slider_ul为ul对应的id
    var li = document.getElementById("slider_ul").getElementsByTagName("li");

遇到问题：li的值只用在网页已经加载了li以后才不为空，所以该语句需在网页中已经有li标签加载后才不为空

2.编写添加和删除class的函数

function addClass(i){
li[i].className += "display_none";
}

function removeClass(i){
li[i].className = li[i].className.replace("display_none"," " );
}

3.编写图片切换的函数

function slider(i){
addClass(i==li.length?li.length-1:i);
removeClass(i==li.length-1?0:i+1);
if(i!=li.length-1){
i++;
}
else{
i=0;
}
//控制时间切换图片

setTimeout("slider(" + i + ")",2000);
}

遇到问题：注意setTimeout函数中的第一个参数为字符串！！

4.调用

slider(0);

代码下载地址：https://github.com/450570469/Tong/tree/master/image%20conversion/version%201

到现在，图片转换的效果已经出来了，可以图片是可以轮转的，但是那切换的效果太差了。我打算再进一步修改；这一次的记录就先到这里，后续的我会继续研究，力求做一个好的效果。

我还是一个初学者，如果有写得不对的，希望你们告诉我。同时，也希望和大家一起交流学习。