찾다

집 >웹 프론트엔드 >JS 튜토리얼 >js Slideshow_javascript 기술 구현

js Slideshow_javascript 기술 구현

WBOY
WBOY원래의
2016-05-16 17:58:431222검색

다른 효과를 버리고 가장 간단한 캐러셀에는

parent.appendChild(parent.firstChild)라는 명령문 하나만 있습니다. 이 명령문은 목록의 요소를 마지막 요소에 계속 추가하여 원래 위치에서 노드를 변경합니다. 제거되므로 스위칭 효과를 얻을 수 있습니다.

한 가지 점은 IE가 다른 브라우저와 다르게 텍스트 노드를 취급한다는 것입니다. 또한, 다른 FF 버전에서는 children 속성에도 주의를 기울여야 합니다.

아래 데모에서는 #view의 Overflow:hidden을 설정하지 않았습니다.

demo_1:

코드 복사 코드는 다음과 같습니다.

< ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"





;body>





🎜>< ;script type="text/javascript">
var img_list = document.getElementById('img_list')
setInterval(function(){
img_list.appendChild(img_list.firstChild);
},500)






(위 데모는 나중에 시연하기 위해 플로팅 없이 실제로 사용할 수 있습니다.)
또 다른 방법은 노드 순서를 변경하지 않고(지속적으로 변경) 전체 목록을 특정 방향으로 이동하는 것입니다. 목록 순서) 왼쪽 속성),

demo_2:




코드 복사
코드는 다음과 같습니다. ;
;
;


    li>

  • ;/div>
    < script type="text/javascript">
    var img_list = document.getElementById('img_list')
    img_list.style.left = 0; function(){
    img_list.style.left = parseInt(img_list.style.left) == -640 ? 0: (parseInt(img_list.style.left) - 320 'px')
    },500 )





    위의 데모는 갑작스럽고 느낌이 좋지 않으므로 부드러운 움직임을 추가할 수 있습니다. 효과.
    소위 부드러운 움직임 효과는 실제로 위의 두 번째 데모의 각 큰 단계를 여러 개의 작은 부분으로 분해하고 320px의 움직임을 50회로 나누어 실행하는 것입니다.


    코드 복사


    코드는 다음과 같습니다.

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

    <머리>

    <제목>


    <본문>











    对于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">

    <머리>

    <제목>


    <본문>












    演示而已, 具体的宽道와排列需要自己再组织下。 합치면 式也比较好实现.
    最后，大家懂的，CSS3也可以实现一些幻灯 Pictures效果，
    demo_7:

    复代代码代码如下:

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

    <머리>

    <제목>


    <본문>











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

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Prototype의 템플릿 클래스 Template_prototype에 대한 간략한 분석다음 기사：Prototype의 템플릿 클래스 Template_prototype에 대한 간략한 분석

관련 기사

더보기