层级轮播图

最新推荐文章于 2022-08-29 10:15:34 发布
最新推荐文章于 2022-08-29 10:15:34 发布
阅读量119 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/houjiie/p/6032427.html
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul, ol {
            list-style: none;
        }

        .wrap {
            width: 650px;
            height: 250px;
            margin: 100px auto 0;
            position: relative;
            overflow: hidden;
        }
        .wrap ol {
            margin-top: 50px;
        }

        .wrap img {
            display: block;
        }

        .wrap ul {
            height: 250px;
            z-index: 1;
            position: relative;
        }

        .wrap ol {
            height: 30px;
            z-index: 2;
            position: absolute;
            bottom: 0;
            right: 0;
           
        }

        .wrap > ul > li {
            position: absolute;
            top: 0;
            left: 0;
        }

        .wrap > ol > li {
            float: left;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border: 1px solid white;
          
           border-radius: 10px;
            background: Gray;
           
        }

        .wrap > ol > li:hover {
            cursor: pointer;
        }

        .wrap li.active {
            padding: 1px;
            color: orange;
            margin-top: -2px;
           
            border: 1px solid orange;
            
        }
    </style>
  <script type="text/javascript" src="jquery-1.11.1.min.js" ></script>
    <script>
        $(document).ready(function () {
            var zIndex = 0;
            $(".wrap > ol > li").mouseenter(function () {
                zIndex++;
                $(this).addClass("active").siblings().removeClass("active");
                $(".wrap > ul > li")
                        .eq($(this).index())
                        .css({
                            "z-index": zIndex,
                            "left": 650
                        })
                        .animate({
                            "left": 0
                        }, 1000);
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li style="z-index:1;"><img src="img/1.jpg" alt=""/></li>
        <li><img src="img/2.jpg" alt=""/></li>
        <li><img src="img/3.jpg" alt=""/></li>
        <li><img src="img/4.jpg" alt=""/></li>
        <li><img src="img/5.jpg" alt=""/></li>
    </ul>
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/houjiie/p/6032427.html

weixin_30532369
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分层轮播图
11-15
分层轮播图，当前层在最前面，有两个，原生js和基于jq的，欢迎大家自己下载使用
js--层级轮播图
weixin_52283867的博客
06-07 255
前言 这个是继我前面讲的水平轮播图后的层级轮播图，这个会更加实用以及没有bug！ 代码 <div class="smallbox"> <div class="slide"> <ul class="ad"> <li> <a href="#"><img src="./img/slide1.jpg" class="slide1">&
jQuery实现层级轮播图
车联网开发的博客
08-18 1032
涉及技术栈 动态改变宽度、自定义动画、动态设置z-index值。 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;层级轮播图&lt;/title&gt; &lt;style&gt; *{ margin:
jQuery实现的层级轮播图
weixin_34194087的博客
01-01 256
1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head lang="en"&gt; 4 &lt;meta charset="UTF-8"&gt; 5 &lt;title&gt;&lt;/title&gt; 6 &lt;style type="text/css&qu
前端重要组件--轮播图的详细教程（层级轮播图和水平轮播图）（极其详细，建议收藏）
zzh的博客
10-29 4350
最近前端学习中遇到了网页中一个极为重要的组件，轮播图，并且尝试用代码做了两种类型的轮播图，其一层级轮播图，是纯html+css3，和少量js，其二，水平轮播图，这个也是最常见的轮播图，用到了js的部分知识，定时器什么的，主要用了jquery实现。 层级轮播图 1，首先制作轮播图的一般步骤是先搞一个div盒子装轮播图，div里面是一个无序列表，列表中的li就是一张张图片，接着和ul列表同级，并且是d...
原生js实现轮播图特效
10-15
3. 图片切换时，下方的小圆点指示器应同步更新。 4. 小圆点可作为快捷方式，点击后直接跳转到对应图片。 5. 在无鼠标交互时，轮播图应能自动播放。 6. 鼠标悬停时，自动播放停止。 为了实现这些功能，我们需要编写...
多层级图片幻灯片JS特效代码
01-23
焦点图，即图片轮播，是幻灯片的一种常见形式。它通常包括一组图片，通过自动或手动切换来展示不同的内容，常用于网站的首页、产品展示、新闻更新等区域。通过JS实现的焦点图可以添加许多高级功能，如自动播放、渐入...
图片切换，轮播图
03-17
在网页设计和开发中，图片切换与轮播图是一种常见的元素，用于展示多张图片或内容，特别是当页面空间有限但需要展示的信息量较大时。它们通常被用于产品展示、新闻更新、广告轮播等场景。轮播图设计的核心目标是提供...
轮播图及预览.rar
06-14
在网页设计中，轮播图（Carousel）是一种常见的元素，用于在有限的空间内展示多张图片或内容。这种效果通常是动态的，用户可以通过鼠标滑动、触摸滑动或者自动播放来浏览图片序列。预览图片功能则允许用户在点击小图...
js 层叠轮播图
03-18
层叠轮播图/
js实现网站轮播图
09-09
使用javascript利用定时器，以及函数封装原理，实现网站轮播图效果。简单的原生js实现轮播图效果，使用时请自行将代码分离
原生js实现图片层叠轮播切换效果
11-24
本文实例介绍了js焦点图片层叠轮播切换滚动效果，分享给大家供大家参考，具体内容如下 效果图：   功能描述： 　　自定义图片尺寸； 　　每隔一段时间自动滚动图片； 　　每次动画执行的时候改变图片的位置，宽高以及其它属性也要跟随着变化； 　　鼠标移上图片，显示当前图片的详细信息； 　　点击按钮向前向后滚动； 详细代码: 　　html代码: <!DOCTYPE html> <!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topic/xiuxuan.html --> <html
2018/2/21 层级轮播图
maggie_xff
02-22 646
层级轮播图：每点击一个按钮层式展出效果：图实在是不好截，大家想象一下好了，就是一层一层展出每张图片&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;styl
轮播图实现方法一——层叠轮播图
weixin_44592912的博客
06-22 5192
轮播图的实现方法有很多种，在此主要介绍一种层叠轮播图的实现方式 主要原理：将所有轮播图照片放在同一层，相互覆盖，通过JS控制当前那一张活跃在最顶端，实现图片轮播。 具体实现如下： HTML部分 <!--轮播图可视区--> <div class="warp" id="main"> <!--轮播图列表--> <ul class="list"> <li class="list-item active">0&
带层次感的图片轮播
hacke2' Blog
09-11 5762
豪哥的JS练习又一波来袭~今天又写了个百度爱玩的东西，暂且叫他带层次感的图片轮播吧
三种布局模型和轮播
qq_34893326的博客
12-07 333
css布局模型（三种） 1、流动模型（Flow）：默认的网页布局模式，块状元素都自上而下按顺序垂直延伸分布。内联元素都会在所处的包含元素内从左到右水平分布显示 2、浮动模型 (Float):float：left 3、层模型（Layer）：三种：1绝对定位(position: absolute)2、相对定位(position: relative)3、固定定位(position: fixed) 层模型...
vue项目+js 实现层叠轮播图——基础积累
yehaocheng520的博客
08-29 2722
vue项目+js 实现层叠轮播图——基础积累
轮播实现
weshouldhelp的博客
09-11 329
jquery-3.1.1.min.js版本，图片大小为1080px*432px &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;jQuery焦点图蓝色箭头按钮切换代码 - 站长素材&lt;/title&gt;     
JavaScript轮播图
最新发布
05-27
JavaScript轮播图可以通过以下步骤来实现： 1. 创建一个HTML结构，包含轮播图容器和轮播图项。 2. 使用CSS样式来设置轮播图容器和轮播图项的样式，如宽度、高度、位置、层级等。 3. 在JavaScript中获取轮播图容器和轮播图项，并根据需要设置初始状态。 4. 使用定时器或事件监听器来控制轮播图的切换，如定时切换、按钮点击切换、鼠标悬停切换等。 5. 切换时需要设置轮播图项的样式，如透明度、位置、过渡效果等。 6. 可以添加一些特效或功能，如自动播放、无限循环、指示器、缩略图等。 以下是一个简单的JavaScript轮播图示例： ```html <div class="carousel"> <div class="carousel-item active"><img src="1.jpg"></div> <div class="carousel-item"><img src="2.jpg"></div> <div class="carousel-item"><img src="3.jpg"></div> <div class="carousel-item"><img src="4.jpg"></div> </div> ``` ```css .carousel { position: relative; width: 600px; height: 400px; overflow: hidden; } .carousel-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; } .carousel-item.active { opacity: 1; } ``` ```javascript var carousel = document.querySelector('.carousel'); var items = carousel.querySelectorAll('.carousel-item'); var index = 0; var timer = null; function showItem(index) { for (var i = 0; i < items.length; i++) { items[i].classList.remove('active'); } items[index].classList.add('active'); } function nextItem() { index++; if (index >= items.length) { index = 0; } showItem(index); } timer = setInterval(nextItem, 3000); carousel.addEventListener('mouseover', function() { clearInterval(timer); }); carousel.addEventListener('mouseout', function() { timer = setInterval(nextItem, 3000); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值