基於原生js的圖片輪播效果簡單實現

時間 2019-11-18

原文原文鏈接

基本效果以下：

實現了三張圖片自動輪播+按鍵點擊切換的效果。css

基本思想：

圖片輪播的效果和老式電影院的膠片放映形式很類似，在老式的電影院放映中，使用長長的膠片記錄影片，膠片上是按順序排列的一系列圖片，經過快速經過放映機放映口，使這些圖片產生一個連貫的切換效果，造成了動態的影片。因此，這裏圖片輪播的形式也能夠採用這種方式來造成動畫效果。html

形式以下圖：ide

（黑框即咱們的最外層的容器，充當放映機的存在；綠框就是膠片，上面搭載着不少的圖片；粉框內即咱們要輪播的圖片）函數

從上圖出發，咱們要作到圖片輪播，那麼只須要完成如下部分便可。動畫

1.設置一個最外層的容器，這個容器就是咱們要展現圖片的區域，如上面的黑框部分，用overflow:hidden將超出顯示區域的內容所有隱藏掉。spa

2.在最外層容器內設置一個膠片容器，用來將要展現的圖片按從左到右的順序排放，好比使用ul，將其寬度設成最外層容器寬度*N（圖片數量）,而且設置絕對定位position:absolute,由於咱們要經過控制left屬性來移動整個膠片實現圖片切換的效果。code

3.在膠片容器裏面使用li來存放要展現的圖片，使用float:left讓全部圖片在膠片容器裏面從左到有排列。htm

4.使用js修改left值控制膠片容器向左或向右移動，經過循環定時器進行連續小幅度修改left以達到動畫的連貫效果。blog

如下爲代碼實現，能夠做爲參考：

html部分事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--最外層的容器充當放映機-->
<div id="container">
    <!--第二層充當膠捲,用來存放多張圖片-->
    <ul id="content">
        <li class="list"><img src="img/1.jpg" alt=""></li>
        <li class="list"><img src="img/2.jpg" alt=""></li>
        <li class="list"><img src="img/3.png" alt=""></li>
    </ul>
</div>
<button id="moveLeft">點我切換</button>
<script src="js/main.js"></script>
</body>
</html>

css部分

/*初始化*/
*{
    padding:0;
    margin:0;
}

/*做爲放映機存在的最外層容器,固定寬高,經過overflow隱藏超出其區域的內容*/
#container{
    width:560px;
    height:300px;
    overflow: hidden;
    position: relative;
}
/*這個容器充當膠捲設成絕對定位用來存放多個圖片,圖片排在一行裏面*/
#content{
    list-style: none;
    width:2000px;
    position: absolute;
    left:0;
    right:0;
}
/*這是每張圖片的設置,圖片大小和最外層的放映機同樣,並經過float讓其排在同一行裏面*/
.list{
    width:560px;
    float: left;
}
/*這是按鈕*/
#moveLeft{
    width:100px;
}

JS部分

//使用自執行函數隔離做用域
var Slider=(function () {
    //記錄left的值
    var moveLeft=0;
    // 初始化,綁定輪播事件和點擊事件
    function init(){
        var content=document.getElementById('content');
        var button1=document.getElementById('moveLeft');
        //此處爲自動輪播
        setInterval(animate,5000,content,20);
        //此處爲綁定按鈕進行點擊切換輪播
        button1.addEventListener('click',function (e) {
            setTimeout(animate,100,content,20);
        });
    }
    //經過定時器實現輪播的動畫效果
    function animate(content,speed) {
        if(moveLeft===0){
            var timer1=setInterval(function () {
                moveLeft-=speed;
                if(moveLeft>-560) {
                    content.style.left=moveLeft+'px';
                }
                else if(Math.abs(moveLeft+560)<speed){
                    content.style.left=-560+'px';
                    clearInterval(timer1);
                }else{
                    clearInterval(timer1);
                }
            },10);
        }else if(moveLeft===-560){
            var timer2=setInterval(function () {
                if(moveLeft>-1120) {
                    moveLeft -= speed;
                    content.style.left=moveLeft+'px';
                }
                else if(Math.abs(moveLeft+1120)<speed){
                    content.style.left=-1120+'px';
                    clearInterval(timer2);
                }else{
                    clearInterval(timer2);
                }
            },10);
        }else if(moveLeft===-1120){
            var timer3=setInterval(function () {
                if(moveLeft<0){
                    moveLeft+=2*speed;
                    content.style.left=moveLeft+'px';
                }
                else if(Math.abs(moveLeft)<2*speed){
                    content.style.left=0+'px';
                    clearInterval(timer3);
                }else{
                    clearInterval(timer3);
                }
            },10);
        }
    }
    return{
        init:init,
        animate:animate
    }
})();

Slider.init();

相關標籤/搜索

每日一句

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