【Javascript学习笔记】【DOM案例实战——JQ轮播】

其他 2018-07-29 10:09:55 阅读次数: 0

目录

横向轮播通知栏

原理

设置一个固定大小的溢出隐藏容器，再设置一个子容器，设置其宽度比父容器大，并放置需要轮播的内容，通过定时器定时调用某函数实现自容器位置的变换，实现的轮播效果。

效果

自动轮播，可点击立刻向右下一个。
这里写图片描述

代码

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>carousel</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="notificationBox">
    <div class="notTitle">
        <span>通知<br>公告</span>
    </div>
    <!-- 通知通告轮播模块Begin  ui要求轮播3块，此处通知轮播的设计最多可轮播4块（即12条信息，且为3的倍数） -->
    <div class="noteBox">
        <div id="note">
            <div class="notification">
                <a href="#">国际学0院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>
            <div class="notification">
                <a href="#">国际学院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>
            <div class="notification">
                <a href="#">国际学院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>

            <div class="notification">
                <a href="#">国际学1院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>
            <div class="notification">
                <a href="#">国际学院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>
            <div class="notification">
                <a href="#">国际学院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>

            <div class="notification">
                <a href="#">国际学2院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>
            <div class="notification">
                <a href="#">国际学院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>
            <div class="notification">
                <a href="#">国际学院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>
        </div>
    </div>
    <!-- 通知通告轮播模块End -->
    <div class="notRight" id="noteRight">
            <a href="#">
                <img src="right.png" alt="">
            </a>
    </div>
</div>
</body>
    <script src="../jquery.min.js"></script>
    <script src="index.js"></script>
</html>

css部分

.notificationBox{
    position: relative;
    width: 1200px;
    height: 65px;
    text-align: center;
    border-top: #D6D6D6 1px solid;
    border-bottom: #D6D6D6 1px solid;
    border-right: #D6D6D6 1px solid;
}
.notTitle{
    float: left;
    position: relative;
    top: -1px;
    width: 66px;
    height: 66px;
    color: #fff;
    margin-right:2.3%;
    background: #0062AC;
}
.notTitle>span{
    display: block;
    width: 66px;
    padding-top: 14px;
}
.notification{
    float: left;
    width: 300px;
    height: 65px;
    line-height: 65px;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.notification a{
    color: #B3B3B3;
}
.notification a:hover{
    color: #0062AC;
}
.notRight{
    position: absolute;
    top: 18px;
    right: 18px;
}
.notRight img{
    width: 28px;
    height: 28px;
}
.noteBox{
    width: 1020px;
    overflow: hidden;
}
#note{
    position: relative;
    width: 4080px;
}

js部分

$(function(){
    var noteCount=0;//代表第一块位置
    var noteCountMax= $("#note").children().length/3;//轮播块数目
    var noteTime = 6000;//轮播时间
    var noteSpeed = 500;//切换时间

    function show(){
        var notewidth= $("#note").width()*0.25;
        if(noteCount==0){
            noteCount = 1;
        }else if (noteCount==noteCountMax) {
            noteCount = 0;
        }
        $("#note").animate({left:-noteCount*notewidth},noteSpeed);//（切换向左动画，速度）
        noteCount++;
    }
    //按键点击轮播下一页
    $("#noteRight").click(function(){
        show();
    });
    setInterval(show,noteTime);
});

简单的轮播图效果

效果

这里写图片描述

代码

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>carousel</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<!-- <h1>简单的轮播图</h1> -->
<div class="relative">
    <div class="carouselBox">
        <div id="carousel">
            <div class="itemBox">
                <img src="img/1.jpg">
                <div class="headLine">图一</div>
            </div>
            <div class="itemBox">
                <img src="img/2.jpg">
                <div class="headLine">图二</div>
            </div>
            <div class="itemBox">
                <img src="img/3.jpg">
                <div class="headLine">图三</div>
            </div>
        </div>
    </div>
    <div class="right" id="carouselRight">
        <a href="#">
            <img src="right.png" alt="">
        </a>
    </div>
    <div class="left" id="carouselLeft">
        <a href="#">
            <img src="right.png" alt="">
        </a>
    </div>
</div>
</body>
    <script src="../jquery.min.js"></script>
    <script src="test.js"></script>
</html>

css部分

.carouselBox{
    width: 250px;
    height: 200px;
    overflow: hidden;
}
#carousel{
    position: relative;
    width: 1000px;
}
.itemBox{
    position: relative;
    float: left;
    width: 250px;
    height: 200px;
}
.itemBox img{
    width: 250px;
    height: 200px;
}
.headLine{
    width: 100%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
    color: #fff;
}
.right{
    width: 50px;
    position: absolute;
    right: -50px;
    bottom: 75px;
}
.left{
    width: 50px;
    position: absolute;
    left: -50px;
    bottom: 75px;
    transform: rotate(180deg);
}
.right img{
    display: block;
    width: 50px;
    height: 50px;
}
.left img{
    display: block;
    width: 50px;
    height: 50px;
}
.relative{
    position: relative;
    left: 50px;
    width: 250px;
    height: 200px;
}

js部分

$(function(){
    var Count=0;//代表第一块位置
    var CountMax= $("#carousel").children().length;//轮播块数目
    var Time = 3000;//轮播时间
    var Speed = 500;//切换时间

    //默认用该函数，向右轮播
    function show(){
        var width= $("#carousel").width()*0.25;
        if(Count==0){
            Count = 1;
        }else if (Count==CountMax) {
            Count = 0;
        }
        $("#carousel").animate({left:-Count*width},Speed);//（切换动画，速度）
        Count++;
    }

    //默认用该函数，向左轮播
    function showLeft(){
        var width= $("#carousel").width()*0.25;
        Count--;
        if(Count==-1){
            Count = CountMax-1;
        }
        $("#carousel").animate({left:-Count*width},Speed);//（切换动画，速度）
    }

    //按键点击轮播下一页
    $("#carouselRight").click(function(){
        show();
    });
    $("#carouselLeft").click(function(){
        showLeft();
    });

    //定时器
    setInterval(show,Time);
});

简单的轮播图效果

原理

给链接设置一个自定义属性，记录对应的参数代表第几页，为简单实现，此处直接记录的是对应图片的位置

效果

这里写图片描述

代码

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>carousel</title>
    <link rel="stylesheet" type="text/css" href="test1.css">
</head>
<body>
<h1>带有链接点的简单轮播图</h1>
<div class="relative">
    <div class="carouselBox">
        <div id="carousel">
            <div class="itemBox">
                <img src="img/1.jpg">
                <div class="headLine">图一</div>
            </div>
            <div class="itemBox">
                <img src="img/2.jpg">
                <div class="headLine">图二</div>
            </div>
            <div class="itemBox">
                <img src="img/3.jpg">
                <div class="headLine">图三</div>
            </div>
        </div>
    </div>
    <div class="dot">
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    </div>
    <div class="right" id="carouselRight">
        <a href="#">
            <img src="right.png" alt="">
        </a>
    </div>
    <div class="left" id="carouselLeft">
        <a href="#">
            <img src="right.png" alt="">
        </a>
    </div>
</div>
</body>
    <script src="../jquery.min.js"></script>
    <script src="test1.js"></script>
</html>

css部分（在上个例子的基础上加）

.carouselBox{
    width: 250px;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.dot{
    width: 100%;
    height: 25px;
    position: absolute;
    bottom: -30px;
    left: 35%;
}
.dot a{
    float: left;
    width: 10px;
    height: 10px;
    background: rgba(0,0,0,0.5);
    z-index: 99;
    border-radius: 20px;
    margin-right:10px;
}
.dot a:hover{
    width: 14px;
    height: 14px;
    margin-top: -2px;
}

js部分（在上面例子的基础上多了的部分）

    //链接
    var n=0;
    $(".dot a").each(function(){
        var width= $("#carousel").width()*0.25;
        $(this).attr("data-long",-(n*width));
        n++;
    });
    $(".dot a").click(function(){
        var L=$(this).attr("data-long");
        $("#carousel").animate({left:L},Speed);
    })

快捷链接

全部Javascript学习笔记的目录 Click Here>>
github源码下载 Click Here>>

猜你喜欢

转载自blog.csdn.net/m0_37136491/article/details/81235377
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022