2019.11.12 JQ图片轮播

<div class="three">
            <div class="bjtp">
                <img class="bjpic b1" src="../public/images/hero_01.jpg">
                <img class="bjpic b2" src="../public/images/hero_02.jpg">
                <img class="bjpic b3" src="../public/images/hero_03.jpg">
                <img class="bjpic b4" src="../public/images/hero_04.jpg">
                <img class="bjpic b5" src="../public/images/hero_05.jpg">
                <img class="bjpic b6" src="../public/images/hero_06.jpg">
            </div>
            <div class="bpic">
                <img class="bpin bb1" src="../public/images/hero_01_ren.png">
                <img class="bpin bb2" src="../public/images/hero_02_ren.png">
                <img class="bpin bb3" src="../public/images/hero_03_ren.png">
                <img class="bpin bb4" src="../public/images/hero_04_ren.png">
                <img class="bpin bb5" src="../public/images/hero_05_ren.png">
                <img class="bpin bb6" src="../public/images/hero_06_ren.png">
            </div>
            <div class="nk">
                <div class="txbox">
                    <div class="tx t1" style="filter: brightness(130%);">
                        <img src="../public/images/hero_01_head.png">
                    </div>
                    <div class="tx t2">
                        <img src="../public/images/hero_02_head.png">
                    </div>
                    <div class="tx t3">
                        <img src="../public/images/hero_03_head.png">
                    </div>
                    <div class="tx t4">
                        <img src="../public/images/hero_04_head.png">
                    </div>
                    <div class="tx t5">
                        <img src="../public/images/hero_05_head.png">
                    </div>
                    <div class="tx t6">
                        <img src="../public/images/hero_06_head.png">
                    </div>
                </div>
                <div class="unbox">
                    <div class="m ming1"  style="filter: brightness(130%);">
                        <p">黑衣剑士</p>
                    </div>
                    <div class="m ming2">
                        <p>黑</p>
                    </div>
                    <div class="m ming3">
                        <p">空</p>
                    </div>
                    <div class="m ming4">
                        <p">白</p>
                    </div>
                    <div class="m ming5">
                        <p">御坂美琴</p>
                    </div>
                    <div class="m ming6">
                        <p">阿库娅</p>
                    </div>
                </div>
            </div>
            <div class="jieshao">
                <div class="baidi">
                    <div class="uppic">
                        <div class="up1 u1">
                            <div class="hyjs">
                                黑衣剑士<span>/&nbsp;战斗</span>
                            </div>
                            <div class="wjz">
                                <div>位移</div>
                                <div class="ggg"></div>
                                <div>机动</div>
                                <div class="ggg"></div>
                                <div>真伤</div>
                            </div>
                            <div class="wenzi">
                                黑色剑士是一个高机动突击型战斗英雄，
                                他可以使用四方斩快速切入战场，
                                并施展二刀流上位技能对敌方造成致命伤害。</div>
                            <div class="npp">
                                <img src="../public/images/hero_01_detail.png">
                            </div>
                        </div>
                        <div class="up1 u2">
                            <div class="hyjs">
                                黑<span>/&nbsp;爆发</span>
                            </div>
                            <div class="wjz">
                                <div>爆发</div>
                                <div class="ggg"></div>
                                <div>潜行</div>
                                <div class="ggg"></div>
                                <div>支援</div>
                            </div>
                            <div class="wenzi">
                                黑是一个潜行支援型爆发英雄，
                                他可以使用影踪隐蔽潜入战场，
                                也可以将自己量子化后瞬移刺杀敌方。
                            </div>
                            <div class="npp">
                                <img src="../public/images/hero_02_detail.png">
                            </div>
                        </div>
                        <div class="up1 u3">
                            <div class="hyjs">
                                空<span>/&nbsp;防御</span>
                            </div>
                            <div class="wjz">
                                <div>支援</div>
                                <div class="ggg"></div>
                                <div>承伤</div>
                                <div class="ggg"></div>
                                <div>辅助</div>
                            </div>
                            <div class="wenzi">
                                空是一个强大辅助型防御英雄，
                                他擅长利用游戏规则进行作战，
                                游戏欺诈对友方给予保护，
                                游戏陷阱对敌方造成伤害。
                            </div>
                            <div class="npp">
                                <img src="../public/images/hero_03_detail.png">
                            </div>
                        </div>
                        <div class="up1 u4">
                            <div class="hyjs">
                                白<span>/&nbsp;射击</span>
                            </div>
                            <div class="wjz">
                                <div>输出</div>
                                <div class="ggg"></div>
                                <div>机动</div>
                                <div class="ggg"></div>
                                <div>核心</div>
                            </div>
                            <div class="wenzi">
                                白是一个强力站桩型射击英雄，
                                她可以通过精密计算，利用周围
                                地理环境对敌方进行极致输出。
                            </div>
                            <div class="npp">
                                <img src="../public/images/hero_04_detail.png">
                            </div>
                        </div>
                        <div class="up1 u5">
                            <div class="hyjs">
                                御坂美琴<span>/&nbsp;魔法</span>
                            </div>
                            <div class="wjz">
                                <div>爆发</div>
                                <div class="ggg"></div>
                                <div>团控</div>
                                <div class="ggg"></div>
                                <div>位移</div>
                            </div>
                            <div class="wenzi">
                                御坂美琴是一个高爆发伤害型魔法英雄，
                                她可以迅速切入战场，聚集雷云展开真正
                                的落雷毁灭在场所有敌方单位。
                            </div>
                            <div class="npp">
                                <img src="../public/images/hero_05_detail.png">
                            </div>
                        </div>
                        <div class="up1 u6">
                            <div class="hyjs">
                                阿库娅<span>/&nbsp;协助</span>
                            </div>
                            <div class="wjz">
                                <div>治疗</div>
                                <div class="ggg"></div>
                                <div>支援</div>
                                <div class="ggg"></div>
                                <div>解控</div>
                            </div>
                            <div class="wenzi">
                                阿库娅是一个全能型协助英雄，
                                兼具治疗、解控、复活、减速、
                                减甲、嘲讽等的能力。
                            </div>
                            <div class="npp">
                                <img src="../public/images/hero_06_detail.png">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="jiantou">
                <div class="jtl">
                    <img src="../public/images/sprite.png">
                </div>
                <div class="jtr">
                    <img src="../public/images/sprite.png">
                </div>
            </div>
        </div>

css：

.three {
    overflow: hidden;
    z-index: 0;
    position: relative;
    height: 958px;
    background-repeat: no-repeat;
    background-size: 138%;
}

.bjtp {
    position: absolute;
    height: 958px;
}

.bjtp img {
    width: 140%;
}

.bpic {
    z-index: 1;
    position: absolute;
    height: 958px;
    overflow: hidden;
}

.bpic img {
    float: left;
    width: 1857px;
}

/* ----矢量背景结束---------------- */
.jiantou {
    width: 100%;
    overflow: hidden;
    position: absolute;
    z-index: 4;
    margin-top: -260px;
}

.jtl {
    transition: all .4s ease;
    margin-left: 65px;
    float: left;
    overflow: hidden;
    height: 85px;
    width: 70px;
}

.jtl:hover {
    cursor: pointer;
    filter: brightness(130%);
}

.jtr {
    transition: all .4s ease;
    margin-right: 80px;
    float: right;
    overflow: hidden;
    height: 85px;
    width: 70px;
}

.jtr:hover {
    cursor: pointer;
    filter: brightness(130%);
}

.jtr img {
    margin-left: -75px;
}

/* -----箭头结束---------------- */
.nk {
    margin-top: 255px;
    margin-left: 490px;
    overflow: hidden;
    position: absolute;
    z-index: 2;
}

.tx {
    transition: all .4s ease;
    color: white;
    text-align: center;
    margin: 0px 10px 0px 10px;
    float: left;
    filter: brightness(50%);
}

.tx p {
    margin-top: 5px;
    display: none;
}

.tx:hover {
    cursor: pointer;
}

.tx:hover p {
    display: block;
}

.unbox {
    transition: all .4s ease;
    color: white;
    text-align: center;
}

.m {
    height: 25px;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
    margin-top: 7px;
    float: left;
    width: 111px;
    font-weight: 600;
    filter: brightness(50%);
}

/* ----头像结束---------------- */
.jieshao {
    z-index: 3;
    position: relative;
    border: 1px solid white;
    padding: 10px;
    margin-top: 411px;
    margin-left: 521px;
    width: 625px;
    height: 310px;
}

.baidi {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0.8;
}

.uppic {
    overflow: hidden;
    position: relative;
    width: 603px;
    height: 288px;
}

.up1 {
    position: relative;
    width: 603px;
    height: 288px;
    padding: 10px;
}

.hyjs {
    height: 80px;
    margin-left: 18px;
    font-size: 50px;
    color: #323233;
    font-weight: 700;
}

.hyjs span {
    margin-left: 6px;
    font-size: 17px;
    color: #d11f1f;
}

.wjz {
    display: flex;
    justify-content: center;
    width: 195px;
    height: 30px;
    margin-left: 20px;
    background: #323233;
    color: #ececec;
    text-align: center;
    line-height: 30px;
}

.wjz div {
    float: left;
}

.ggg {
    margin: 5px 15px 0px 15px;
    width: 1px;
    height: 20px;
    background-color: #505e63;
}

.wenzi {
    float: left;
    height: 131px;
    width: 253px;
    color: #2f2f30;
    margin-left: 19px;
    margin-top: 19px;
    line-height: 30px;
    font-size: 15px;

}

.npp {
    position: relative;
    margin-top: -73px;
    margin-left: 302px;
}

js：

// ------点击头像更换背景等-----------------------
        $('.t1').click(function() {
            $(".u1,.bb1").stop().show(500).siblings().stop().hide(500);
            $(".b1").stop().show().siblings().stop().hide();
            $(".t1").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
            $(".ming1").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
            ind = 0;
            
        });
        $('.t2').click(function() {
            $(".u2,.bb2").stop().show(500).siblings().stop().hide(500);
            $(".b2").stop().show().siblings().stop().hide();
            $(".t2").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
            $(".ming2").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
            ind = 1;
            
        });
        $('.t3').click(function() {
            $(".u3,.bb3").stop().show(500).siblings().stop().hide(500);
            $(".b3").stop().show().siblings().stop().hide();
            $(".t3").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
            $(".ming3").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
            ind = 2;
            
        });
        $('.t4').click(function() {
            $(".u4,.bb4").stop().show(500).siblings().stop().hide(500);
            $(".b4").stop().show().siblings().stop().hide();
            $(".t4").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
            $(".ming4").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
            ind = 3;
            
        });
        $('.t5').click(function() {
            $(".u5,.bb5").stop().show(500).siblings().stop().hide(500);
            $(".b5").stop().show().siblings().stop().hide();
            $(".t5").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
            $(".ming5").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
            ind = 4;
            
        });
        $('.t6').click(function() {
            $(".u6,.bb6").stop().show(500).siblings().stop().hide(500);
            $(".b6").stop().show().siblings().stop().hide();
            $(".t6").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
            $(".ming6").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
            ind = -1;
            
        });
        // --------------左右箭头点击轮播-------------------------
        $('.jtr').click(function() {
            ind++;
            $(".up1").eq(ind).stop().show(500).siblings().stop().hide(500);
            $(".bpin").eq(ind).stop().show(500).siblings().stop().hide(500);
            $(".bjpic").eq(ind).stop().show().siblings().stop().hide();
            $(".tx").eq(ind).css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
            $(".m").eq(ind).css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
            if (ind == 5) {
                ind = -1;
            }
        });
        $('.jtl').click(function() {
            ind--;
            $(".up1").eq(ind).stop().show(500).siblings().stop().hide(500);
            $(".bpin").eq(ind).stop().show(500).siblings().stop().hide(500);
            $(".bjpic").eq(ind).stop().show().siblings().stop().hide();
            $(".tx").eq(ind).css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
            $(".m").eq(ind).css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
            if (ind == -1) {
                ind = 5;
            }
        });

 

来源：https://www.cnblogs.com/l1314/p/11938036.html