javascript小記五則：用JS寫一個圖片左右自由滾動的「跑馬燈」效果

時間 2019-12-08

標籤 javascript 一個圖片左右自由滾動馬燈效果欄目 JavaScript 简体版

原文原文鏈接

以前看了不少百度搜索出的東西，十個有九個是不能實用的，個個講的都不詳細，今天詳細給你們講解下關於這個圖片「跑馬燈」滾動效果，源碼以下：javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, 
user-scalable=no"/>
<style>
*{margin: 0;padding: 0;}
#div1{
    position: relative;border: 1px solid gray;
    width: 100%;
    margin: 20px auto;
    height: 500px;
    overflow: hidden;
}
#div1 ul{
    position: absolute;
    left: 0;
}
#div1 a{
    position: absolute;
    z-index: 2;
    text-decoration: none;
    top: 45%;
    display: none;
}
#div1 ul li{
    padding: 5px;
    list-style: none;
    width: 400px;
    height: 500px;
    float: left;
}
#div1 ul li img{
    width: 100%;
    height: 100%;
}
</style>
</head>
<body>
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        var oUl = oDiv.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        var aA = oDiv.getElementsByTagName('a');
        var iSpeed = 1;
        var timer = null;
        //計算ul的寬爲全部li的寬的和;
        oUl.innerHTML += oUl.innerHTML+oUl.innerHTML;
        oUl.style.width = aLi[0].offsetWidth*aLi.length+'px';
        function Slider(){
            if (oUl.offsetLeft<-oUl.offsetWidth/2) {
                oUl.style.left = 0;
            }else if(oUl.offsetLeft>0){
                oUl.style.left =-oUl.offsetWidth/2+'px';
            }
            oUl.style.left = oUl.offsetLeft-iSpeed+'px';
        }
        timer =setInterval(Slider,30);
        aA[0].onclick = function(){
            iSpeed = 1;
        }
        aA[1].onclick = function(){
            iSpeed = -1;
        }
        oDiv.onmouseover = function(){
            clearInterval(timer);
        }
        oDiv.onmouseout = function(){
            timer =setInterval(Slider,30);
        }
    };
</script>
<div id="div1">
    <ul>
        <li><img src="../JPG/01.jpg"></li>
        <li><img src="../JPG/02.jpg"></li>
        <li><img src="../JPG/03.jpg"></li>
        <li><img src="../JPG/04.jpg"></li>
    </ul>
    <a href="javascript:;" style="left:10px;"><</a>
    <a href="javascript:;" style="right:10px;">></a>
</div>
</body>
</html>

標註：頭部說明html

一、頭部；<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />這條能夠在博客園搜索下，裏面講的很詳細；java

二、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">：這句話的意思是強制IE瀏覽器使用谷歌框架進行渲染，簡單的說這跟瀏覽器的兼容性有關；web

三、<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>：這一條有興趣的話能夠到CSDN上查找相關說明，很是詳細；chrome

代碼塊詳解一：怎樣改變圖片滾動的方向瀏覽器

    var oDiv = document.getElementById('div1');
        var oUl = oDiv.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        var aA = oDiv.getElementsByTagName('a');
        var iSpeed = 1;//正左負右（改成-1從左到右滾動、1爲從右往左滾動）

代碼塊詳解二：怎樣修改圖片滾動時間快慢框架

    timer =setInterval(Slider,30);
        aA[0].onclick = function(){
            iSpeed = 1; //控制速度的正負
        }
        aA[1].onclick = function(){
            iSpeed = -1;
        }
        oDiv.onmouseover = function(){
            clearInterval(timer);
        }
        oDiv.onmouseout = function(){
            timer =setInterval(Slider,30);
        }

代碼塊詳解三：哪裏替換圖片，圖片是怎麼來的ide

        <li><img src="../JPG/01.jpg"></li>
        <li><img src="../JPG/02.jpg"></li>
        <li><img src="../JPG/03.jpg"></li>
        <li><img src="../JPG/04.jpg"></li>

圖片路徑根據我的web中存放的圖片路徑進行修改，放多少都沒問題；ui

代碼塊詳解四：修改圖片大小，控制圖片的高寬，找到對應修改便可spa

*{margin: 0;padding: 0;}
#div1{
    position: relative;border: 1px solid gray;
    width: 100%;
    margin: 20px auto;
    height: 500px;
    overflow: hidden;
}
#div1 ul{
    position: absolute;
    left: 0;
}
#div1 a{
    position: absolute;
    z-index: 2;
    text-decoration: none;
    top: 45%;
    display: none;
}
#div1 ul li{
    padding: 5px;
    list-style: none;
    width: 400px;
    height: 500px;
    float: left;
}
#div1 ul li img{
    width: 100%;
    height: 100%;
}

相關標籤/搜索

每日一句

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