用jQuery实现焦点图轮播（底部是小圆点）

最新推荐文章于 2024-04-23 09:41:53 发布

java_zhaoyanli

最新推荐文章于 2024-04-23 09:41:53 发布

阅读量7.8k

点赞数

分类专栏： myWork--

本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/52087565

版权

本文详细介绍了如何使用jQuery库创建一个带有底部小圆点导航的焦点图轮播效果，包括图片切换、小圆点动态更新及交互功能的实现。

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

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片轮播 </title>
    <style type="text/css">
        body, div, ul, li, a, img {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        #wrapper {
            position: relative;
            margin: 30px auto;
            width: 400px;
            height: 200px;
        }

        #banner {
            position: relative;
            width: 400px;
            height: 200px;
            overflow: hidden;
        }

        .imgList {
            position: relative;
            width: 2000px;
            height: 200px;
            z-index: 10;
            overflow: hidden;
        }

            .imgList li {
                float: left;
                display: inline;
            }

        #prev,
        #next {
            position: absolute;
            top: 80px;
            z-index: 20;
            cursor: pointer;
            opacity: 0.2;
            filter: alpha(opacity=20

最低0.47元/天解锁文章

java_zhaoyanli

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
用jQuery实现焦点图轮播（底部是小圆点）

图片轮播 body, div, ul, li, a, img { margin: 0; padding: 0; } ul, li { list-style: none; } a { text-decorati
复制链接

扫一扫