1. 首页
  2. 编程语言
  3. Web开发
  4. jQuery宽屏图片旋转木马轮播

jQuery宽屏图片旋转木马轮播

上传者: 2025-05-26 12:58:41上传 ZIP文件 472.03KB 热度 1次

jQuery 的 QQ 音乐宽屏旋转木马轮播,属于那种视觉冲击力比较强的图片展示效果,适合做专辑封面、活动海报展示。大图轮播走的是宽屏风格,配上fadeInfadeOut这些过渡,效果还蛮顺滑的。用setInterval搞个定时切换,加上左右按钮和点点导航,体验会更完整。

轮播容器直接用#carousel包住图片,CSS 里把overflow: hidden设好,初始只露一张。要做淡入淡出,直接用 jQuery 的.fadeOut().fadeIn()就行,代码也不复杂:

function slide() {
  $('#carousel .active').fadeOut(speed, function() {
    $(this).removeClass('active')
      .next('img').addClass('active')
      .fadeIn(speed);
    if ($(this).is(':last-child')) {
      $('#carousel img:first').addClass('active');
    }
  });
}
setInterval(slide, speed);

还有一点别忘了——宽屏样式在手机上容易出锅,最好搭个@media做点响应式。至于资源包texiao1248_1560681046,直接解压能看到源码、样式、图片,想用就改,挺方便的。

如果你想快速上个视觉感强一点的轮播图模块,这套还蛮合适,代码清爽,调起来也省心。

下载地址
用户评论