輪播圖,自動輪播，左右點擊輪播，按序號輪播，事例：京東首頁

時間 2019-11-17

標籤動輪左右點擊按序事例京東首頁简体版

原文原文鏈接

<!DOCTYPE html>

<html>

<head>

* {

margin: 0;

padding: 0;

}

#sliderWrap {

position: relative;

margin: 0 auto;

width: 730px;

height: 454px;

margin-top: 200px;

overflow: hidden;

}

#sliderContent {

position: absolute;

height: 100%;

left: -730px;

}

#sliderContent a {

float: left;

display: inline-block;

height: 100%;

}

#sliderNumber {

position: absolute;

top: 420px;

left: 290px;

}

#sliderNumber ul {

display: flex;

width: 150px;

justify-content: space-between;

list-style-type: none;

cursor: pointer;

}

#sliderNumber ul li {

width: 20px;

height: 20px;

border-radius: 50%;

background: rgb(62, 62, 62);

color: white;

text-align: center;

line-height: 20px;

}

.button {

position: absolute;

top: 200px;

width: 30px;

height: 60px;

line-height: 60px;

text-align: center;

background: rgba(0, 0, 0, 0.2);

color: white;

font-size: 32px;

cursor: pointer;

display: none;

}

#sliderBtnRight {

left: 700px;

}

</style>

</head>

<body>

</div>

<ul>

</ul>

</div>

</div>

</div>

</body>

var sliderWrap = document.getElementById('sliderWrap');

var sliderContent = document.getElementById('sliderContent');

var sliderBtnLeft = document.getElementById('sliderBtnLeft');

var sliderBtnRight = document.getElementById('sliderBtnRight');

var aTags = document.getElementsByTagName('a');

// querySelector和querySelectorAll是經過css選擇器來選取對應的標籤或者符合條件的標籤

var lis = document.querySelectorAll('#sliderNumber li'); //獲取li數組

var imgs = document.querySelectorAll('.show');//獲取除了第一張和最後一張以外的圖片

// 一、根據圖片的數量從新定義content的寬度

sliderContent.style.width = aTags[0].offsetWidth * aTags.length + 'px';

// 二、對slierWrpt進行鼠標移入移出事件添加 ;鼠標移入left、right按鈕顯示，移出隱藏

sliderWrap.onmouseenter = function() {

sliderBtnLeft.style.display = 'block';

sliderBtnRight.style.display = 'block';

}

sliderWrap.onmouseleave = function() {

sliderBtnLeft.style.display = 'none';

sliderBtnRight.style.display = 'none';

}

/* 三、對鼠標移入，移出left、right按鈕添加事件；鼠標移入到sliderBtnLeft，sliderBtnRight時

自動播放中止；鼠標移出時自動播放開始 */

sliderBtnLeft.onmouseenter = function() {

clearInterval(timerOutter);

}

sliderBtnLeft.onmouseleave = function() {

timerOutter = setInterval('animateMove(lastIndex + 1, 1 ,true)',2000);

}

sliderBtnRight.onmouseenter = function() {

clearInterval(timerOutter);

}

sliderBtnRight.onmouseleave = function() {

timerOutter = setInterval('animateMove(lastIndex + 1, 1 ,true)',2000);

}

/* 四、對鼠標點擊left、right按鈕添加點擊事件；點擊sliderBtnLeft時，中止自動播放，圖片向右移動，

點擊sliderBtnRight時，中止自動播放，圖片向左移動*/

sliderBtnLeft.onclick = function() {

clearInterval(timerOutter);

animateMove(lastIndex - 1, -1, false);

lastIndex--;

}

sliderBtnRight.onclick = function() {

clearInterval(timerOutter);

lastIndex = animateMove(lastIndex + 1, 1, false);

lastIndex++;

}

// 其次定義輪播圖必備的變量

var t = 0;// current times, 當前執行動畫的次數

var b = 0; // begin value, 起始值

var c = -730; //change in value, 變化值

var d = 70; // duration,持續時間

var timer; // 自動輪播定時器

var timerOutter; //定時器

var lastIndex = 0; //上一個顯示的圖片在數組中的下標

/*五、對鼠標放入數組lis中添加事件；鼠標放入lis中中止自動播放，左右按鈕隱藏，且顯示當前圖片

鼠標移開lis中先清理定時器，左右按鈕顯示，恢復自動播放*/

for (var i = 0; i < lis.length; i++) {

// 給每一個li標籤設定自定義屬性index，記錄其在數組中的下標

lis[i].index = i;

lis[i].onmouseenter = function() {

clearInterval(timerOutter);

sliderBtnLeft.style.display = 'none';

sliderBtnRight.style.display = 'none';

animateMove(event.target.index, event.target.index - lastIndex, false);

}

lis[i].onmouseleave = function() {

clearInterval(timerOutter);

sliderBtnLeft.style.display = 'block';

lastIndex = event.target.index;

timerOutter = setInterval('animateMove(lastIndex + 1, 1, true)', 2000)

}

/*六、對lis數字標籤顏色處理，顯示當前圖片時背景變爲紅色，其餘的爲灰色

function showCurrentNumberTag(index) {

for (var i = 0; i < lis.length; i++) {

lis[i].style.background = 'rgb(62,62,62)';

}

lis[index].style.background = 'rgb(180,30,30)'; // 根據傳入的下標更改當前數字標籤顏色

}

// 調用函數，初始爲index爲0；

showCurrentNumberTag(0);

七、定義位移動畫函數

currentIndex:當前須要執行位移動畫的圖片的下標

count:一共有多少張圖片須要一次執行位移動畫

isAuto:是不是自動輪播，即定時器調用仍是手動點擊

function animateMove(currentIndex,count,isAuto) {

// 爲了確保不出錯，每次位移動畫時先清除定時器

clearInterval(timer);

b = -730 * (lastIndex + 1);

c = -730 * count;

function move() {

t++;

sliderContent.style.left = Tween.Linear(t,b,c,d) + 'px';

if (t == d) {

clearInterval(timer);

t = 0; //復位

}

timer = setInterval(move,1); // 啓動定時器timer

/*判斷圖片移動到最左邊和最右邊時修改,

當圖片移動到最左邊時，修改數字標籤顏色，把左邊的圖片移動到右邊上一張圖片爲最後一張，即lastIndex = [5];

當圖片移動到最右邊時，修改數字標籤顏色，把右邊的圖片移動到左邊上一張圖片爲最後一張，即lastIndex = [0];

其餘狀況圖片展現爲當前index；

if (currentIndex == -1) {

showCurrentNumberTag(imgs.length - 1);

sliderContent.style.left = -730 * imgs.length + 'px';

lastIndex = imgs.length;

} else if (currentIndex == imgs.length) {

showCurrentNumberTag(0);

sliderContent.style.left = -730 + 'px';

lastIndex = isAuto ? 0 : -1;

} else {

showCurrentNumberTag(currentIndex);

if (isAuto) {

lastIndex++;

}

return lastIndex;

}

// 啓動定時器

timerOutter = setInterval('animateMove(lastIndex + 1, 1 ,true)',1000);

</script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。