//js
創(chuàng)新互聯(lián)一直秉承“誠信做人,踏實做事”的原則,不欺瞞客戶,是我們最起碼的底線! 以服務為基礎,以質(zhì)量求生存,以技術求發(fā)展,成交一個客戶多一個朋友!為您提供成都網(wǎng)站設計、做網(wǎng)站、成都網(wǎng)頁設計、微信小程序定制開發(fā)、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、重慶APP開發(fā)公司是成都本地專業(yè)的網(wǎng)站建設和網(wǎng)站設計公司,等你一起來見證!
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數(shù)字一起切換
鼠標點一下數(shù)字會變換到另一張圖片,不點就會自動換
里面有教程和源碼