지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > js에서 캐러셀 이미지 재생 효과를 얻는 방법(코드 포함)

js에서 캐러셀 이미지 재생 효과를 얻는 방법(코드 포함)

不言
풀어 주다： 2018-09-01 11:07:20
원래의
3413명이 탐색했습니다.

本篇文章给大家带来的内容是关于js如何实现轮播图播放效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

早前做轮播图的时候，我们习惯在网上找一些现成的例子修改修改使用。现在做轮播图，像bootstrap和iview等前端框架中都有封装好的特效，直接拿过来使用就可以了。但是轮播图是怎么做的呢。下面我们用原生代码来手写一个轮播图的特效。
实现效果如下：（图片来自网络）
js에서 캐러셀 이미지 재생 효과를 얻는 방법(코드 포함)
实现功能如下：

  1. 鼠标划在左半部分出现左箭头切换，鼠标划在右半部分出现右箭头切换。

  2. 点击数字播放，当前播放页数字背景透明度为1，非当前页透明度为0.6

  3. 点击缩略图播放，当前播放页缩略图透明度为1，非当前页缩略头透明度为0.3

  4. 间隔2000ms自动播放（包括图片、数字、缩略图）。

根据前面运动知识，实现代码如下：

我们把前面总结的运动框架封装在move.js中

nbsp;html>

  
    <title>轮播图</title>
    <script></script>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      #switch{
        width: 1400px;
        height: 520px;
        margin:auto;
        position: relative;
        overflow: hidden;
      }
      #switch .bigpic li{
        position: absolute;
        top: 0;
        left: 0;
      }
      #switch .bigpic li:nth-child(1){
        z-index: 2;
      }

      #switch .prev{
        width: 46px;
        height: 46px;
        line-height: 46px;
        color: #fff;
        border-radius: 100%;
        background: rgba(255,255,255,0.6);
        position: absolute;
        top:192px;
        left: 20px;
        border-width: 0;
        filter:alpha(opacity:0);
        opacity:0;
        z-index: 999;
      }
      #switch .next{
        width: 46px;
        height: 46px;
        line-height: 46px;
        color: #fff;
        border-radius: 100%;
        background: rgba(255,255,255,0.6);
        position: absolute;
        top:192px;
        right: 20px;
        border-width: 0;
        filter:alpha(opacity:0);
        opacity:0;
        z-index: 9999;
      }
      #switch .number{
        position: absolute;
        right: 30px;
        top: 390px;
        z-index: 9999;
        list-style: none;
      }
      #switch .number li{
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        background: #fff;
        border-radius: 100%;
        color: #000;
        text-align: center;
        cursor: pointer;
        filter:alpha(opacity:60);
        opacity:0.6;
      }
      #switch .number li:nth-child(1){
        filter:alpha(opacity:100);
        opacity:1.0;
      }
      #switch .mark_left{
        width: 700px;
        height: 430px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9998;
      }
      #switch .mark_right{
        width: 700px;
        height: 430px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 9998;
      }

      .smallimg{
        list-style: none;
        padding:0;
        margin:0;
        position: absolute;
        top: 434px;
        height: 86px;
      }
      .smallimg li{
        width:280px;
        height: 86px;
        float: left;
        filter:alpha(opacity:30);
        opacity:0.3;
      }
      .smallimg li:nth-child(1){
        filter:alpha(opacity:100);
        opacity:1.0;
      }
      .smallimg li img{
        width:280px;
        height: 86px;
      }
    </style>
    <script>
      function getByClass(oParent,sClass){
        var aEle=oParent.getElementsByTagName("*");
        var aResult=[];
        for(var i=0; i<aEle.length; i++){
          if(aEle[i].className===sClass){
            aResult.push(aEle[i]);
          }
        }
        return aResult;
      }
      window.onload=function(){
        var op=document.getElementById("switch");
        var oBtnPrev=getByClass(op,"prev")[0];
        var oBtnNext=getByClass(op,"next")[0];
        var oMarkLeft=getByClass(op,"mark_left")[0];
        var oMarkRight=getByClass(op,"mark_right")[0];
        // 左右按钮
        oBtnPrev.onmouseover=oMarkLeft.onmouseover=function(){
          startMove(oBtnPrev,"opacity",100);
        }
        oBtnPrev.onmouseout=oMarkLeft.onmouseout=function(){
          startMove(oBtnPrev,"opacity",0);
        }
        oBtnNext.onmouseover=oMarkRight.onmouseover=function(){
          startMove(oBtnNext,"opacity",100);
        }
        oBtnNext.onmouseout=oMarkRight.onmouseout=function(){
          startMove(oBtnNext,"opacity",0);
        }
        // 大图切换
        var opNumber=getByClass(op,"number")[0];
        var aNumber=opNumber.getElementsByTagName("li");
        var oBigPic=getByClass(op,"bigpic")[0];
        var aImg=oBigPic.getElementsByTagName("li");
        var aSmallImg=getByClass(op,"smallimg")[0];
        var aSmall=aSmallImg.getElementsByTagName("li");
        var nowZIndex=2;
        var now=0;
        aSmallImg.style.width=aSmall.length*aSmall[0].offsetWidth+"px";
        for(var j=0; j<aNumber.length; j++){
          aNumber[j].index=j;
          aNumber[j].onclick=function(){
            if(this.index===now){
              return;
            }
            now=this.index;
            tab();
          }
          aNumber[j].onmouseover=function(){
            startMove(this,"opacity",100);
          }
          aNumber[j].onmouseout=function(){
            if(this.index!=now){
              startMove(this,"opacity",60);
            }
          }
        }
        for(var m=0; m<aSmall.length; m++){
          aSmall[m].index=m;
          aSmall[m].onclick=function(){
            if(this.index===now){
              return;
            }
            now=this.index;
            tab();
          }
          aSmall[m].onmouseover=function(){
            startMove(this,"opacity",100);
          }
          aSmall[m].onmouseout=function(){
            console.log(this.index);
            console.log(now);
            if(this.index!=now){
              startMove(this,"opacity",30);
            }
          }
        }
        function tab(){
          aImg[now].style.zIndex=nowZIndex++;
          for(var i=0; i<aNumber.length; i++){
            startMove(aNumber[i],"opacity",60);
          }
          for(var i=0; i<aSmall.length; i++){
            startMove(aSmall[i],"opacity",30);
          }

          startMove(aNumber[now],"opacity",100);
          startMove(aSmall[now],"opacity",100);
          aImg[now].style.height=0;
          startMove(aImg[now],"height",430);
          // if(now===0){
          //   startMove(aSmallImg,"left",0);
          // }else if(now===aSmall.length-1){
          //   startMove(aSmallImg,"left",-(now-2)*aSmall[0].offsetWidth);
          // }else{
          //   startMove(aSmallImg,"left",-(now-1)*aSmall[0].offsetWidth);
          // }
          if(now===0){//根据不同的规则设置不同的if
            startMove(aSmallImg,"left",0);
          }else if(now===aSmall.length-1){
            startMove(aSmallImg,"left",-(now-4)*aSmall[0].offsetWidth);
          }
        }
        oBtnPrev.onclick=function(){
          now--;
          if(now===-1){
            now=aImg.length-1;
          }
          tab();
        }
        oBtnNext.onclick=function(){
          now++;
          if(now===aImg.length){
            now=0;
          }
          tab();
        }
        var timer=setInterval(oBtnNext.onclick,2000);
        op.onmouseover=function(){
          clearInterval(timer);
        }
        op.onmouseout=function(){
          timer=setInterval(oBtnNext.onclick,2000);
        }
      }
    </script>
  
  
    <p>
      </p>
로그인 후 복사
            
  • js에서 캐러셀 이미지 재생 효과를 얻는 방법(코드 포함)
    •         
  • js에서 캐러셀 이미지 재생 효과를 얻는 방법(코드 포함)
    •         
  • js에서 캐러셀 이미지 재생 효과를 얻는 방법(코드 포함)
    •         
  • js에서 캐러셀 이미지 재생 효과를 얻는 방법(코드 포함)
    •         
  • js에서 캐러셀 이미지 재생 효과를 얻는 방법(코드 포함)
    •         
  • js에서 캐러셀 이미지 재생 효과를 얻는 방법(코드 포함)
    •       
             

      

      
            
  • 1
    •         
  • 2
    •         
  • 3
    •         
  • 4
    •         
  • 5
    •         
  • 6
    •       
      
            
  • js에서 캐러셀 이미지 재생 효과를 얻는 방법(코드 포함)
    •         
  • js에서 캐러셀 이미지 재생 효과를 얻는 방법(코드 포함)
    •         
  • js에서 캐러셀 이미지 재생 효과를 얻는 방법(코드 포함)
    •         
  • js에서 캐러셀 이미지 재생 효과를 얻는 방법(코드 포함)
    •         
  • js에서 캐러셀 이미지 재생 효과를 얻는 방법(코드 포함)
    •         
  • js에서 캐러셀 이미지 재생 효과를 얻는 방법(코드 포함)
    •       
       

move.js

function getStyle(obj,name){
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }
  else{
    return getComputedStyle(obj,false)[name];
  }
}

function startMove(obj, attr, iTarget) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var cur=0;
    if(attr==="opacity"){
      cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能会出现误差0.07*100
    }
    else{
      cur=parseInt(getStyle(obj,attr));
    }
    var speed = (iTarget - cur) / 6;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if (cur === iTarget) {
      clearInterval(obj.timer);
    } else {
      if(attr==="opacity"){
        obj.style.filter="alpha(opacity:"+cur+speed+")";
        obj.style.opacity=(cur+speed)/100;
      }else{
        obj.style[attr]=cur+speed+"px";
      }
    }
  }, 30)
}
로그인 후 복사

相关推荐：

javaScript 手写图片轮播

纯JavaScript手写图片轮播代码


위 내용은 js에서 캐러셀 이미지 재생 효과를 얻는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
javascript 회전목마
원천：php.cn
이전 기사：자바스크립트의 카운트다운 원리와 예시 소개(코드) 다음 기사：js의 함수 및 ES6 화살표 함수에 대한 자세한 분석
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿