網(wǎng)站輪播圖(banner)--無縫輪播
時(shí)間：2023-09-27 10:12:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-09-27 10:12:01 來源：網(wǎng)站運(yùn)營
網(wǎng)站輪播圖(banner)--無縫輪播：
現(xiàn)在各個(gè)網(wǎng)站的制作都離不開一些圖片的輪播，也經(jīng)常會(huì)使用一些插件來完成，那么具體的原理以及自己能寫一個(gè)這樣的功能嗎？
現(xiàn)在流行的是用戶體驗(yàn)，早期的圖片輪播與現(xiàn)在的方式早已發(fā)生變化，那么接下來介紹一下無縫的輪播。
舉例:四張圖輪播，向后不停的切換不會(huì)產(chǎn)生晃眼的拖動(dòng)效果
實(shí)現(xiàn)原理：
html中body部分css部分
其實(shí)最重要的部分是JS部分，控制
其實(shí)理解也不難。
這里用了四張圖，那么我們需要復(fù)制第一張圖，追加到圖片最末處，這樣產(chǎn)生假性的５張圖了，在向左點(diǎn)擊時(shí)為了不產(chǎn)生晃眼效果，追加一張圖是為了利用css屬性迅速將整個(gè)banner部分歸位到 {left:0} 且這樣利用css拖動(dòng)肉眼是根本察覺不到的,在什么時(shí)候迅速歸位呢，就是在點(diǎn)擊到最后一張(也就是復(fù)制的那張),寫個(gè)代碼需要一個(gè)判斷,
if(i==size){
$(".banner .img").css({left:0});
i=1;
}
如果點(diǎn)擊到最后一張，那么將banner拖動(dòng)到0的位置，再將計(jì)數(shù)器
i=1也就是第二張圖，為什么是這樣，因?yàn)閯傸c(diǎn)的那最后一張實(shí)際也是第一張的克隆，所以肉眼看到的就是第一張，那再點(diǎn)一下是不是需要看到的第二張呢。原因就是這樣的原理。
同理，在點(diǎn)向右的按紐時(shí)也需要一個(gè)判斷,
if(i == -1){
$(".banner .img").css({left:-(size-1)*520});
i=size-2;
}
$(".banner .img").stop().animate({left:i*-520},500);
}
這樣的一個(gè)無縫輪播效果即產(chǎn)生了，自己也可以再優(yōu)化一下是不是也能寫一個(gè)插件了呢^_^!
在線咨詢