Jquery焦点图实例代码

关于Jquery焦点图实例代码的完整攻略，我可以为你详细讲解，具体如下：

一、什么是Jquery焦点图实例代码？

Jquery焦点图实例代码是一种用Jquery编写的网页轮播图效果，它可以轮播多张图片，并提供了控制按钮和轮播提示文字等常见功能。它是一个常见的网站图片展示工具。

二、如何使用Jquery焦点图实例代码？

以下是使用Jquery焦点图实例代码的步骤：

1. 引入必要的JS和CSS文件

在HTML文件中引入jquery.js和jquery.SuperSlide.js等必要的JS文件，并引入SuperSlide的样式CSS文件。

<link rel="stylesheet" href="jquery.SuperSlide.css">
<script src="jquery.js"></script>
<script src="jquery.SuperSlide.js"></script>

2. 创建HTML结构

按照以下HTML结构创建轮播图的框架：

<div class="slider">
    <div class="slider-wrapper">
        <ul class="slider-content">
            <li><img src="image1.jpg" /></li>
            <li><img src="image2.jpg" /></li>
            <li><img src="image3.jpg" /></li>
        </ul>
    </div>
    <div class="slider-control"></div>
</div>

其中，slider为轮播图整体框架，slider-wrapper为轮播图图片容器，slider-content是存放轮播图片的ul列表，slider-control为控制器（左右箭头和圆点）。

3. 编写Jquery代码

在页面加载完成后，用Jquery语言编写轮播图的初始化和事件响应等代码：

$(function() {
    $(".slider-wrapper").slide({
        autoPlay: true,
        mainCell: ".slider-content",
        effect: "fold",
        mouseOverStop: false,
        prevCell: ".slider-control .prev",
        nextCell: ".slider-control .next",
        switchCell: ".slider-control .switch",
        pnLoop: true,
        autoPage: true
    });
});

其中，slide是Jquery插件SuperSlide提供的一个方法，它的参数包括：autoPlay表示轮播是否自动播放；mainCell表示轮播图片的容器；effect表示轮播的效果种类；prevCell、nextCell和switchCell分别是左箭头、右箭头和圆点的Jquery选择器，用于设置左右箭头和圆点的点击事件；pnLoop表示轮播能否循环；autoPage表示是否显示圆点控制器。

三、示例说明

以下是两个Jquery焦点图实例的示例说明：

1. 垂直滚动的焦点图

假如你需要创建一个垂直滚动的焦点图，你可以在Jquery代码中设置effect为"topLoop"，如下：

$(function() {
    $(".slider-wrapper").slide({
        autoPlay: true,
        mainCell: ".slider-content",
        effect: "topLoop",
        mouseOverStop: false,
        prevCell: ".slider-control .prev",
        nextCell: ".slider-control .next",
        switchCell: ".slider-control .switch",
        pnLoop: true,
        autoPage: true
    });
});

2. 无限循环的焦点图

假如你需要创建一个可以无限循环轮播的焦点图，你可以在Jquery代码中设置pnLoop为true，如下：

$(function() {
    $(".slider-wrapper").slide({
        autoPlay: true,
        mainCell: ".slider-content",
        effect: "fold",
        mouseOverStop: false,
        prevCell: ".slider-control .prev",
        nextCell: ".slider-control .next",
        switchCell: ".slider-control .switch",
        pnLoop: true,
        autoPage: true
    });
});

这样，当你到达最后一张图片时，焦点图就会从第一张重新开始轮播。