引入JQ

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

CSS代码

/* 轮播图部分 */.two_content {width: 100%;height: 490px;position: relative;overflow: hidden;cursor: pointer;z-index: 1;}.bigimages {width: 10000px;height: 500px;z-index: 1;position: relative;}.bigimages img {width: 1536px;height: 482px;}.bigimages :nth-child(1) {z-index: 10;}.right_remove {width: 60px;height: 60px;background-image: url('./../images/right_tb.png');position: absolute;opacity: 0.5;right: -60px;top: 250px;z-index: 10;transition: 1s;}.right_remove:hover {opacity: 1;}.left_remove {width: 60px;height: 60px;background-image: url('./../images/left_tb.png');position: absolute;opacity: 0.5;left: -60px;top: 250px;z-index: 10;transition: 1s;}.left_remove:hover {opacity: 1;}.bigimg_prompt {width: 200px;height: 18px;position: absolute;bottom: 20px;left: 700px;display: flex;justify-content: space-around;z-index: 10;}.bigimg_prompt div {width: 45px;height: 5px;border-radius: 5px;}.bigimg_prompt div:nth-child(1) {background-color: #FFFFFF;}.bigimg_prompt div:nth-child(n+2) {background-color: rgba(0, 0, 0, 0.3);}

HTML代码

 <!-- 第二部分 图片轮播器--><div class="two_content"><div class="left_remove "></div><div class="right_remove"></div><div class="bigimages"><img src="https://img.dpm.org.cn/Uploads/Picture/2022/08/31/s630ec3a73e553.jpg" alt="" data="0"><img src="https://img.dpm.org.cn/Uploads/Picture/2022/09/28/s63340e337270c.jpg" alt="" data="1"><img src="https://img.dpm.org.cn/Uploads/Picture/2022/11/29/s63859d939961e.jpg" alt="" data="2"><img src="https://img.dpm.org.cn/Uploads/Picture/2022/11/29/s6385b09f3f21f.jpg" alt="" data="3"></div><div class="bigimg_prompt"><div class="bigimg_prompt_img "></div><div class="bigimg_prompt_img "></div><div class="bigimg_prompt_img "></div><div class="bigimg_prompt_img "></div></div></div>

JS代码

<script>$(function () {//轮播图var timeIn = setInterval(carousel, 1000 * 4)var bigImgPromptImg = $('.bigimg_prompt_img ')var bigImages = $('.bigimages');var images = $('.bigimages img');var index = 0//轮播样式变化function styleBanner() {images.eq(index).show()images.eq(index).siblings().hide()bigImgPromptImg.eq(index).css("backgroundColor", "#FFFFFF");bigImgPromptImg.eq(index).siblings().css("backgroundColor", "rgba(0, 0, 0, 0.3)");}//自动轮播function carousel() {index++if (index > 3) {index = 0}styleBanner()}//鼠标悬浮停止轮播var twoContent = $('.two_content')var rightRemove = $('.right_remove')var leftRemove = $('.left_remove')twoContent.mouseover(function () {clearInterval(timeIn)rightRemove.css({right: "100px"})leftRemove.css({left: "100px"})})twoContent.mouseout(function () {timeIn = setInterval(carousel, 1000 * 3)rightRemove.css({right: "-60px"})leftRemove.css({left: "-60px"})});//点击底下长条实现切换bigImgPromptImg.click(function () {index = $(this).index();styleBanner()})//向右移rightRemove.click(function () {index++;if (index > 3) {index = 0}styleBanner()})//向左移leftRemove.click(function () {index--;if (index < 0) {index = 3}styleBanner()})})
</script>