jq轮播图

最新推荐文章于 2022-05-30 20:51:16 发布

拼命十三娘

最新推荐文章于 2022-05-30 20:51:16 发布

阅读量168

点赞数

分类专栏：小功能文章标签： jq轮播图

本文链接：https://blog.csdn.net/weixin_45034639/article/details/102293271

版权

小功能专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./selator.css">
</head>

<body>
    <div class="nav">
        <span>11</span>
        <span>22</span>
        <span>33</span>
        <span>44</span>
        <span>55</span>
    </div>
    <div class='wrap'>
        <i class='pre'> << </i>
        <div class='content active'>11111</div>
        <div class='content'>22222</div>
        <div class='content'>33333</div>
        <div class='content'>44444</div>
        <div class='content'>55555</div>
        <i class='next'>>></i>
    </div>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="./selator.js"></script>
</body>

</html>

JS


$(function () {
    let toggleAction = function (element, index, className) {
        return element.eq(index).addClass(className).siblings().removeClass(className)
    }
    let contentElement = $('div.content');
    let contentClassName = 'active';
    let contentAction = function (index) {
        return toggleAction(contentElement, index, contentClassName)
    }
    let navElement = $('span');
    let navClassName = 'select';
    let navAction = function (index) {
        return toggleAction(navElement, index, navClassName)
    }
    $('span').on('click', function () {
        $(this).addClass('select').siblings().removeClass('select');
        let i = $(this).index();
        j = i;
        // $('div.content').eq(i).addClass('active').siblings().removeClass('active');
        // toggleAction('div.content', i, 'active')
        contentAction(i)
    })
    var j = 0;
    var timer = null;
    var aotodisplay = function () {
        timer = window.setInterval(function () {
            // $('span').eq(j).addClass('select').siblings().removeClass('select')
            // $('div.content').eq(j).addClass('active').siblings().removeClass('active');
            // toggleAction('span', j, 'select');
            // toggleAction('div.content', j, 'active');
            navAction(j)
            contentAction(j)
            if (j >= 4) {
                j = 0
            } else {
                j++
            }
        }, 1000)
    }
    aotodisplay();
    $('div.wrap').hover(function () {
        window.clearInterval(timer)
    }, function () {
        aotodisplay()
    })

    $('i.pre').on('click', function () {
        let k = $('span.select').index()
        k--
        j = k
        // $('div.content').eq(k).addClass('active').siblings().removeClass('active');
        // $('span').eq(k).addClass('select').siblings().removeClass('select');
        // toggleAction('span', k, 'select');
        // toggleAction('div.content', k, 'active');
        navAction(k)
        contentAction(k)
    })
    $('i.next').on('click', function () {
        let k = $('span.select').index();
        if (k >= 4) {
            k = 0
        } else {
            k++
        }
        j = k
        // $('div.content').eq(k).addClass('active').siblings().removeClass('active');
        // $('span').eq(k).addClass('select').siblings().removeClass('select');
        // toggleAction('span', k, 'select');
        // toggleAction('div.content', k, 'active');
        navAction(k)
        contentAction(k)
    })
})

CSS

div.wrap {
    width: 200px;
    height: 200px;
    padding: 10px;
    position: relative;
}

div.content {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: none;
}

i {
    position: absolute;
    top: 50%;
}

i:hover {
    color: blue;
}

i.pre {
    left: 15px;
}

i.next {
    right: 15px;
}

span {
    width: 30px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    display: inline-block;
    border: 1px solid rgb(15, 19, 15);
    margin-right: 3px;
    margin-bottom: 10px;
}

div.active {
    display: block;
}

.select {
    color: red;
    font-size: 20px;
    background-color: yellow;
}

拼命十三娘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq轮播图

HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
复制链接

扫一扫

专栏目录