Wie erreicht man mit JavaScript einen dynamischen Karusselleffekt? (Codebeispiel)

Der Inhalt dieses Artikels ist: Wie erzielt man mit JavaScript einen dynamischen Karusselleffekt? (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Funktionsbeschreibung:

1 links und rechts Die Seitenpfeile werden angezeigt und die Pfeile werden ausgeblendet, wenn die Maus geht

2. Fügen Sie unten dynamisch einen kleinen Kreis hinzu, binden Sie das Klickereignis und synchronisieren Sie den Klick Ereignis des kleinen Kreises mit den Links- und Rechtspfeil-Klickereignissen

3. Kopieren Sie das erste Bild und fügen Sie es dynamisch hinzu

4. Binden Sie das Klickereignis an den Pfeil und erstellen Sie ein nahtloses Karussell

5. Implementieren Sie ein automatisches Karussell (Animationsfunktion)

Spezifischer Implementierungscode:

1 Wenn die Maus hinein bewegt wird, werden die Pfeile nach links und rechts angezeigt, und wenn die Maus weggeht, werden die Pfeile angezeigt sind ausgeblendet

con.addEventListener('mouseenter', function() {
    arrow_l.style.display = 'block';  // 将左右箭头的display设为block
    arrow_r.style.display = 'block';
});
con.addEventListener('mouseleave', function() {
    arrow_l.style.display = 'none';  // 将左右箭头display设为none
    arrow_r.style.display = 'none';
});

2. Fügen Sie unten dynamisch einen kleinen Kreis hinzu, binden Sie das Klickereignis und synchronisieren Sie das Klickereignis des kleinen Kreises mit dem Klickereignis des linken und rechten Pfeils

 for(var i = 0; i < ul.children.length; i++) {
    var li = document.createElement(&#39;li&#39;);
    li.setAttribute(&#39;index&#39;, i);  // 通过添加自定义属性来记录小圆圈索引号
    ol.appendChild(li);      // 将创建的li添加进ol里
    // 生成小圆圈的同时就可以给它绑定单击事件
    li.addEventListener(&#39;click&#39;, function() {
        // 排他思想 干掉所有人，留下我自己
        for(var i = 0; i < ol.children.length; i++) {  // 先把所有的小圆圈改为未选中状态
            ol.children[i].className = &#39;&#39;;
        }
        // 再把当前小圆圈改为选中状态
        this.className = &#39;current&#39;;
        var index = this.getAttribute(&#39;index&#39;);  // 获取当前小圆圈的索引
        // 将index值赋值给num以及circle，将小圆圈的点击事件和左右箭头点击事件同步
        num = index;
        circle = index;
        animate(ul, - index * conWidth);
    })
}

3. Kopieren Sie das erste Bild und fügen Sie es dynamisch hinzu.

// 克隆第一张图片
var first = ul.children[0].cloneNode(true); // true 深拷贝
ul.appendChild(first); // 拷贝第一张图片添加到ul最后

4 Ereignis auf den Pfeil und ermöglichen Sie dem Bild, sich nahtlos zu drehen

①Klicken Sie auf das Ereignis des Pfeils rechts

var num = 0;    // 用来存储点击后图片序号
var circle = 0;   // 用来存储点击后小圆圈序号
var flag = true;   // flag 节流阀 防止用户点击过快 图片播放太快
// 右侧箭头点击播放
arrow_r.addEventListener('click', function() {
    if(flag) {
        // 点击后先关闭节流阀
        flag = false;
        // 如果播放到了最后一张，就把left直接值设为0从头播放，同时还原num
        if(num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, - num * conWidth, function() {
            // 回调函数 动画执行完后开启节流阀
            flag = true;
        });
        // 小圆圈和箭头一起变化
        circle++;
        /* if(circle == ol.children.length) {
              circle = 0;
           } */
        // 可以用三元运算符判断小圆圈是否到了最后一个，如果是最后一个就还原circle
        circle == ol.children.length ? circle = 0 : circle;
        circleChange();   // 使当前小圆圈为选中状态（重复代码封装到一个函数里了）
    }
})

②Klicken Sie auf das Ereignis des Pfeils nach links

arrow_l.addEventListener('click', function() {
    if(flag) {
        // 首先关闭节流阀
        flag = false;
        // 如果播放到了第一张，就把left值设为最后一张的值
        if(num == 0) {
            num = ul.children.length - 1;
            ul.style.left = - num * conWidth + 'px';
        }
        num--;
        animate(ul, - num * conWidth, function() {
            flag = true;
        });
        // 小圆圈和箭头一起变化 
        circle--;
        // 三元表达式   circle < 0 时说明是第一张图片，将小圆圈改为第四个（索引为3）
        circle < 0 ? circle = ol.children.length - 1 : circle;
        circleChange();
    }
})

circleChange(); Funktionscode

// 小圆圈的选中状态（相同代码可以封装为一个函数，使代码更简洁）
function circleChange() {
    // 排他思想
    for(var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = &#39;&#39;;
    }
    ol.children[circle].className = &#39;current&#39;;
}

5. Implementierung Automatisches Karussell (Animationsfunktion)

// 自动播放轮播图，相当于隔一段时间调用一次右侧箭头点击事件
 var timer = setInterval(function() {
     // 手动调用点击事件
     arrow_r.click();
}, 2000);

Animationsfunktion animate.js (ps: Ich habe dies nicht in index.js unten geschrieben, sondern Sie müssen es selbst herunterladen, Sie können es als animate.js-Datei importieren oder fügen Sie es direkt in Ihren JS-Code ein)

// obj 动画对象
// target 目标位置
// callback 回调函数
function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var step = (target - obj.offsetLeft) / 10;  // step步长值
        step = step > 0 ? Math.ceil(step) : Math.floor(step); // 大于零向上取整,小于零向下取整
        if(obj.offsetLeft == target) {
            clearInterval(obj.timer);
            // if(callback) { // 判断是否传了回调函数
            //     callback(); // 回调函数，当动画执行完后才执行
            // }
            // &&是短路运算符，存在callback时才会继续执行callback()
            callback && callback();
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15)
}

Der spezifische Implementierungscode lautet wie folgt:

HTML-Code:

<div class="con">
    <i class="icon iconfont iconarrow_left arrow-l"></i>
    <i class="icon iconfont iconarrow_right arrow-r"></i>
    <ul>
        <li>
            <a href="javascript:;"><img src="images/img1.jpg" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="images/img2.jpg" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="images/img3.jpg" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="images/img4.jpg" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="images/img5.jpg" alt=""></a>
        </li>
    </ul>
    <ol>
    </ol>
</div>

ps: Die kleinen Pfeile auf der linken und rechten Seite sind Iconfont-Symbole (iconarrow_left, iconarrow_right), um vorgestellt werden

<link rel="stylesheet" href="http://at.alicdn.com/t/font_1518420_oljcm07nn2.css">

CSS-Code:

<style>
    * {
        margin: 0;
        padding: 0;
    }
    ul,li,ol,a {
        list-style: none;
        text-decoration: none;
    }
    .con {
        width: 533px;
        height: 300px;
        margin: 100px auto;
        position: relative;
        background-color: #f0f0f0;
        overflow: hidden;
    }
    .arrow-l,.arrow-r{
        display: none;
        width: 20px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #eee;
        position: absolute;
        top: 45%;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 2;
        cursor: pointer;
    }
    .arrow-l {
        left: 0;
    }
    .arrow-r{
        right: 0;
    }
    ul {
        position: absolute;
        width: 600%;
    }
    ul li {
        float: left;
    }
    ul li img {
        width: 533px;
        height: 300px;
    }
    ol {
        position: absolute;
        left: 50%;
        bottom: 8px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    ol li {
        float: left;
        width: 6px;
        height: 6px;
        margin: 0 2px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.5);
        cursor: pointer;
    }
    .current {
        background-color: #ffe;
    }
</style>

Detaillierter JavaScript-Code (index.js)

 window.addEventListener('load', function() {   // 等页面加载完毕
    // 获取需要用到的的元素
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var con = document.querySelector('.con');
    var conWidth = con.offsetWidth;
    // 鼠标经过箭头显示，鼠标离开箭头隐藏
    con.addEventListener('mouseenter', function() {
        arrow_l.style.display = 'block';  // 将左右箭头的display设为block
        arrow_r.style.display = 'block';
        // 鼠标经过停止定时器
        clearInterval(timer);
        timer = null; // 释放定时器变量
    });
    con.addEventListener('mouseleave', function() {
        arrow_l.style.display = 'none';  // 将左右箭头display设为none
        arrow_r.style.display = 'none';
        // 鼠标离开再重新开启定时器
        timer = setInterval(function() {
            // 手动调用点击事件
            arrow_r.click();  // 自动轮播
        }, 2000);
    });
    
    var ul = con.querySelector('ul');
    var ol = con.querySelector('ol');
    // 动态添加底部小圆圈
    for(var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        // 通过添加自定义属性来记录小圆圈索引号
        li.setAttribute('index', i);
        ol.appendChild(li);
        // 生成小圆圈的同时就可以给它绑定单击事件
        li.addEventListener('click', function() {
            // 排他思想 干掉所有人，留下我自己
            for(var i = 0; i < ol.children.length; i++) {  // 先把所有的小圆圈改为未选中状态
                ol.children[i].className = '';
            }
            // 再把当前小圆圈改为选中状态
            this.className = 'current';
            var index = this.getAttribute('index');  // 获取当前小圆圈的索引
            // 将index值赋值给num以及circle，将小圆圈的点击事件和左右箭头点击事件同步
            num = index;
            circle = index;
            animate(ul, - index * conWidth);
        })
    }
    // 让第一个小圆圈底色为白色（选中状态）
    ol.children[0].className = 'current';
    // 克隆第一张图片
    var first = ul.children[0].cloneNode(true);  // true 深拷贝
    ul.appendChild(first); // 拷贝第一张图片添加到ul最后

    var num = 0;    // 用来存储点击后图片序号
    var circle = 0;   // 用来存储点击后小圆圈序号
    var flag = true;   // flag 节流阀 防止用户点击过快 图片播放太快
    // 右侧箭头点击播放
    arrow_r.addEventListener('click', function() {
        if(flag) {
            // 点击后先关闭节流阀
            flag = false;
            // 如果播放到了最后一张，就把left直接值设为0从头播放，同时还原num
            if(num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, - num * conWidth, function() {
                // 回调函数 动画执行完后开启节流阀
                flag = true;
            });
            // 小圆圈和箭头一起变化
            circle++;
            /* if(circle == ol.children.length) {
                  circle = 0;
               } */
            // 可以用三元运算符判断小圆圈是否到了最后一个，如果是最后一个就还原circle
            circle == ol.children.length ? circle = 0 : circle;
            circleChange();   // 使当前小圆圈为选中状态
        }
    })

    // 左侧箭头点击播放
    arrow_l.addEventListener('click', function() {
        if(flag) {
            // 关闭节流阀
            flag = false;
            // 如果播放到了第一张，就把left值设为最后一张的值
            if(num == 0) {
                num = ul.children.length - 1;
                ul.style.left = - num * conWidth + 'px';
            }
            num--;
            animate(ul, - num * conWidth, function() {
                flag = true;
            });
            // 小圆圈和箭头一起变化 
            circle--;
            // circle < 0 时说明是第一张图片，将小圆圈改为第四个（索引为3）
            if(circle < 0) {
                circle = ol.children.length - 1;
            }
            circleChange();
        }
    })
    // 小圆圈的选中状态（相同代码可以封装为一个函数，使代码更简洁）
    function circleChange() {
        // 排他思想
        for(var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    }
    // 自动播放轮播图，相当于隔一段时间调用一次右侧箭头点击事件
    var timer = setInterval(function() {
        // 手动调用点击事件
        arrow_r.click();
    }, 2000);
})

Mehr Coole CSS3-, HTML5- und Javascript-Spezialeffektcodes, alles in: Javascript-Spezialeffektsammlung

Das obige ist der detaillierte Inhalt vonWie erreicht man mit JavaScript einen dynamischen Karusselleffekt? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!