JavaScript仿商城实现图片广告轮播实例代码

下面就来详细介绍一下“JavaScript仿商城实现图片广告轮播实例代码”的完整攻略。

一、准备工作

在开始编写代码之前，需要准备以下工作：

1. 确定轮播图的样式和布局，一般是将多张图片设置为水平排列，展示在一个容器中。
2. 编写轮播图HTML结构，并设置好样式。
3. 引入jQuery库和相关的插件。

二、实现步骤

1. 在HTML结构中创建轮播图容器和图片容器，设置好相应的样式。

<div class="banner">
  <ul class="banner-imgs">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
    <!-- 其他图片 -->
  </ul>
</div>

1. 使用jQuery选择器获取轮播图容器和图片容器。

var $banner = $('.banner');
var $imgs = $('.banner-imgs li');

1. 设置轮播图自动播放和切换的时间间隔。

var autoPlayInterval = 3000; // 自动播放间隔，单位：毫秒
var switchTime = 500; // 图片切换时间，单位：毫秒

1. 定义当前展示图片的索引值和自动播放定时器。

var currentIndex = 0; // 当前展示图片的索引值
var timer = null; // 自动播放定时器

1. 首先隐藏所有的图片，只展示第一张图片。

$imgs.hide().eq(0).show();

1. 编写轮播图自动播放的函数。

function autoPlay() {
  timer = setInterval(function() {
    // 隐藏当前图片
    $imgs.eq(currentIndex).fadeOut(switchTime);
    // 判断是否到达最后一张图片，如果是则重置为第一张图片
    if (currentIndex === $imgs.length - 1) {
      currentIndex = 0;
    } else {
      currentIndex++;
    }
    // 显示下一张图片
    $imgs.eq(currentIndex).fadeIn(switchTime);
  }, autoPlayInterval);
}

1. 调用自动播放函数，开启自动播放。

autoPlay();

1. 实现鼠标悬停在轮播图上时停止自动播放，鼠标移开时恢复自动播放的效果。

$banner.hover(function() {
  clearInterval(timer); // 停止自动播放
}, function() {
  autoPlay(); // 恢复自动播放
});

1. 实现轮播图的手动切换效果。

$banner.on('click', '.prev', function() {
  // 隐藏当前图片
  $imgs.eq(currentIndex).fadeOut(switchTime);
  // 判断是否到达第一张图片，如果是则重置为最后一张图片
  if (currentIndex === 0) {
    currentIndex = $imgs.length - 1;
  } else {
    currentIndex--;
  }
  // 显示上一张图片
  $imgs.eq(currentIndex).fadeIn(switchTime);
}).on('click', '.next', function() {
  // 隐藏当前图片
  $imgs.eq(currentIndex).fadeOut(switchTime);
  // 判断是否到达最后一张图片，如果是则重置为第一张图片
  if (currentIndex === $imgs.length - 1) {
    currentIndex = 0;
  } else {
    currentIndex++;
  }
  // 显示下一张图片
  $imgs.eq(currentIndex).fadeIn(switchTime);
});

这样就实现了一个简单的图片广告轮播效果。可以根据具体需求来修改样式和效果。

三、示例说明

1. 示例1：在轮播图中添加导航按钮

可以在HTML结构中添加导航按钮：

<div class="banner">
  <ul class="banner-imgs">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
    <!-- 其他图片 -->
  </ul>
  <div class="banner-nav">
    <span class="prev">上一页</span>
    <span class="next">下一页</span>
  </div>
</div>

然后在jQuery代码中添加相应的事件处理函数：

$banner.on('click', '.prev', function() {
  // ...
}).on('click', '.next', function() {
  // ...
}).on('click', '.banner-nav span', function() {
  var index = $(this).index();
  // 隐藏当前图片
  $imgs.eq(currentIndex).fadeOut(switchTime);
  // 根据导航按钮的索引值计算下一张图片的索引值
  if (index === 0) {
    if (currentIndex === 0) {
      currentIndex = $imgs.length - 1;
    } else {
      currentIndex--;
    }
  } else {
    if (currentIndex === $imgs.length - 1) {
      currentIndex = 0;
    } else {
      currentIndex++;
    }
  }
  // 显示下一张图片
  $imgs.eq(currentIndex).fadeIn(switchTime);
});

这样就可以实现通过导航按钮手动切换图片的效果。

1. 示例2：添加自动播放和手动切换的暂停和恢复功能

可以在鼠标悬停在轮播图上时停止自动播放，鼠标移开时恢复自动播放的基础上，添加手动切换暂停和恢复的功能。

$banner.on('click', '.prev', function() {
  clearInterval(timer);
  // ...
  autoPlay(); // 恢复自动播放
}).on('click', '.next', function() {
  clearInterval(timer);
  // ...
  autoPlay(); // 恢复自动播放
}).on('click', '.banner-nav span', function() {
  clearInterval(timer); // 暂停自动播放
  var index = $(this).index();
  // ...
  autoPlay(); // 恢复自动播放
});

这样就可以实现通过按钮手动切换图片时暂停自动播放的效果，手动切换结束后恢复自动播放。