3D轮播替换动态图片链接后重复显示单张图片问题求助

问题原因 #

修改后仅显示同一张图的核心原因是没有用轮播单元的索引参数i匹配不同的图片地址，导致所有轮播单元绑定了同一个URL。原代码默认配置适配10张轮播图，你准备了9张图，需要同步调整角度参数避免错位。 #

修复步骤 #

1. 调整DOM结构 #

删除.ring容器内最后1个多余的<div class="img"></div>，保留9个轮播单元和你的图片数量匹配。

2. 替换JS逻辑 #

将原script标签内的代码替换为如下内容即可：

// 自定义图片数组，可替换为本地图片路径
const imgList = [
  '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%20(1).png',
  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRB9VVgVQhCfCnD7udlz3tJnAR61x76JZ3Ftw&usqp=CAU'
]
let xPos = 0;

gsap.timeline()
    .set('.ring', { rotationY:180, cursor:'grab' })
    .set('.img',  {
      // 9张图每张间隔40度（360/9=40）
      rotateY: (i)=> i*-40,
      transformOrigin: '50% 50% 1600px',
      z: -1600,
      // 按索引取对应图片地址
      backgroundImage: (i)=> `url(${imgList[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){
  // 同步修改角度参数为40
  return ( 100-gsap.utils.wrap(0,360,gsap.getProperty('.ring', 'rotationY')-180-i*40)/360*500 )+'px 0px';
}

本地图片替换说明 #

如果要用本地图片，直接把imgList数组内的在线链接替换为本地图片路径即可，比如./images/xxx.jpg。 #

内容的提问来源于stack exchange，提问作者Yash Chitroda