jQuery点击换一批插件下载

6782021-02-28 23:06:27

点击换一批是网站推荐内容的关键组成部分，对于用户体验提升比较大。那么，怎样做换一批的功能呢？

本插件可直接投入使用，点击即可换一批相关信息。在节约页面空间的基础上，可以尽可能多的展示信息，有效避免用户流失。

插件提供免费下载，也可以直接复制页面下的源码直接使用，快试试看吧。

源码参考如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery换一批(原创)-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
    margin:0;
    padding:0;
    text-decoration:none;
    list-style:none;
}
.list1 {
    display:flex;
    margin:0 auto;
}
.list1 li {
    flex:1;
    border-radius:0.25em;
    height:2.5em;
    text-align:center;
    line-height:2.5em;
    margin:0.625em 0.32em;
}
.listchange2,.listchange3,.listchange4 {
    display:none;
}
.huan {
    text-align:center;
    font-family:"微软雅黑";
    font-size:1em;
    color:#999999;
}
</style>
</head>
<body>

<ul class="list1 listchange1">
    <li>幸福家庭</li>
    <li>幸福家庭</li>
    <li>幸福家庭</li>
    <li>幸福家庭</li>
</ul>
<ul class="list1 listchange1">
    <li>亲子娱乐</li>
    <li>爸妈游</li>
    <li>蜜月旅行</li>
    <li>朋友聚会</li>
</ul>
<ul class="list1 listchange2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul class="list1 listchange2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul class="list1 listchange3">
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ul>
<ul class="list1 listchange3">
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ul>
<ul class="list1 listchange4">
    <li>b</li>
    <li>b</li>
    <li>b</li>
    <li>b</li>
</ul>
<ul class="list1 listchange4">
    <li>b</li>
    <li>b</li>
    <li>b</li>
    <li>b</li>
</ul>


<div style="text-align: center;"><button class="huan">换一批</button> </div>

<script>
var bcjson = ["#ff9900", "#3dbeb6", "#a3eee9", "#f8cd8c"];
var cjson = ["#fff", "black"];
$(function() {

    $(".list1").children("li").each(function() {
        $(this).css({
            "background-color": bcjson[Math.floor(Math.random() * 4)],
            "color": cjson[Math.floor(Math.random() * 2)]
        });
    })

})
//代表第一次换的是第二组
var listitem = 2;

//这是要换的批数
var listitemmax = 4;
$(".huan").click(function() {
    $(".listchange" + listitem).siblings("ul").css("display", "none");
    $(".listchange" + listitem).css("display", "flex");
    if (listitem < listitemmax) {
        listitem++;
    } else {
        listitem = 1;
    }
});
</script>

</body>
</html>

源码与下载包一样，可直接复制也可下载下载包实现点击换一批的功能。

本文地址：https://xzo.com.cn/plugins/js/14.html

郑重承诺

插件已人工检测，确认安全无毒，请放心下载。