How to Build a Simple jQuery Image Slider with Fade or Slide Effects?-CSS Tutorial-php.cn

How to Build a Simple jQuery Image Slider with Fade or Slide Effects?

Linda Hamilton

Release： 2024-12-07 07:13:18

Original

384 people have browsed it

How to Build a Simple jQuery Image Slider with Fade or Slide Effects?

Creating a Simple jQuery Image Slider with Opacity or Sliding Effects

While using pre-built plugins can be convenient, they can also add unnecessary weight and introduce potential conflicts with existing code. This article demonstrates how to create a simple and customizable jQuery image slider from scratch.

jQuery Basics

Before proceeding, it's important to understand two key jQuery functions:

index() returns the position of the first element in a jQuery object relative to its siblings.
eq() selects an element based on its index value.

Slider Effects

This slider supports both opacity and sliding effects:

1. FadeIn / FadeOut Effect

HTML:

<ul class="images">
  <li>
    <img src="images/1.jpg" alt="1" />
  </li>
  <li>
    <img src="images/2.jpg" alt="2" />
  </li>
  ...
</ul>

<ul class="triggers">
  <li>1</li>
  <li>2</li>
  ...
</ul>

Copy after login

CSS:

ul.images {
  position: relative;
}
ul.images li {
  position: absolute;
}

Copy after login

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length - 1;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
  images.fadeOut(300).eq(target).fadeIn(300);
  triggers.removeClass('active').eq(target).addClass('active');
}

Copy after login

2. Sliding Effect

HTML: Same as FadeIn/FadeOut effect

CSS:

.mask {
  float: left;
  margin: 40px;
  width: 270px;
  height: 266px;
  overflow: hidden;
}
ul.images {
  position: relative;
  top: 0px;
  left: 0px;
}
/* This width must be the total width of the images, calculated with jQuery. */
ul.images li {
  float: left;
}

Copy after login

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length - 1;
var mask = $('.mask ul.images');
var imgWidth = images.width();

triggers.first().addClass('active');
mask.css('width', imgWidth * (lastElem + 1) + 'px');

function sliderResponse(target) {
  mask.stop(true, false).animate({ 'left': '-' + imgWidth * target + 'px' }, 300);
  triggers.removeClass('active').eq(target).addClass('active');
}

Copy after login

Common jQuery Response

Triggers, Click Events, and Timing:

triggers.click(function() {
  if (!$(this).hasClass('active')) {
    target = $(this).index();
    sliderResponse(target);
    resetTiming();
  }
});

$('.next').click(function() {
  target = $('ul.triggers li.active').index();
  target === lastElem ? target = 0 : target = target + 1;
  sliderResponse(target);
  resetTiming();
});

$('.prev').click(function() {
  target = $('ul.triggers li.active').index();
  lastElem = triggers.length - 1;
  target === 0 ? target = lastElem : target = target - 1;
  sliderResponse(target);
  resetTiming();
});

function sliderTiming() {
  target = $('ul.triggers li.active').index();
  target === lastElem ? target = 0 : target = target + 1;
  sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); }, 5000);

function resetTiming() {
  clearInterval(timingRun);
  timingRun = setInterval(function() { sliderTiming(); }, 5000);
}

Copy after login

This complete solution allows for customization of the slider's appearance and functionality to meet specific needs. The opacity and sliding effects can be easily interchanged to create different looks. Additionally, the slider can be controlled through triggers, next/prev buttons, and even automated with a timing function.

The above is the detailed content of How to Build a Simple jQuery Image Slider with Fade or Slide Effects?. For more information, please follow other related articles on the PHP Chinese website!