Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript implementiert Karusselleffekt (Codebeispiel)

青灯夜游
Freigeben: 2018-10-12 17:18:39
nach vorne
2408 Leute haben es durchsucht

本文给大家介绍JavaScript实现轮播图效果的,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

学习前端也有一小段时间了,当初在学习javascript的时候,练手的一个轮播图实例,轮播图也是挺常见的了。

着是通过获取图片偏移量实现的。也实现了无缝切换。还有一点问题就是没有加上图片切换的时候的延迟了,哈哈 

html:

<div id="container">
        <div id="list" style="left: -600px;">
            <img src="../image/1.jpg" alt="5">
            <img src="../image/1.jpg" alt="1">
            <img src="../image/2.jpg" alt="2">
            <img src="../image/3.jpg" alt="3">
            <img src="../image/4.jpg" alt="4">
            <img src="../image/5.jpg" alt="5">
            <img src="../image/1.jpg" alt="1">
        </div>
        <div id="buttons">
                <span class="on"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
        </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>
Nach dem Login kopieren

js:

window.onload = function(){
    //获取元素
    var container = document.getElementById(&#39;container&#39;);
    var list = this.document.getElementById(&#39;list&#39;);
    var buttons = document.getElementById(&#39;buttons&#39;).getElementsByTagName(&#39;span&#39;);
    var prev = document.getElementById(&#39;prev&#39;);
    var next = document.getElementById(&#39;next&#39;);
    var index = 1;//默认第一个小圆点亮

    //小圆点的点亮
    function showButton() {
        //遍历小圆点的个数,当触发onclick事件后,className为‘on’的变为‘’。
        for(var i = 0;i < buttons.length; i++){
            if(buttons[i].className == &#39;on&#39;){
                buttons[i].className = &#39;&#39;;
                break;
            }
        }
        buttons[index - 1].className = &#39;on&#39;; //原始第一个小圆点点亮,onclick事件触发后,index+1
    }

    function animate (offset) {
        //获取从第一张图片开始发生的偏移量
        var newLift = parseInt(list.style.left) + offset; 
        list.style.left = newLift + &#39;px&#39;;
        if(newLift > -600){  
            //如果偏移量的位置大于-600的时候,图片跳转到第五张图片
            list.style.left = -3000 + &#39;px&#39;;
        }
        if(newLift < -3000){ 
            //如果偏移量的位置大于-3000的时候,图片跳转到第一张图片
            list.style.left = -600 + &#39;px&#39;;
        }
    }
    next.onclick = function () {
        //如果button的index为5的时候,再点击next按钮会返回 1;
        if(index == 5){
            index = 1;
        }else{
            index += 1;
        }
        showButton();
        animate(-600);
    }
    prev.onclick = function () {
        if(index == 1){
            index = 5;
        }else{
            index -= 1;
        }
        showButton();
        animate(600);
    }
}
Nach dem Login kopieren

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程

相关推荐:

JavaScript图文教程

JavaScript在线手册

Das obige ist der detaillierte Inhalt vonJavaScript implementiert Karusselleffekt (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage