//js
创新互联一直秉承“诚信做人，踏实做事”的原则，不欺瞒客户，是我们最起码的底线！ 以服务为基础，以质量求生存，以技术求发展，成交一个客户多一个朋友！为您提供成都网站设计、做网站、成都网页设计、微信小程序定制开发、成都网站开发、成都网站制作、成都软件开发、重庆APP开发公司是成都本地专业的网站建设和网站设计公司，等你一起来见证！
var isround = "";
var i=0;
$(function(){
isround = setTimeout("change()",3000);
$("div[name=ban] div img:eq(0)").show().siblings().hide();
$(".num li:eq(0)").addClass("current").siblings().removeClass("current");
$(".num li").click(function(){
i=$(".num li").index(this);
$(this).addClass("current").siblings().removeClass("current");
$("div[name=ban] div img").eq($(".num li").index(this)).show().siblings().hide();
isround = setTimeout("change()",3000);
}).hover(function(){
clearTimeout(isround)
},function(){
isround = setTimeout("change()",3000);
})
})
function change(){
if(i==$(".num li").length) i=0;
$(".num li").eq(i).addClass("current").siblings().removeClass("current");
$("div[name=ban] div img").eq(i).show().siblings().hide();
i++;
setTimeout("change()",3000);
}
//html
div name="ban"
div
!--图片--
img src="/resources/images/f1.jpg" width="369px" height="114px" /
img src="/resources/images/f2.jpg" width="369px" height="114px" /
img src="/resources/images/f1.jpg" width="369px" height="114px" /
img src="/resources/images/f2.jpg" width="369px" height="114px" /
img src="/resources/images/f1.jpg" width="369px" height="114px" /
/div
div class="numbox"
!--选项--
ul class="num"
li class="current"/li
li/li
li/li
li/li
li/li
/ul
/div
/div
不懂再问，这是我自己写的一个轮换，里面包括了点击事件，原理是控制图片的显示隐藏，
别的有控制高度等等之类的 。
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
link rel="stylesheet" href=""
style
.swiper-wrapper {
height: 300px;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide:nth-child(1) {
background: red;
}
.swiper-slide:nth-child(2) {
background: green;
}
.swiper-slide:nth-child(3) {
background: blue;
}
/style
/head
body
div class="swiper-container"
div class="swiper-wrapper"
div class="swiper-slide"Slide 1/div
div class="swiper-slide"Slide 2/div
div class="swiper-slide"Slide 3/div
/div
/div
/body
script src=""/script
script language="javascript"
var mySwiper = new Swiper(document.querySelector(".swiper-container"), {
autoplay: true,
})
document.querySelector('.swiper-container').onmouseover = () = {
mySwiper.autoplay.stop();
}
document.querySelector('.swiper-container').onmouseout = () = {
mySwiper.autoplay.start();
}
/script
/html
请采纳
试试这个焦点图切换
有12345数字一起切换
鼠标点一下数字会变换到另一张图片，不点就会自动换
里面有教程和源码
