简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  네이티브 JavaScript를 사용하여 캐러셀을 구현하는 방법은 무엇입니까? 자세한 코드 설명

네이티브 JavaScript를 사용하여 캐러셀을 구현하는 방법은 무엇입니까? 자세한 코드 설명

php是最好的语言
php是最好的语言원래의
2018-08-07 10:58:273043검색

구현 원리

네이티브 JavaScript를 사용하여 캐러셀을 구현하는 방법은 무엇입니까? 자세한 코드 설명

사용자 정의 애니메이션 기능을 사용하여 요소의 왼쪽 값을 변경하여 이미지가 왼쪽 및 오른쪽으로 스크롤되도록 합니다.

HTML: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="StyleSheet.css">
    <title></title>
</head>
<body>
    <p id="scroll" class="scroll">
        <p id="box" class="box">
            <ul id="ul" style="left:-950px;">
                <li><img  src="images/top_banner_bw01.jpg"    style="max-width:90%"  style="max-width:90%" alt="네이티브 JavaScript를 사용하여 캐러셀을 구현하는 방법은 무엇입니까? 자세한 코드 설명" ></li>
                <li><img  src="images/top_banner_bw02.jpg"    style="max-width:90%"  style="max-width:90%" alt="네이티브 JavaScript를 사용하여 캐러셀을 구현하는 방법은 무엇입니까? 자세한 코드 설명" ></li>
                <li><img  src="images/top_banner_bw03.jpg"    style="max-width:90%"  style="max-width:90%" alt="네이티브 JavaScript를 사용하여 캐러셀을 구현하는 방법은 무엇입니까? 자세한 코드 설명" ></li>
                <li><img  src="images/top_banner_bw04.jpg"    style="max-width:90%"  style="max-width:90%" alt="네이티브 JavaScript를 사용하여 캐러셀을 구현하는 방법은 무엇입니까? 자세한 코드 설명" ></li>
                <li><img  src="images/top_banner_bw05.jpg"    style="max-width:90%"  style="max-width:90%" alt="네이티브 JavaScript를 사용하여 캐러셀을 구현하는 방법은 무엇입니까? 자세한 코드 설명" ></li>
            </ul>
            <ol id="olnavi"></ol>
        </p>
        <p id="last"></p>
        <p id="next"></p>
    </p>
    <script src="a.js"></script>
</body>
</html>

CSS: 

body, p, p,
h1, h2, h3, h4, h5, h6,
dl, dt, dd, ul, ol, li,
table, caption, th, td,
form, fieldset, input, textarea, select,
pre, address, blockquote,
embed, object {
    margin: 0px;
    padding: 0px;
}

ul, ol {
    list-style:none;
}

img {
    vertical-align: top;
}

.scroll {
    width: 950px;
    height: 438px;
    margin: auto;
    overflow: hidden;
    position: relative;
}

.box {
    width: 950px;
    height: 438px;
    overflow: hidden;
    position: relative;
}

.box ul{
    width: 700%;
    position: absolute;
    left: 0;
    top: 0;
    padding:0px;
    margin:0px;
}

.box ul li{
    float: left;
}

.scroll ol {
    position: absolute;
    right: 365px;
    bottom: 5px;
}

.scroll ol li {
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    margin-left: 10px;
    cursor: pointer;
    opacity: 0.5;
}

.scroll ol li.current {
    background-color: #000099;
    opacity: 0.8;
}

#last {
    position: absolute;
    bottom: 179px;
    width: 80px;
    height: 80px;
    cursor: pointer;
}

#next {
    position: absolute;
    bottom: 179px;
    right: 0px;
    width: 80px;
    height: 80px;
    cursor: pointer;
}

네이티브 JavaScript를 사용하여 캐러셀을 구현하는 방법은 무엇입니까? 자세한 코드 설명

디스플레이 효과는 위와 같습니다

다음으로 js 코드를 설명하겠습니다. 먼저 html

var scroll = document.getElementById("scroll");
var ul = document.getElementById("ul");
var ulLis = ul.children;
var liWidth = ul.children[0].offsetWidth;


에서 요소를 가져옵니다. 그 전에 작은 점은 하드 코딩된 것이 아니라는 점을 이해해야 합니다. ul li에 있는 사진의 수. 

var ol = document.getElementById("olnavi");
for (var i = 0; i < ulLis.length - 2; i++) {
    var li = document.createElement("li");
    li.id = (i + 1);  //id用于后面为li添加事件
    ol.appendChild(li);
    
}
ol.children[0].className = "current" //将第一个小圆点设置为触发状态

원활한 스크롤을 얻으려면 두 장의 사진이 더 필요합니다. 즉, 첫 번째 사진을 복제하여 마지막 사진 뒤에 놓고, 마지막 사진을 복제하여 첫 번째 사진 앞에 놓습니다. 

var num = ulLis.length - 1;
ul.appendChild(ul.children[0].cloneNode(true));
ul.insertBefore(ul.children[num].cloneNode(true), ul.firstChild);

다음으로 왼쪽 및 오른쪽 화살표에 대한 이벤트를 추가합니다. 마우스를 화살표 위에 놓으면 색상이 변경됩니다. 

var last = document.getElementById("last");
last.style.background = "url(images/last-control.png)";

last.addEventListener("mouseenter", function () {
    last.style.background = "url(images/newlast-control.png)";
}, false);

last.addEventListener("mouseleave", function () {
    last.style.background = "url(images/last-control.png)";
}, false);

var next = document.getElementById("next");
next.style.background = "url(images/next-control.png)";

next.addEventListener("mouseenter", function () {
    next.style.background = "url(images/newnext-control.png)";
}, false);

next.addEventListener("mouseleave", function () {
    next.style.background = "url(images/next-control.png)";
}, false);

그런 다음 js를 사용하여 애니메이션을 적용합니다.
1. 클릭하면 어떤 사진이 표시되고 작은 점의 색상도 변경됩니다.
2. 마우스로 왼쪽 및 오른쪽 화살표를 클릭하면 사진이 왼쪽 및 오른쪽으로 이동합니다.
3. 타이머 필요)
4. 사진 위에 마우스를 놓으면 사진이 자동 재생을 중지합니다. (타이머를 지워야 합니다.)
5. 마우스가 사진을 벗어나면 사진이 자동으로 계속 회전합니다(타이머를 다시 시작합니다).
여기서 animate() 애니메이션 기능을 캡슐화합니다

function animate(obj, target) {  //obj为需要移动的元素，在本文中为ul，target为需要移动到的位置
    var speed = obj.offsetLeft < target ? 10 : -10;  //判断速度向左还是向右
    obj.timer = setInterval(function () {  //计时器每隔一定时间移动一次
        var result = target - obj.offsetLeft;  //剩余需要移动的距离
        obj.style.left = obj.offsetLeft + speed + "px";  //改变元素的left来实现移动          
        if (Math.abs(result) <= Math.abs(speed)) {  //当需要移动的距离小于速度时
            clearInterval(obj.timer);   //清除计时器
            obj.style.left = target + "px";  //直接移动到需要移动的位置
            flag = true;  //将flag置为true，使点击事件能再次触发
        }
    }, 1);
}

다음으로 애니메이션 기능을 왼쪽과 오른쪽에 할당합니다. 화살표

var flag = true;  //用于判断上一个事件是否执行完毕，如果没有执行完毕禁止再次触发事件
var index = 1;  //是第几个小圆点
var lastclick = function () {
    if (flag) {
        flag = false;  //进入事件将flag置为false
        console.log(flag);
        if (index === 1) {  //判断是否为第一张
            index = 6;
            ul.style.left = "-5700px";  //当移动到第一张时，再向右移前会替换到最后一张后面的第一张，然后再向右移动。
            animate(ul, ul.offsetLeft + liWidth); //动画函数一次向有移动一个图片长度的距离
        }
        else {
            animate(ul, ul.offsetLeft + liWidth);
        }
        index -= 1; //移动小圆点计数器
        btnShow(index);  //给新的小圆点高亮，取消上一个小圆点的高亮
    }
}
last.addEventListener("click", lastclick, false);  //将函数赋给点击事件

var nextclick = function () {  //向左移与向右移类似
    if (flag) {
        flag = false;
        if (index === 5) {
            index = 0;
            ul.style.left = "0px";
            animate(ul, ul.offsetLeft - liWidth);
        }
        else {
            animate(ul, ul.offsetLeft - liWidth);
        }
        index += 1;
        btnShow(index);
    }
}
next.addEventListener("click",nextclick, false);

function btnShow(cur_index) {
    for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = &#39; &#39;; //取消全部li的类
    }
    ol.children[cur_index - 1].className = "current";  //给新的小圆点加上类
}

와 타이머는 가끔씩 다음 그림의 효과를 트리거하여 캐러셀을 실현합니다

var timer;
function play() {
    timer = setInterval(nextclick, 3000)
}

scroll.addEventListener("load", play(), false);  //整个p全部加载完毕后开始

scroll.addEventListener("mouseenter", function () { //鼠标移入图片是清除计时器
    clearInterval(timer);
}, false);

scroll.addEventListener("mouseleave", function () {  //鼠标移出图片时再次启动计时器
    play();
}, false);

마지막으로 작은 점에 이벤트를 추가하고 Zhang으로 회전할 숫자를 클릭하세요. 

//小圆点的点击事件
var olliclick = function () {
    if (flag) {
        flag = false;
        var cur_li = document.getElementsByClassName("current");
        var lastid = cur_li[0].id;  //当前的小圆点是第几个
        var distance = this.id - lastid;  //计算当前小圆点与点击的小圆点的距离（分正负）
        if (distance == 0) {
            flag = true;
        }
        else {
            animate_ol(ul, distance);
        }
    }
}

//给所有的小圆点添加上点击事件
var ollitimer = 1
var lis = ol.getElementsByTagName(&#39;li&#39;);
for (ollitimer; ollitimer < lis.length+1; ollitimer++) {
    var olli = document.getElementById(ollitimer);
    olli.addEventListener("click", olliclick, false);
}

function animate_ol(obj, value) {  //小圆点动画函数
    if (value > 0) {  //判断移动方向
        var speed = -20*value; //使动画时间一致
    }
    if (value < 0) {
        var speed = -20*value;
    }
    var lastleft = obj.offsetLeft;
    obj.timer = setInterval(function () {
        var distance = Math.abs(value * liWidth) - Math.abs(obj.offsetLeft - lastleft);
        //剩余需要移动的距离
        if (distance < Math.abs(speed)) {
            clearInterval(obj.timer);
            if (value > 0) {
                obj.style.left = obj.offsetLeft - distance + "px";
                flag = true;
            }
            if (value < 0) {
                obj.style.left = obj.offsetLeft + distance + "px";
                flag = true;
            }
        }
        else {
            obj.style.left = obj.offsetLeft + speed + "px";
        }
    }, 1);
    index = index + value;
    btnShow(index);
}

는 일반적인 유령 버그에 대한 요약을 제공합니다.
클릭한 후 플래그를 설정하여 여러 번의 클릭으로 인한 타이머 충돌을 방지합니다. 플래그를 false로 설정한 다음 애니메이션 기능이 끝날 때 이를 true로 설정합니다. 이렇게 하면 두 번째 클릭 이벤트는 이전 클릭 이벤트 애니메이션이 끝난 후에만 트리거될 수 있습니다.

마지막으로 완전한 js 코드를 넣습니다

var scroll = document.getElementById("scroll");
var ul = document.getElementById("ul");
var ulLis = ul.children;
var liWidth = ul.children[0].offsetWidth;

var num = ulLis.length - 1;
ul.appendChild(ul.children[0].cloneNode(true));
ul.insertBefore(ul.children[num].cloneNode(true), ul.firstChild);

var ol = document.getElementById("olnavi");
for (var i = 0; i < ulLis.length - 2; i++) {
    var li = document.createElement("li");
    li.id = (i + 1);
    ol.appendChild(li);
    
}
ol.children[0].className = "current";

var last = document.getElementById("last");
last.style.background = "url(images/last-control.png)";

last.addEventListener("mouseenter", function () {
    last.style.background = "url(images/newlast-control.png)";
}, false);

last.addEventListener("mouseleave", function () {
    last.style.background = "url(images/last-control.png)";
}, false);

var next = document.getElementById("next");
next.style.background = "url(images/next-control.png)";

next.addEventListener("mouseenter", function () {
    next.style.background = "url(images/newnext-control.png)";
}, false);

next.addEventListener("mouseleave", function () {
    next.style.background = "url(images/next-control.png)";
}, false);

var flag = true;
var index = 1;
var lastclick = function () {
    if (flag) {
        flag = false;
        console.log(flag);
        if (index === 1) {
            index = 6;
            ul.style.left = "-5700px";
            animate(ul, ul.offsetLeft + liWidth);
        }
        else {
            animate(ul, ul.offsetLeft + liWidth);
        }
        index -= 1;
        btnShow(index);
    }
}
last.addEventListener("click", lastclick, false);

var nextclick = function () {
    if (flag) {
        flag = false;
        if (index === 5) {
            index = 0;
            ul.style.left = "0px";
            animate(ul, ul.offsetLeft - liWidth);
        }
        else {
            animate(ul, ul.offsetLeft - liWidth);
        }
        index += 1;
        btnShow(index);
    }
}
next.addEventListener("click",nextclick, false);

function btnShow(cur_index) {
    for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = ' ';
    }
    ol.children[cur_index - 1].className = "current";
}

function animate(obj, target) {
    var speed = obj.offsetLeft < target ? 10 : -10;
    obj.timer = setInterval(function () {
        var result = target - obj.offsetLeft;
        obj.style.left = obj.offsetLeft + speed + "px";            
        if (Math.abs(result) <= Math.abs(speed)) {
            clearInterval(obj.timer);
            obj.style.left = target + "px";
            flag = true;
        }
    }, 1);
}

var timer;
function play() {
    timer = setInterval(nextclick, 3000)
}

scroll.addEventListener("load", play(), false);

scroll.addEventListener("mouseenter", function () {
    clearInterval(timer);
}, false);

scroll.addEventListener("mouseleave", function () {
    play();
}, false);

var olliclick = function () {
    if (flag) {
        flag = false;
        var cur_li = document.getElementsByClassName("current");
        var lastid = cur_li[0].id;
        var distance = this.id - lastid;
        if (distance == 0) {
            flag = true;
        }
        else {
            animate_ol(ul, distance);
        }
    }
}
var ollitimer = 1
var lis = ol.getElementsByTagName('li');
for (ollitimer; ollitimer < lis.length+1; ollitimer++) {
    var olli = document.getElementById(ollitimer);
    olli.addEventListener("click", olliclick, false);
}

function animate_ol(obj, value) {
    if (value > 0) {
        var speed = -20*value;
    }
    if (value < 0) {
        var speed = -20*value;
    }
    var lastleft = obj.offsetLeft;
    obj.timer = setInterval(function () {
        var distance = Math.abs(value * liWidth) - Math.abs(obj.offsetLeft - lastleft);
        if (distance < Math.abs(speed)) {
            clearInterval(obj.timer);
            if (value > 0) {
                clearInterval(obj.timer);
                obj.style.left = obj.offsetLeft - distance + "px";
                flag = true;
            }
            if (value < 0) {
                clearInterval(obj.timer);
                obj.style.left = obj.offsetLeft + distance + "px";
                flag = true;
            }
        }
        else {
            obj.style.left = obj.offsetLeft + speed + "px";
        }
    }, 1);
    index = index + value;
    btnShow(index);
}

관련 권장 사항:

회전식 이미지를 구현하는 기본 js

이미지 회전식 효과 코드를 구현하는 기본 자바스크립트

위 내용은 네이티브 JavaScript를 사용하여 캐러셀을 구현하는 방법은 무엇입니까? 자세한 코드 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：ES6의 새로운 구문은 무엇입니까? 빨리 배우세요다음 기사：ES6의 새로운 구문은 무엇입니까? 빨리 배우세요

관련 기사

더보기