jQuery带缩略图滑动幻灯片效果实例

jQuery带缩略图滑动幻灯片效果(jquery仿QQ商城焦点图滚动特效实例代码)
基于jQuery实现的图片滑动幻灯片效果，有两个Demo。

创建一个基于jQuery的带缩略图的滑动幻灯片效果，通常需要以下几个步骤：

1. HTML结构：定义幻灯片的容器和缩略图的容器。

```html

<div id="slideshow">

    <div class="slides">

        <!-- 幻灯片图片 -->

        <div class="slide"><img src="image1.jpg" alt="Image 1"></div>

        <div class="slide"><img src="image2.jpg" alt="Image 2"></div>

        <div class="slide"><img src="image3.jpg" alt="Image 3"></div>

        <!-- 更多幻灯片图片 -->

    </div>

    <div class="thumbnails">

        <!-- 缩略图 -->

        <div class="thumbnail"><img src="thumb1.jpg" alt="Thumbnail 1"></div>

        <div class="thumbnail"><img src="thumb2.jpg" alt="Thumbnail 2"></div>

        <div class="thumbnail"><img src="thumb3.jpg" alt="Thumbnail 3"></div>

        <!-- 更多缩略图 -->

    </div>

</div>

```

2. CSS样式：设置幻灯片和缩略图的样式。

```css

#slideshow {

    position: relative;

}

.slides, .thumbnails {

    overflow: hidden;

}

.slide, .thumbnail {

    float: left;

    position: relative;

    / 根据需要设置宽度和高度 /

    width: 100%;

    height: auto;

}

.thumbnail img {

    cursor: pointer;

}

```

3. jQuery脚本：编写用于控制幻灯片切换和缩略图点击的脚本。

```javascript

$(document).ready(function() {

    var currentSlide = 0;

    var slideInterval = 3000; // 幻灯片切换间隔时间，单位毫秒

    var slides = $('.slides .slide');

    var thumbnails = $('.thumbnails .thumbnail');

    // 初始化幻灯片

    function initSlides() {

        slides.hide();

        slides.eq(currentSlide).fadeIn();

    }

    // 切换到下一张幻灯片

    function nextSlide() {

        slides.eq(currentSlide).fadeOut(function() {

            currentSlide = (currentSlide + 1) % slides.length;

            slides.eq(currentSlide).fadeIn();

        });

    }

    // 根据缩略图索引切换幻灯片

    function goToSlide(index) {

        slides.eq(currentSlide).fadeOut(function() {

            currentSlide = index;

            slides.eq(currentSlide).fadeIn();

        });

    }

    // 初始化幻灯片

    initSlides();

    // 定时切换幻灯片

    setInterval(nextSlide, slideInterval);

    // 缩略图点击事件

    thumbnails.click(function() {

        var index = thumbnails.index($(this));

        goToSlide(index);

    });

});

```

这个基本示例展示了如何创建一个简单的幻灯片效果，其中包含自动切换和通过点击缩略图来切换幻灯片的功能。你可以根据需要调整样式和功能，比如添加动画效果、控制按钮等。

jquery仿QQ商城焦点图滚动特效，jquery幻灯片展示效果，jQuery带缩略图滑动幻灯片效果，CSS3+jQuery图标抖动效果，