固定尺寸轮播图（插件版&可以链式调用）

最新推荐文章于 2024-07-17 00:08:06 发布

豆i浆

最新推荐文章于 2024-07-17 00:08:06 发布

阅读量1k

点赞数 1

分类专栏： jQuery 文章标签：插件轮播图 jQuery

本文链接：https://blog.csdn.net/sinat_19327991/article/details/54799646

版权

本文介绍如何使用jQuery创建一个固定尺寸的轮播图插件，并演示其效果。通过链式调用的方式设置和初始化CSS文件，实现轮播图的无缝切换。

摘要由CSDN通过智能技术生成

效果展示

这里写图片描述

html

<!DOCTYPE html>
<!--声明 本页面语言为中文-->
<html lang="en">
<head>
    <!--使用编码为 utf-8 -->
    <meta charset="UTF-8">
    <title>固定尺寸 轮播图</title>
    <!--全局初始化样式-->
    <link rel="stylesheet" href="css/css.css">
    <!--轮播图样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="lunbo">
    <div class="con">
        <!--轮播图主体-->
        <ul class="img_con">
            <li><a href="#"><img src="img/1.jpg" alt="1图"></a></li>
            <li><a href="#"><img src="img/2.jpg" alt="2图"></a></li>
            <li><a href="#"><img src="img/3.jpg" alt="3图"></a></li>
            <li><a href="#"><img src="img/4.jpg" alt="4图"></a></li>
            <li><a href="#"><img src="img/5.jpg" alt="5图"></a></li>
        </ul>
        <!--焦点元素-->
        <ul class="img_jiao">
            <li class="on"></li>
            <li></li>
            <