實現簡單的輪播圖

EsgynChina 發布于2019-08-22 10:39 / 1981人閱讀

摘要：小練習輪播圖組件任務描述在和上一任務同一目錄下面創建一個文件，在目錄中創建，并在其中編碼，實現一個輪播圖的功能。實現思路考察對節點，定時器，事件的處理。

小練習3：輪播圖組件

任務描述
在和上一任務同一目錄下面創建一個task0002_3.html文件，在js目錄中創建task0002_3.js，并在其中編碼，實現一個輪播圖的功能。

圖片數量及URL均在HTML中寫好

可以配置輪播的順序（正序、逆序）、是否循環、間隔時長

圖片切換的動畫要流暢

在輪播圖下方自動生成對應圖片的小點，點擊小點，輪播圖自動動畫切換到對應的圖片

效果示例：http://echarts.baidu.com/ 上面的輪播圖（不需要做左右兩個箭頭）

實現原理：控制圖片的left值，把不需要的圖片進行hidden。

實現思路

考察對dom節點，定時器，事件的處理。

JS部分

第一步實現點擊切換

獲取left //記得轉換成數字，向左移動減600，向右移動加600

封裝animate 函數

/*
*進行輪播
*/
function animate(offset){
    var newleft = parseInt(list.style.left) + offset;
    list.style.left = newleft + "px";
}

next.onclick = function(){
    animate(-600);
}
prev.onclick = function(){
    animate(600);
}

第二步實現無限輪播

實現：在第一張圖和最后一張圖都加上一張輪播的附屬圖片

進行判斷，當移動到附屬圖時，把list-style-left的值改為原圖，進行跳轉

改變小圓點位置

實現：設置一個index，每次移動時改變 index的值，把屬性設置為“on”

如果大于5，則跳轉到1，如果小于1，則跳轉到5；

在原有代碼上添加

    
    function animate(offset){
    var newleft = parseInt(list.style.left) + offset;
    list.style.left = newleft + "px";
    if(newleft > -600){
        list.style.left = -3000+ "px";
    }
    else if(newleft < -3000){
        list.style.left = -600 + "px";
    }
}
next.onclick = function(){
    if(index==5){
        index = 1;
    }
    else{
        index+=1;
        
    }
    showButton();
    animate(-600);
}
prev.onclick = function(){
    if(index==1){
        index = 5;
    }
    else{
        index-=1;
    }
    showButton();
    animate(600);
}

第三步點擊小圓點切換

獲取自定義的index屬性 //getAttribute

算出偏移量 //offset=-600*（目標位置的Index - 當前的Index）

/*
*顯示小圓點
*/
function showButton(){
    for(var i = 0; i
第四步自動轉換

相對應每隔一段時間去執行next.onclick

鼠標移動到圖片上是觸發。


/*
*進行自動播放
*/
function play(){
    timer = setInterval(function(){
        next.onclick();
    },3000);
}
/*
*停止自動播放
*/
function stop(){
    clearInterval(timer);
}
container.onmouseover = play;
            
container.onmouseout = stop;

簡單的輪播圖就完成了
附上完整代碼



    
    Document
    
    


    
        
            
            
            
            
            
            
            
        
        
            
            
            
            
            
        
        < 
        >

GPU云服務器云服務器 react實現輪播圖 php的輪播怎么做輪播圖寫輪播圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91005.html

小白成長日記：一步一步寫個輪播圖插件

摘要：并不是所有人寫的代碼或者插件都適合小白使用，比如這是一個的滾動插件，大多數人使用了之后發現滾動不了，去作者提，其實是他們并不懂滾動的原理。最近在這里看了一篇關于面試的文章《回顧自己三次失敗的面試經歷》，作者三次倒在了輪播圖上。囧，所以我也寫個輪播圖看看。這次是用jQuery寫的，因為最近一直在研究jQuery插件的寫法，所以用jQuery寫的，而且我發現，我vue用太多，完全不熟悉d...

notebin 2019-08-22 11:15 評論0 收藏0
用vue寫一個仿簡書的輪播圖

摘要：寫好樣式，只需改變每張圖片的即可實現輪播效果。可以將輪播圖看成兩個，如圖所示寫好每個的樣式容器寬度容器高度大圖片寬度小圖片寬度小圖片高度模板包含兩個輪播圖部分，設置一個，定時改變。原文地址：Bougie的博客先展示最終效果：showImg(https://segmentfault.com/img/remote/1460000019061753);Vue的理念是以數據驅動視圖，所以拒...

Tecode 2019-08-30 14:08 評論0 收藏0
用vue寫一個仿簡書的輪播圖

摘要：寫好樣式，只需改變每張圖片的即可實現輪播效果。可以將輪播圖看成兩個，如圖所示寫好每個的樣式容器寬度容器高度大圖片寬度小圖片寬度小圖片高度模板包含兩個輪播圖部分，設置一個，定時改變。原文地址：Bougie的博客先展示最終效果：showImg(https://segmentfault.com/img/remote/1460000019061753);Vue的理念是以數據驅動視圖，所以拒...

cartoon 2019-08-22 15:19 評論0 收藏0
用vue寫一個仿簡書的輪播圖

摘要：寫好樣式，只需改變每張圖片的即可實現輪播效果。可以將輪播圖看成兩個，如圖所示寫好每個的樣式容器寬度容器高度大圖片寬度小圖片寬度小圖片高度模板包含兩個輪播圖部分，設置一個，定時改變。原文地址：Bougie的博客先展示最終效果：showImg(https://segmentfault.com/img/remote/1460000019061753);Vue的理念是以數據驅動視圖，所以拒...

tomlingtm 2019-08-01 18:41 評論0 收藏0
　用js實現點擊切換和自動播放的輪播圖示例

　　js實現點擊切換和自動播放的輪播圖，其實十分簡單，話不多說，我們直接看示例：　　輪播圖案例　　<!DOCTYPEhtml> 　　<html> 　　<head> 　　<metacharset="UTF-8"> 　　<metaname="vie...

3403771864 2022-10-24 21:47 評論0 收藏0