js网页呼吸轮播图

最新推荐文章于 2024-07-12 10:43:17 发布
最新推荐文章于 2024-07-12 10:43:17 发布
阅读量91 收藏
点赞数 1
文章标签： jquery javascript css html Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73500412/article/details/129436020
版权

html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <div class="banner w">
        <div class="menu fl">
            <ul>
                <li>
                    <a href="#">家用电器</a>
                    <ol class="sub-menu">
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>象征专卖店</li>
                    </ol>
                </li>
                <li>
                    <a href="#">手机</a>
                    <span>/</span>
                    <a href="#">运营商</a>
                    <span>/</span>
                    <a href="#">数码</a>
                    <ol class="sub-menu">
                        <li>手机</li>
                        <li>手机馆</li>
                        <li>手机馆</li>
                        <li>象征专卖店</li>
                    </ol>
                </li>
                <li>
                    <a href="#">电脑</a>
                    <span>/</span>
                    <a href="#">办公</a>
                    <ol class="sub-menu">
                        <li>电脑</li>
                        <li>电脑</li>
                        <li>电脑</li>
                        <li>办公</li>
                    </ol>
                </li>
                <li>
                    <a href="#">家居</a>
                    <span>/</span>
                    <a href="#">家具</a><span>/</span>
                    <a href="#">家装</a><span>/</span>
                    <a href="#">厨具</a>
                    <ol class="sub-menu">
                        <li>111</li>
                        <li>22</li>
                        <li>33</li>
                        <li>44</li>
                    </ol>
                </li>
                <li>
                    <a href="#">男装</a>
                    <span>/</span>
                    <a href="#">女装</a><span>/</span>
                    <a href="#">童装</a><span>/</span>
                    <a href="#">内衣</a>
                    <ol class="sub-menu">
                        <li>666</li>
                        <li>323</li>
                        <li>951</li>
                        <li>258</li>
                    </ol>
                </li>
                <li>
                    <a href="#">美妆</a>
                    <span>/</span>
                    <a href="#">个护清洁</a><span>/</span>
                    <a href="#">宠物</a>
                    <ol class="sub-menu">
                        <li>015</li>
                        <li>985</li>
                        <li>211</li>
                        <li>1954</li>
                    </ol>
                </li>
                <li>
                    <a href="#">女鞋</a>
                    <span>/</span>
                    <a href="#">箱包</a><span>/</span>
                    <a href="#">钟表</a><span>/</span>
                    <a href="#">珠宝</a>
                    <ol class="sub-menu">
                        <li>888</li>
                        <li>154</li>
                        <li>325568548</li>
                        <li>15684</li>
                    </ol>
                </li>
                <li>
                    <a href="#">男鞋</a>
                    <span>/</span>
                    <a href="#">运动</a><span>/</span>
                    <a href="#">户外</a>
                    <ol class="sub-menu">
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>象征专卖店</li>
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>象征专卖店</li>
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>象征专卖店</li>
                    </ol>
                </li>
                <li>
                    <a href="#">房产</a>
                    <span>/</span>
                    <a href="#">汽车</a><span>/</span>
                    <a href="#">汽车用品</a>
                    <ol class="sub-menu">
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>象征专卖店</li>
                        <li>象征专卖店</li>
                        <li>象征专卖店</li>
                        <li>象征专卖店</li>
                        <li>象征专卖店</li>
                        <li>象征专卖店</li>
                    </ol>
                </li>
                <li>
                    <a href="#">母婴</a>
                    <span>/</span>
                    <a href="#">玩具乐器</a>
                    <ol class="sub-menu">
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>象征专卖店</li>
                    </ol>
                </li>
                <li>
                    <a href="#">食品</a>
                    <span>/</span>
                    <a href="#">酒类</a>
                    <span>/</span>
                    <a href="#">生鲜</a>
                    <span>/</span>
                    <a href="#">特产</a>
                    <ol class="sub-menu">
                        <li>食品</li>
                        <li>食品</li>
                        <li>食品</li>
                        <li>食品</li>
                        <li>食品</li>
                        <li>食品</li>
                        <li>食品</li>
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>象征专卖店</li>
                    </ol>
                </li>
                <li>
                    <a href="#">艺术</a>
                    <span>/</span>
                    <a href="#">礼品鲜花</a>
                    <span>/</span>
                    <a href="#">农资绿植</a>
                    <ol class="sub-menu">
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>娴熟四年后四</li>
                        <li>娴熟四年后四</li>
                        <li>娴熟四年后四</li>
                        <li>娴熟四年后四</li>
                        <li>娴熟四年后四</li>
                    </ol>
                </li>
                <li>
                    <a href="#">医药保健</a>
                    <span>/</span>
                    <a href="#">计生情趣</a>
                    <ol class="sub-menu">
                        <li>000</li>
                        <li>46784电馆</li>
                        <li>3684</li>
                        <li>象789455</li>
                    </ol>
                </li>
                <li>
                    <a href="#">图书</a>
                    <span>/</span>
                    <a href="#">文娱</a>
                    <span>/</span>
                    <a href="#">电子书</a>
                    <ol class="sub-menu">
                        <li>电子书</li>
                        <li>电子书</li>
                        <li>电子书</li>
                        <li>电子书</li>
                        <li>电子书</li>
                        <li>电子书</li>
                    </ol>
                </li>
                <li>
                    <a href="#">机票</a>
                    <span>/</span>
                    <a href="#">酒店</a>
                    <span>/</span>
                    <a href="#">旅游</a>
                    <span>/</span>
                    <a href="#">生活</a>
                    <ol class="sub-menu">
                        <li>机票</li>
                        <li>机票</li>
                        <li>机票</li>
                        <li>机票</li>
                        <li>机票</li>
                        <li>机票</li>
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>象征专卖店</li>
                    </ol>
                </li>
                <li>
                    <a href="#">理财</a>
                    <span>/</span>
                    <a href="#">众筹</a>
                    <span>/</span>
                    <a href="#">白条</a>
                    <span>/</span>
                    <a href="#">保险</a>
                    <ol class="sub-menu">
                        <li>保险</li>
                        <li>保险</li>
                        <li>保险</li>
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>象征专卖店</li>
                    </ol>
                </li>
                <li>
                    <a href="#">安装</a>
                    <span>/</span>
                    <a href="#">维修</a>
                    <span>/</span>
                    <a href="#">清洗保养</a>
                    <ol class="sub-menu">
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>家电馆</li>
                        <li>清洗保养</li>
                        <li>清洗保养</li>
                        <li>清洗保养</li>
                        <li>清洗保养</li>
                        <li>清洗保养</li>
                    </ol>
                </li>
                <li>
                    <a href="#">工业品</a>
                    <ol class="sub-menu">
                        <li>工业品</li>
                        <li>工业品</li>
                        <li>工业品</li>
                        <li>工业品</li>
                        <li>工业品</li>
                        <li>工业品</li>
                        <li>工业品</li>
                        <li>工业品</li>
                        <li>家电馆</li>
                        <li>家电馆</li>
                    </ol>
                </li>
            </ul>
        </div>
        <div class="focus fl">
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/4.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/5.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/6.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/7.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/8.jpg" alt="">
                    </a>
                </li>
            </ul>
            <ol class="circle">
                <!-- <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li> -->
            </ol>
            <a href="#" class="left">&lt;</a>
            <a href="#" class="right">&gt;</a>
        </div>
        <div class="banner-right fl">
            <a href="#">
                <img src="./images/8.jpg" alt="">
            </a>
            <a href="#">
                <img src="./images/9.png" alt="">
            </a>
            <a href="#">
                <img src="./images/10.jpg" alt="">
            </a>
        </div>
    </div>
</body>
</html>

reset.css部分

/* css初始化代码 */


/* 清除页面所有元素的内外边距 */
*{
    margin:0;
    padding:0;
}

/* 去掉li的小圆点 */
ul,li{
    list-style-type: none;
}

/* a标签的初始样式 */
a{
    text-decoration: none;
}


/* 1. 图片和文字垂直对齐
2. 去掉图片下面的3px左右的间距 */
img{
    vertical-align: middle;
}

/* 设置整个页面的文字字体颜色 */
body{
    font:12px/1.5 'Microsoft YaHei';
    background-color: #eef1ee;
    color:#000;
}


/* 浮动 */
.fl{
    float: left;
}

.fr{
    float: right;
}

/* 清除浮动 */
.clearfix:after{
    /* 内容为空 */
    content: '';
    /* 块元素 */
    display: block;
    /* 隐藏 - 占位 */
    visibility: hidden;
    /* 高度为0 */
    height: 0;
    /* 清除浮动的代码 */
    clear:both;
}


/* 初始化em i  */
em,i{
    font-style: normal;
}


/* 初始化的表单控件 */
input,button{
    border:0;
    outline: 0;
}

/* 内宽 */
.w{
    width: 1256px;
    margin: auto;
}

style.css部分

.banner {
    height: 610px;
}

.menu {
    position: relative;
    width: 241px;
    height: 596px;
    background-color: #fefefe;
    padding: 7px 0;
}

.menu>ul>li {
    line-height: 31px;
    text-indent: 24px;
}

.menu>ul>li a,
.menu>ul>li span {
    font-size: 16px;
    color: #565656;
}

.menu>ul>li:hover {
    background-color: #d4d4d4;
}

.sub-menu {
    display: none;
    position: absolute;
    left: 241px;
    top: 0;
    width: 1025px;
    height: 610px;
    border: 1px solid #cacdc8;
    background-color: #ffffff;
    z-index: 999;
}

.focus {
    position: relative;
    width: 750px;
    height: 594px;
    margin-left: 12px;
    margin-top: 13px;
    overflow: hidden;
}

.focus ul li {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

.focus ul li img {
    width: 750px;
    height: 597px;
}

.circle {
    position: absolute;
    left: 52px;
    bottom: 30px;
}

.circle li {
    float: left;
    width: 8px;
    height: 8px;
    border: 3px solid rgba(255, 255, 255, .4);
    margin-left: 10px;
    border-radius: 50px;
    cursor: pointer;
}

.circle .current {
    background-color: #fff;
    border: 3px solid rgba(255, 255, 255, .2);
}

.circle li:hover {
    background-color: #fff;
    border: 3px solid rgba(255, 255, 255, .2);
}

.focus>a {
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -31px;
    width: 38px;
    height: 62px;
    font-size: 30px;
    color: rgba(255, 255, 255, .5);
    line-height: 62px;
    text-align: center;
    background-color: rgba(0, 0, 0, .5);
}

.left {
    left: 0;
}

.right {
    right: 0;
}

.banner-right {
    width: 241px;
    height: 610px;
    margin-left: 12px;
}

.banner-right img {
    width: 241px;
    height: 191px;
    margin-top: 12px;
}

index.js部分

$(function () {
    $('.menu>ul>li').hover(function () {
        $(this).find('ol').toggle();
    })
    var index = 0;
    //鼠标移入
    //鼠标移出
    $('.focus').hover(function () {
        $('.left').toggle();
        $('.right').toggle();
    })
    $('.focus>ul>li:first').show();
    $(".focus").hover(function () {
        //移入
        clearInterval(timer);
    }, function () {
        //移出
        timer = setInterval(rightMove, 1000);
    })
    // 创建小圆点
    $('.focus>ul>li').each((index)=>{
        var oLi = $('<li></li>');
        if (index === 0) oLi.addClass('current');
        $('.circle').append(oLi);
    })
    $('.right').click(function () {
        rightMove();
    });
    function rightMove() {
        if (index == $('.focus>ul>li').length - 1) { //最后一张
            index = 0;
        } else {
            index++;
        }
        $('.focus>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);
        //下方页码对应高亮
        $('.circle>li').eq(index).addClass('current').siblings('li').removeClass('current');
    }
    $('.left').click(function () {
        if (index == 0) { //第一张
            index = $('.focus>ul>li').length - 1;
        } else {
            index--;
        }
        $('.focus>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);
        //下方页码对应高亮
        $('.circle>li').eq(index).addClass('current').siblings('li').removeClass('current');
    })
    //页码点击轮播图片
    $('.circle>li').hover(function () {
        index = $(this).index();
        $('.focus>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);
        $('.circle>li').eq(index).addClass('current').siblings('li').removeClass('current');
    })
    var timer = setInterval(rightMove, 1000);
})

html和css注释忘写啦 大家记得写上ヾ(◍°∇°◍)ﾉﾞ

我有没有心思
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
呼吸轮播特效
xuehaocyuyan的博客
08-15 133
呼吸轮播特效 js和动画结合实现 在这里插入代码片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.
轮播图 带有缩略图
seb_lin666的博客
02-25 2425
设计给了个图 要求轮播带有 缩略图 选样式还要放大 如下图 在网上找了下没有有相似的 但还是与设计图有些差距 无奈 找了原来的代码 以此为基础 改呗 主要的还是缩略图的点击 放大 缩小 以及大于5时选中第5个小图时 整体滚动就是个小的轮播 无论是点击上一个、下一个、还是缩略图 当选中的缩略图为 第一个或第五个时（下图选中放大的为第三个） 做判断 第一个：获取当前元素前面有几个兄弟元素 如果大于等于...
vue中实现带缩略图得轮播图（vue-awesome-swiper）
行内元素如何居中
02-10 2613
1.引入swiper和vue-awesome-swiper插件 npm install swiper@4 --save npm install vue-awesome-swiper@3 --save 2.在main.js中引入： import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) import '../node_modules/swiper/dist/css/swiper.css' 3.使用： tem
带缩略图的轮播图
chen_feng_123的博客
08-10 2167
实现一个带缩略图的轮播图，缩略图可以点击改变展示内容。
呼吸轮播图基础布局
王延朕的博客
05-13 197
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>呼吸轮播图</title> <style> *{ padding: 0px; margin: 0px; } ul,ol{ list-style:
呼吸轮播图
cmondd的博客
02-22 119
获取数组中的数据实现轮播
html + css + js 实现轮播图效果
11-23
在网页设计中，轮播图是一种常见的展示方式，它能够以动态的形式展示多张图片或内容，节省空间的同时增加交互性。本主题将详细介绍如何利用HTML、CSS和JavaScript技术实现一个基本的轮播图效果。 首先，HTML是网页...
jquery带缩略图的轮播图代码
12-12
3. **jQuery脚本**：核心功能由jQuery代码实现，包括轮播图的初始化、图片切换逻辑、动画效果以及对缩略图点击事件的响应。 4. **事件处理**：使用jQuery的`.on()`方法监听用户的点击事件，当用户点击缩略图或使用...
jQuery带缩略图自动轮播幻灯片代码
06-09
总的来说，"jQuery带缩略图自动轮播幻灯片代码"是一个实用的网页组件，它结合了jQuery的便利性，实现了丰富的交互效果，为网页带来了生动的视觉体验。通过理解并定制这个代码，开发者可以轻松地在自己的项目中实现...
94KK论坛 迎风呼吸
12-26
3. JavaScript文件：用于实现页面的动态效果和用户交互，如下拉菜单、轮播图、表单验证等。 4. 图像文件：包括logo、背景图片、按钮图标等，为网站增添视觉吸引力。 5. 字体文件：如果模版使用了特殊字体，可能会...
jQuery带有呼吸的缩略图(含完整源码)
执念斩长河
06-02 583
在制作这个特效时，左右按钮的事件监听一定要注意，会发生什么，图片会动缩略图会动，当单击缩率图时，大图会动，也要考虑，最后代码运行，收获喜悦。
带缩略图 轮播图
weixin_34392843的博客
03-06 694
<style type="text/css"> *{ margin: 0; padding: 0; } #outer{ position: relative; margin: 30px auto 0; width: 800px; height: 450px; overflow: ...
Webkit简介以及工作流程
读心悦
07-10 311
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 194
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 309
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 166
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
javascript高级部分笔记
喵喵的博客
07-09 1273
javascript高级部分 Function方法 与 函数式编程 call 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 let myName = 'goudan
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
最新发布
专注基础架构领域
07-12 345
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
制作HTML网页图片轮播自动切换
06-08
好的，下面我简单介绍一下如何制作一个HTML网页图片轮播自动切换。 首先，我们需要在HTML中创建一个容器来存放图片和按钮，可以使用`<div>`标签来创建容器，并使用`<img>`标签来插入图片。代码如下： ```html ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值