Implementation of js slideshow_javascript skills

Abandoning other effects, the simplest carousel only has one statement:

parent.appendChild(parent.firstChild), which continuously adds an element of the list to the last one. appendChild will change the node from the original The position is removed, so it can produce a switching effect.

One point, IE treats text nodes differently from other browsers. You need to pay attention when getting child nodes. In addition, in different versions of FF, the children attribute also needs to be paid attention to.

The demo below does not set the overflow:hidden of #view.

demo_1:

Copy code The code is as follows:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html>

对于demo_1的情况，我们可以不断缩减firstChild的宽度，以此达到类似demo_3的效果。
demo_4

复制代码 代码如下:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

上面几种，方式原理都差不多，另外还可以设置透明渐变，让一张图片透明度从1国度到0 ，于是也可以产生切换效果，代码改动也很小。
demo_5：

复制代码 代码如下:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

至于其他各种绚丽的效果，经过一些其他的组合处理就可以了。
一种处理方法就是把图片分割成n个区域，将背景都设置为需要显示的图片，然后在不同的区域显示对应的背景。这样一来，一张100*100的图片，可以被分割成100个10*10的小方块，再对这些方块来进行处理，得到的效果就会更多。理论上还可以分成10000个1*1的小点，但是浏览器会爆掉··
demo_6：

复制代码 代码如下:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

演示而已，具体的宽度和排列需要自己再组织下。或者消除，或者遮罩，对应不同的排列组合，其他的方式也比较好实现。
最后，大家都懂的，CSS3也可以实现一些幻灯片效果，
demo_7:

复制代码 代码如下:

"http://www.w3.org/TR/html4/loose.dtd"> ;

<머리>

<제목>


<본문>

• 


• 


• 


• 

더 많은 정보를 얻을 수 있습니다.