Implement sliding lun with jQuery

With the popularity of mobile devices and the popularity of sliding carousels, using jQuery to implement sliding carousels has become one of the inevitable tasks of front-end development. This article will introduce you to how to use jQuery to implement a sliding carousel. I hope it will be helpful to your front-end development.

1. HTML structure

First, we need to build the basic HTML structure. In this example, we need a container that wraps the image, and a container that contains the navigation points. The code is as follows:

<div class="slider">
  <ul class="slider-wrapper">
    <li class="slider-item"><img  src="/static/imghwm/default1.png"  data-src="image1.jpg"  class="lazy" alt="Implement sliding lun with jQuery" ></li>
    <li class="slider-item"><img  src="/static/imghwm/default1.png"  data-src="image2.jpg"  class="lazy" alt="Implement sliding lun with jQuery" ></li>
    <li class="slider-item"><img  src="/static/imghwm/default1.png"  data-src="image3.jpg"  class="lazy" alt="Implement sliding lun with jQuery" ></li>
    <!-- 更多图片 -->
  </ul>
  <ul class="slider-nav">
    <li class="slider-nav-item active"></li><!-- 第一个导航点默认选中 -->
    <li class="slider-nav-item"></li>
    <li class="slider-nav-item"></li>
    <!-- 更多导航点 -->
  </ul>
</div>

2. CSS style

Next, we need to set the CSS style for the carousel image. First, we need to set the width and height of the container containing the image, and hide the overflow part of the container. The code is as follows:

.slider {
  position: relative;
  height: 400px;
  overflow: hidden;
}
.slider-wrapper {
  position: relative;
  width: 300%;
  height: 400px; /* 需要与.slider一致 */
  left: 0;
}
.slider-item {
  position: relative;
  float: left;
  width: 33.3333%;
  height: 400px; /* 需要与.slider一致 */
}

Next, we need to set the CSS style for the navigation point. The code is as follows:

.slider-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  text-align: center;
}
.slider-nav-item {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.slider-nav-item.active {
  background-color: #f00;
}

3. JavaScript code

Finally, we need to use jQuery to implement the carousel chart. First, we need to define some variables, including the index of the current carousel image (index), the container containing the image ($wrapper), the navigation point container ($nav), the navigation point ($navItems) and the number of carousel images (imgCount ). The code is as follows:

var index = 0;
var $wrapper = $('.slider-wrapper');
var $nav = $('.slider-nav');
var $navItems = $nav.find('.slider-nav-item');
var imgCount = $wrapper.find('.slider-item').length;

Next, we need to define a function to automatically play the carousel image. The implementation method of this function is to continuously update the index of the current carousel image and let the container containing the image move the corresponding distance. The code is as follows:

function autoplay() {
  index++;
  if (index >= imgCount) {
    index = 0;
  }
  $wrapper.animate({
    left: '-' + (index * 100) + '%'
  }, 500);
  $navItems.eq(index).addClass('active').siblings().removeClass('active');
}

Finally, we need to define a timer to allow the carousel to automatically play within a certain interval. The code is as follows:

var intervalId = setInterval(autoplay, 3000);

If the user clicks on the navigation point, the timer needs to be canceled and the carousel chart jumps to the corresponding position. The code is as follows:

$navItems.on('click', function() {
  clearInterval(intervalId);
  index = $(this).index();
  $wrapper.animate({
    left: '-' + (index * 100) + '%'
  }, 500);
  $navItems.eq(index).addClass('active').siblings().removeClass('active');
  intervalId = setInterval(autoplay, 3000);
});

4. Summary

When using jQuery to implement a sliding carousel chart, you need to pay attention to the following points:

1. The HTML structure must contain all carousels Containers for images and navigation points, and HTML elements for images and navigation points.
2. CSS styles need to set the width and height of the container containing the image, and hide the overflow part of the container.
3. You must define variables such as the index of the carousel image, the container containing the image, the navigation point container, the number of navigation points and the carousel image.
4. The automatic playback carousel function needs to continuously update the index of the current carousel so that the container containing the image moves the corresponding distance.
5. A timer must be used to allow the carousel to play automatically within a certain interval.
6. If the user clicks on the navigation point, the timer needs to be canceled and the carousel chart jumps to the corresponding position.

The above is the detailed content of Implement sliding lun with jQuery. For more information, please follow other related articles on the PHP Chinese website!