近段时间,我开始学习写网站。从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对应的idvar 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
到现在,图片转换的效果已经出来了,可以图片是可以轮转的,但是那切换的效果太差了。我打算再进一步修改;这一次的记录就先到这里,后续的我会继续研究,力求做一个好的效果。
我还是一个初学者,如果有写得不对的,希望你们告诉我。同时,也希望和大家一起交流学习。