無法在輪播中插入本地影像-有解無憂

我用這個形象的作業我旋轉木馬已經得到這個代碼，但是有這個代碼的catch，我想要的是插入9鮮明無論是 本地影像/影像的URL這樣的邏輯，而不是https://picsum.photos/id/' (i 32) '/600/400/在backgroundImage:(i)=> ，但在更換上面https://有鏈接或者 區域影像/影像 url只有一個類似的影像顯示出來，我不知道如何添加在輪播中不重復的不同影像

例如，我想插入的影像

圖片 1 - https://cdn.pixabay.com/photo/2017/01/08/13/58/cube-1963036__340.jpg

圖片 2 - https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg

圖片 3 - https://cdn.pixabay.com/photo/2015/03/17/02/01/cubes-677092__480.png

圖 4 - https://www.destructoid.com/wp-content/uploads/2021/09/Lost-in-Random-Shadowman-screenshot.jpg

圖 5 - https://static1.srcdn.com/wordpress/wp-content/uploads/2021/03/Among-Us-Random-Name-Generator.jpg

圖 6 - https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTL71W2u3jfYvvp2MXCfvVwHoyM-cioxCZkA&usqp=CAU

圖 7 - https://files.realpython.com/media/random_data_watermark.576078a4008d.jpg

圖 8 - https://uploads-ssl.webflow.com/5a9ee6416e90d20001b20038/5f248ec98e860a09db602367_random-object-generator (1).png

圖 9 - https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRB9VVGVQhCfCnD7udlz3tJnAR61x76JZ3Ftw&usqp=CAU

    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>scrolling</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<style type="text/css">
  html, body, .stage, .ring, .img {
  width:100%;
  height: 100%;
  transform-style: preserve-3d;
  user-select:none;
}

html, body, .stage {
  overflow:hidden;
  background:#000;
  
}

div, svg {
  position: absolute;
}

.container {
  perspective: 2000px;
  width: 1000px;
  height: 500px;  
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
</style>
<body>
<!-- partial:index.partial.html -->
<div class="stage">
  
  
<div class="container">
  <div class="ring">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
  </div>
</div>

</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js'></script>
<script>
  let xPos = 0;

gsap.timeline()
    .set('.ring', { rotationY:180, cursor:'grab' }) //set initial rotationY so the parallax jump happens off screen
    .set('.img',  { // apply transform rotations to each image
      rotateY: (i)=> i*-36,
      transformOrigin: '50% 50% 1600px',
      z: -1600,
      backgroundImage:(i)=>'url(https://picsum.photos/id/' (i 32) '/600/400/)',
      backgroundPosition:(i)=>getBgPos(i),
      backfaceVisibility:'hidden'
    })    
    .from('.img', {
      duration:1.5,
      y:200,
      opacity:0,
      stagger:0.1,
      ease:'expo'
    })
    .add(()=>{
      $('.img').on('mouseenter', (e)=>{
        let current = e.currentTarget;
        gsap.to('.img', {opacity:(i,t)=>(t==current)? 1:0.5, ease:'power3'})
      })
      $('.img').on('mouseleave', (e)=>{
        gsap.to('.img', {opacity:1, ease:'power2.inOut'})
      })
    }, '-=0.5')

$(window).on('mousedown touchstart', dragStart);
$(window).on('mouseup touchend', dragEnd);
      

function dragStart(e){ 
  if (e.touches) e.clientX = e.touches[0].clientX;
  xPos = Math.round(e.clientX);
  gsap.set('.ring', {cursor:'grabbing'})
  $(window).on('mousemove touchmove', drag);
}


function drag(e){
  if (e.touches) e.clientX = e.touches[0].clientX;    

  gsap.to('.ring', {
    rotationY: '-='  ( (Math.round(e.clientX)-xPos)%360 ),
    onUpdate:()=>{ gsap.set('.img', { backgroundPosition:(i)=>getBgPos(i) }) }
  });
  
  xPos = Math.round(e.clientX);
}


function dragEnd(e){
  $(window).off('mousemove touchmove', drag);
  gsap.set('.ring', {cursor:'grab'});
}


function getBgPos(i){ //returns the background-position string to create parallax movement in each image
  return ( 100-gsap.utils.wrap(0,360,gsap.getProperty('.ring', 'rotationY')-180-i*36)/360*500 ) 'px 0px';
}



</script>
</body>
</html>

uj5u.com熱心網友回復：

請檢查示例。有幾個編輯：

更新樣式 .img { background-repeat: no-repeat; background-size: cover; background-position: 50% 50% !important;}
10張圖片的集合const images = [...]- 添加了一張新圖片 - “http://placehold.it/1263x710”，請將其更改為適當的
backgroundImage 的更新：(i)=>url("${images[i]}")

let xPos = 0;
  const images = [
    "https://cdn.pixabay.com/photo/2017/01/08/13/58/cube-1963036__340.jpg",
"https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg",
"https://cdn.pixabay.com/photo/2015/03/17/02/01/cubes-677092__480.png",
"https://www.destructoid.com/wp-content/uploads/2021/09/Lost-in-Random-Shadowman-screenshot.jpg",
"https://static1.srcdn.com/wordpress/wp-content/uploads/2021/03/Among-Us-Random-Name-Generator.jpg",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTL71W2u3jfYvvp2MXCfvVwHoyM-cioxCZkA&usqp=CAU",
"https://files.realpython.com/media/random_data_watermark.576078a4008d.jpg",
"https://uploads-ssl.webflow.com/5a9ee6416e90d20001b20038/5f248ec98e860a09db602367_random-object-generator (1).png",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRB9VVgVQhCfCnD7udlz3tJnAR61x76JZ3Ftw&usqp=CAU",
"http://placehold.it/1263x710"
  ]

gsap.timeline()
    .set('.ring', { rotationY:180, cursor:'grab' }) //set initial rotationY so the parallax jump happens off screen
    .set('.img',  { // apply transform rotations to each image
      rotateY: (i)=> i*-36,
      transformOrigin: '50% 50% 1600px',
      z: -1600,
      backgroundImage:(i)=>`url("${images[i]}")`,
      backgroundPosition:(i)=>getBgPos(i),
      backfaceVisibility:'hidden'
    })
    .from('.img', {
      duration:1.5,
      y:200,
      opacity:0,
      stagger:0.1,
      ease:'expo'
    })
    .add(()=>{
      $('.img').on('mouseenter', (e)=>{
        let current = e.currentTarget;
        gsap.to('.img', {opacity:(i,t)=>(t==current)? 1:0.5, ease:'power3'})
      })
      $('.img').on('mouseleave', (e)=>{
        gsap.to('.img', {opacity:1, ease:'power2.inOut'})
      })
    }, '-=0.5')

$(window).on('mousedown touchstart', dragStart);
$(window).on('mouseup touchend', dragEnd);


function dragStart(e){
  if (e.touches) e.clientX = e.touches[0].clientX;
  xPos = Math.round(e.clientX);
  gsap.set('.ring', {cursor:'grabbing'})
  $(window).on('mousemove touchmove', drag);
}


function drag(e){
  if (e.touches) e.clientX = e.touches[0].clientX;

  gsap.to('.ring', {
    rotationY: '-='  ( (Math.round(e.clientX)-xPos)%360 ),
    onUpdate:()=>{ gsap.set('.img', { backgroundPosition:(i)=>getBgPos(i) }) }
  });

  xPos = Math.round(e.clientX);
}


function dragEnd(e){
  $(window).off('mousemove touchmove', drag);
  gsap.set('.ring', {cursor:'grab'});
}


function getBgPos(i){ //returns the background-position string to create parallax movement in each image
  return ( 100-gsap.utils.wrap(0,360,gsap.getProperty('.ring', 'rotationY')-180-i*36)/360*500 ) 'px 0px';
}

html, body, .stage, .ring, .img {
  width:100%;
  height: 100%;
  transform-style: preserve-3d;
  user-select:none;
}

html, body, .stage {
  overflow:hidden;
  background:#000;

}

div, svg {
  position: absolute;
}

.container {
  perspective: 2000px;
  width: 1000px;
  height: 500px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50% !important;
}

  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<div class="stage">


<div class="container">
  <div class="ring">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
  </div>
</div>

</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/368048.html

標籤：javascript 图片旋转木马源文件

上一篇：螢屏尺寸變化時如何保持影像原位？HMTL/CSS

下一篇：影像到十六進制三元組（任何語言）