html 轮播 平移,网站轮播图的实现-平移版
/*關于輪播圖，相信大家都不陌生，各大網站上都有它的身影。
*那么我們如何實現這樣一個東西呢？
*希望這篇博文能幫到你
*/
/*上圖就是我們今天需要實現的效果
先來確認一下我們的需求：
需求1：鼠標移入輪播圖，顯示上一頁，下一頁的箭頭，鼠標移出消失
需求2：點擊上一頁，下一頁實現圖片切換，導航欄的數字效果跟著變化
需求3：點擊導航頁碼，也可以實現圖片切換
需求4：讓他實現自動輪播，鼠標移入輪播圖取消自動輪播
*/
/*首先先分析一下我們的頁面構成，我們用一個div把可視區域、頁碼導航部分、上一頁下一頁包裹起來
可視區域包裹著一個ul標簽，里面每一個li標簽裝有我們需要輪播的圖片
設定ul的寬度等于li標簽數量乘以圖片的真實寬度(offsetWidth)，讓我們的圖片呈一列顯示，
無論用浮動還是定位的方式都可以，本例子用定位的方式，為什么叻？因為我們div還裝有別的一些東西，
也需要用到定位，這樣比較方便一點...代碼后面呈現，我們現在開始從需求1開始分析
*/
需求1
這個需求實現比較簡單，我們只需要給裝有這些元素的大盒子加上一個onmouseover事件和onmouseout事件
讓上一頁下一頁部分顯示或者隱藏即可 用到display屬性。
需求2
給我們的上一頁下一頁添加點擊事件，onclick
頁面默認顯示第一張，所以我們可以設置一個變量index來記錄我們當前輪播的是哪張圖片。
每點擊一次下一頁index++，再調用我封裝好的animation方法實現平移效果切換。(每點擊一次，ul向左移動...實現圖片切換)
緊接著，如果頁碼下標與index一致，說明是當前頁面，需要改變樣式
ok，這樣一來，我們基本需求就實現了，那么現在問題又來了，當index達到第5張的時候，此時index=4，
我再點一次會發生什么情況？會發現ul移到了沒有圖片的地方，頁碼導航也隨之沒有了樣式
這種情況，我們如何解決呢？為了更好的實現我們的效果，其實我們可以加多一行li代碼存儲第1張的圖片，
當我們點擊的時候，index=5，雖然我們程序員知道這是第六張，但在用戶眼里，這就是第一張圖片，
我們做一個特殊處理，將第一頁的頁碼的樣式修改。
當我們在第六張點擊的時候，此時我們可以修改ul的位置，再將index設置為0，讓它繼續進行下一頁的操作。
這樣我們就可以神不知鬼不覺的實現我們的需求啦。
上一頁也是同樣的原理。
需求3
我們給每一個頁碼導航一個屬性，讓它代表它是對應的哪一張圖片，
當我們點擊頁碼的時候，將這個屬性取出來，賦值給我們的全局變量index，
這樣一來，我們就可以輕松的實現我們動畫平移的效果，
再使用排他思想，除了點擊的這個以外，樣式清空，只給我們這個點擊的賦予樣式。
需求4
這個就比較簡單了，設置一個定時器，每隔一秒鐘觸發一次下一頁的函數體即可，
給大盒子的鼠標移入事件加入清除計時器的效果，移出的時候重新開啟計時器效果，
PS：記得保存計時器id，用于清除
接下來看下我們完整的代碼吧，希望這篇博文對你有幫助。
padding:0;
margin:0;
list-style:none;
border:0;
}
.all {
width:500px;
height:200px;
padding:7px;
border:1px solid #ccc;
margin:100px auto;
position:relative;
}
.screen {
width:500px;
height:200px;
overflow:hidden;
position:relative;
}
.screen li {
width:500px;
height:200px;
overflow:hidden;
float:left;
}
.screen ul {
position:absolute;
left:0;
top:0px;
width:3000px;
}
.all ol {
position:absolute;
right:10px;
bottom:10px;
line-height:20px;
text-align:center;
}
.all ol li {
float:left;
width:20px;
height:20px;
background:#fff;
border:1px solid #ccc;
margin-left:10px;
cursor:pointer;
}
.all ol li.current {
background:yellow;
}
#arr {
display:none;
}
#arr span {
width:40px;
height:40px;
position:absolute;
left:5px;
top:50%;
margin-top:-20px;
background:#000;
cursor:pointer;
line-height:40px;
text-align:center;
font-weight:bold;
font-family:'黑體';
font-size:30px;
color:#fff;
opacity:0.3;
border:1px solid #fff;
}
#arr #right {
right:5px;
left:auto;
}
需求分析：(1)每隔2s，自動實現下一頁點擊功能
(2)當鼠標移入box時，清除定時器，切換手動操作
(3)當鼠標移出box時，開啟定時器，切換自動輪播
* 細節：下一頁邏輯代碼會執行多次，只需要放入函數中(解決代碼復用的問題)
*/
//1.獲取元素
var box = id('box');//最外面div，有邊框
var screen = document.getElementsByClassName('screen')[0];//獲取圖片可視div,screen
var ul = screen.children[0];//圖片列表ul標簽
var ol = screen.children[1];//頁碼標簽
var liList = ul.children;//圖片li標簽數組
var olList = ol.children;//頁碼li標簽數組
var arr = id('arr');//上一頁下一頁所在的div
var left = id('left');//上一頁按鈕
var right = id('right');//下一頁按鈕
//聲明一個全局變量，記錄當前應該顯示圖片的下標
var index = 0;
var timeID = null;//記錄自動輪播定時器id
timeID = setInterval(function ( ) {
nextPage();
},2000);
//2.鼠標移入移出，顯示/隱藏上一頁下一頁按鈕
box.onmouseover = function ( ) {
arr.style.display = 'block';
//清除自動輪播，切換手動操作
clearInterval(timeID);
}
box.onmouseout = function ( ) {
arr.style.display = 'none';
timeID = setInterval(function ( ) {
nextPage();
},2000);
}
//3.上一頁下一頁點擊事件
//上一頁
left.onclick = function ( ) {
//(1)邊界檢測
if(index == 0){//如果是第一張 index = 0
//修改index為最大下標
index = liList.length-1;
//瞬間修改ul的位置為最后一張
ul.style.left = -index*screen.offsetWidth + 'px';
}
//(2)圖片下標-1
index--;
//(3)動畫滾動圖片 移動距離： index* screen盒子的寬度
animationMove(ul,-index*screen.offsetWidth);
//(4)使用排他思想改變頁碼樣式
for(var i = 0;i
if(i == index){//如果頁碼下標與index一致，說明是當前頁面，需要改變樣式
olList[i].className = 'current';
}else{
olList[i].className = '';
}
}
//(5)如果是數組的最后一張，頁碼應該顯示第一張
if(index == liList.length-1){
olList[0].className = 'current';
}
console.log ( index );
}
//下一頁
right.onclick = function ( ) {
nextPage();
}
//將下一頁的邏輯代碼存入函數中
function nextPage ( ) {
//(1)邊界檢測
if(index == liList.length-1){//如果index圖片下標是圖片數組的最大下標則不移動
ul.style.left = '0px';//瞬間改變ul的位置為0
index = 0;//下標復位
}
//(2)圖片下標+1
index++;
//(3)動畫滾動圖片 移動距離： index* screen盒子的寬度
animationMove(ul,-index*screen.offsetWidth);
//(4)使用排他思想改變頁碼樣式
for(var i = 0;i
if(i == index){//如果頁碼下標與index一致，說明是當前頁面，需要改變樣式
olList[i].className = 'current';
}else{
olList[i].className = '';
}
}
//(5)如果是數組的最后一張，頁碼應該顯示第一張
if(index == liList.length-1){
olList[0].className = 'current';
}
console.log ( index );
}
//4.給頁碼添加點擊事件
for(var i = 0;i
//4.1 給每一個頁碼添加一個自定義屬性記錄下標
olList[i].setAttribute('yemaIndex',i);
olList[i].onclick = function ( ) {
//4.2 獲取當前頁碼點擊的下標
var yemaIndex = this.getAttribute('yemaIndex');
//4.3 修改index位置為頁碼下標
index = yemaIndex;
//4.4 開始滾動
animationMove(ul,-index*screen.offsetWidth);
//4.5 使用排他思想改變頁碼樣式
for(var j = 0;j
if(olList[j] == this){
this.className = 'current';
}else{
olList[j].className = '';
}
}
}
}
/*
** Create by zengjiahao on 2018/04/26
* 動畫封裝函數
*/
/**1.平移動畫
*
* @param obj 要移動的元素
* @param target 要移動的目標距離
*/
function animationMove ( obj,target ) {
//每一次移動之前，先結束上一次的定時器
clearInterval(obj.timeID);
/*1.全局變量只能存儲一個定時器，無法實現多個元素同時移動
2.每一個元素在移動的時候，將定時器作為自己的屬性
* 類似于運動員在跑步的時候，每一個運動員的身上都有一個標簽記錄定時器，
誰到達終點，回收誰的定時器
*/
obj.timeID = setInterval(function ( ) {
//1.獲取元素當前位置
var currentLeft = obj.offsetLeft;
//2.計算本次移動的距離
/* 從左往右移動： 目標位置 > 當前位置 當前位置+=10
從右往左移動： 目標位置 < 當前位置 當前位置-=10
ifLeft: true:從左往右 false：從右往左
*/
var isLeft = target>currentLeft?true:false;
if(isLeft){
currentLeft += 15;
}else{
currentLeft -= 15;
}
//3.邊界檢測
/*從左往右true: currentLeft < target
從右往左false: currentLeft > target
邊界檢測思路：
* 如果isLeft為true，current
* 如果isLeft為false，currentLeft > target這個條件成立，需要移動，否則到達目的地
*/
//這個三元表達式： 如果isLeft是true則返回currentLefttarget
if(isLeft==true?currentLefttarget){
obj.style.left = currentLeft + 'px';
}else{
clearInterval(obj.timeID);//清除定時器
obj.style.left = target + 'px';
}
},10);
}
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的html 轮播 平移,网站轮播图的实现-平移版的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电脑如何一键返回到桌面
- 下一篇： 职高学的计算机单招考试能换专业吗,高职单