使用Jquery制作图片轮播

最新推荐文章于 2022-12-13 21:37:20 发布

方片酱

最新推荐文章于 2022-12-13 21:37:20 发布

阅读量242

点赞数

分类专栏： jQuery 文章标签： jquery javascript css html5 es6

本文链接：https://blog.csdn.net/weixin_47691105/article/details/106088997

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这次只是简单地在网页中心加了div套入了图片，样式比较简单

效果图为：

这里边左右点击的为font图标，元素标签为<i></i>

下边的圆圈为div设置了boder和boder-radius

其中html代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="css/login.css" rel="stylesheet" type="text/css">
    <link href="lib/font/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="all">
        <div class="img">
            <div class="image">
                <img src="imgs/7e0bcabf6c81800a0e516d7fbe3533fa838b47da.jpg">
                <img class="hide" src="imgs/7a6ab0003af33a8720d9e46bc95c10385243b5db.jpg">
                <img class="hide" src="imgs/388ea744ad345982687101e303f431adcaef8498.jpg">
                <img class="hide" src="imgs/882c982f070828382105f10eb799a9014c08f177.jpg">
                <img class="hide" src="imgs/a07744a7d933c89587c97c0ade1373f0830200db.jpg">
                <img class="hide" src="imgs/timg.jpg">
            </div>
            <div class="choice">
                <div class="change"></div>
                <div class="change"></div>
                <div class="change"></div>
                <div class="change"></div>
                <div class="change"></div>
                <div class="change"></div>
            </div>
            <div class="i" id="i1"><i class="fa fa-chevron-circle-left fa-3x"></i></div>
            <div class="i" id="i2"><i class="fa fa-chevron-circle-right fa-3x"></i></div>
        </div>
    </div>
    <script src="lib/jquery/jquery-3.5.1.js"></script>
    <script src="js/login.js" type="text/javascript" rel="script"></script>
</body>
</html>

两个js文件，其中一个为jq文件

css代码为：

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}
.hide{
    display: none;
}
.all{
    height: 100%;
    position: relative;
}
.img{
    position: absolute;
    width: 750px;
    height: 450px;
    top: 15%;
    left: 30%;
    border-radius: 5px;
}
.img>.choice{
    position: absolute;
    width: 254px;
    height: 30px;
    bottom: 20px;
    left: 32%;
}
.img > .image{
    height: 450px;
}
.img>.choice>.change{
    margin-right: 20px;
    float: left;
    background-color: rgba(255,255,255,0.85);
    width: 14px;
    height: 14px;
    border-radius: 90px;
    border: 1px outset white;
}
.all>.img>div>img{
    position: absolute;
    width: 750px;
    height: 450px;
}
.come{
    display: block;
}
.big{
    margin-right: 20px;
    float: left;
    background-color: rgba(216,216,216,0.91);
    width: 17px;
    height: 17px;
    border-radius: 90px;
    border: 1px outset white;
}
#i1{
    position: absolute;
    width: 45px;
    height: 45px;
    z-index: 10;
    top: 40%;
    left: 0;
}
#i2{
    position: absolute;
    width: 45px;
    height: 45px;
    z-index: 10;
    top: 40%;
    right: 0;
}
.img > div > i{
    color: white;
}

jq代码为：

/**
 *绑定移入事件
 */
$('.all>.img>.choice>div').hover(function () {
    //找到img
    let $imgs = $('.all>.img>.image>img');
    // console.log($imgs);
    // let $choices = $('.all>.img>.choice>div');
    //点击的按钮
    $(this).removeClass('change').addClass('big').siblings().removeClass('big').addClass('change');
    console.log($(this).closest('choice').prev().find('img'))
    $($imgs[$(this).index()]).removeClass('hide').fadeIn(300).siblings().hide();
});
/**
 * 绑定点击事件
 */
let index = 0;
let $imgs = $('.all>.img>.image>img');
$('.all>.img>#i1').click(function () {
    let $choice = $(this).prev().find('.big');
    // console.log($choice);
    index=index!=0?index-1:5;
    console.log(index);
    $($choice).removeClass('big').addClass('change').prev().addClass('big');
    $($imgs[index]).show(300).siblings().hide();
});
$('.all>.img>#i2').click(function () {
    let $choice = $(this).prev().prev().find('.big');
    // console.log($choice);
    index = index != 5 ? index + 1 : 0;
    console.log(index);
    $($choice).removeClass('big').addClass('change').prev().addClass('big');
    $($imgs[index]).show(300).siblings().hide();
});

重点在于找到图片和下边圆圈互相对应的下标，以及点击左侧右侧的时候查询到img后改变需要显示的img下标，用hide()和show()进行隐藏和展示。

方片酱

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用Jquery制作图片轮播

这次只是简单地在网页中心加了div套入了图片，样式比较简单效果图为：这里边左右点击的为font图标，元素标签为<i></i>下边的圆圈为div设置了boder和boder-radius其中html代码为：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>login</title>
复制链接

扫一扫

专栏目录