How to Build a Simple jQuery Image Slider with Sliding and Opacity Effects?-CSS Tutorial-php.cn

How to Build a Simple jQuery Image Slider with Sliding and Opacity Effects?

Linda Hamilton

Release： 2024-11-24 15:43:32

Original

912 people have browsed it

How to Build a Simple jQuery Image Slider with Sliding and Opacity Effects?

Building a Simple jQuery Image Slider with Sliding and Opacity Effects

Creating a custom image slider in jQuery without relying on external plugins provides greater flexibility and control. Here's a simplified approach that offers both sliding and opacity transition effects.

jQuery Functions for Traversing and Manipulation

Before diving into the code, understanding two key jQuery functions is essential:

index() returns the position of an element within its sibling elements.
eq() selects an element based on its position (index value).

Opacity Effect

In the opacity effect, images are positioned absolutely and overlapped using CSS. When a trigger element is clicked, the corresponding image fades in while others fade out, relying on jQuery's fadeIn() and fadeOut() functions.

Sliding Effect

For the sliding effect, we use a double wrapper and mask technique. The images are placed inside a masked area, and a specific image is revealed by sliding the mask over it, giving the illusion of a sliding transition.

Common jQuery Response

Both the opacity and sliding effects share a common jQuery response that handles triggers (navigation elements), next/previous click events, and automatic timing transitions.

HTML Structure

<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>
<span class="control prev">Prev</span>
<span class="control next">Next</span>

Copy after login

Opacity Effect Code

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

Copy after login

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

Sliding Effect Code

.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden;  }
ul.images { position:relative; top:0px;left:0px; }
/* this width must be total of the images, it comes from jquery */
    ul.images li { float:left; }

Copy after login

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(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 codebase provides a fully functional jQuery image slider with sliding and opacity transition effects, customizable through CSS and various jQuery functions.

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