(Demo分享)利用原生JavaScript-ScrollLeft-實現做輪播廣告通知
阿新 • • 發佈：2019-06-02
輪播廣告通知整體思路：
1.首先文字的移動利用了JAVA script 中ScrollLeft的知識點；
2.在設定一條一模一樣的新聞，利用無縫輪播圖滾動的原理讓新聞無縫滾動。
3.使用了自執行匿名函式，讓網頁載入後自動開始執行定時器，開始輪播廣告通知。
實現效果：文字實現無縫跑馬燈滾動輪播效果，滑鼠劃入停止滾動，滑鼠移出繼續滾動。
程式碼內有超級詳細的註釋，如有疑問，請留言，會在第一時間回覆！
效果圖：
全部程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
}
html{
width: 100%;
height: 100%;
/*給網頁設定漸變背景色*/
/*在漸變色之前設定一個背景顏色為純色，第二個設定漸變色會將第一個覆蓋覆蓋，此舉是為了防止一些瀏覽器不相容漸變色*/
background-color: #74ebd5;
background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
}
/*內容欄的設定*/
#box{
margin:200px auto 0;
padding:0 10px;
width:1000px;
height:140px;
line-height:140px;
border-radius: 15px;
/*border的dashed 指虛線*/
border:1px dashed green;
background:lightgreen;
}
#box #wrap{
height:140px;
overflow:hidden;
/*wrap元素裡面的文字禁止換行*/
white-space:nowrap;
}
#box span{
color:red;
font-weight:bold;
font-size:50px;
}
/*讓兩條新聞在同一行，把第二條新聞變成行內塊元素*/
#wrap div{
display:inline-block;
font-size: 34px;
}
</style>
</head>
<body>
<div id='box'>
<div id='wrap'>
<div id='conBegin'>
<span>最新訊息：</span>6月3日上午，中國國防部長魏鳳和發言：如果有人膽敢把臺灣從中國分裂出去，中國軍隊別無選擇，必將不惜一戰，必將不惜一切代價，堅決維護祖國統一。
</div>
<!-- 在設定一條一模一樣的新聞，利用無縫輪播圖滾動的原理讓新聞無縫滾動-->
<div id='conEnd'>
<span>最新訊息：</span>6月3日上午，中國國防部長魏鳳和發言：如果有人膽敢把臺灣從中國分裂出去，中國軍隊別無選擇，必將不惜一戰，必將不惜一切代價，堅決維護祖國統一。
</div>
</div>
</div>
<script>
// 這裡這個函式用到自執行匿名函式，前一個括號是一個匿名函式，後一個括號代表立即執行。
// 作用：可以用它建立名稱空間，只要把自己的所有程式碼都寫在這個特殊的函式包裝內，那麼外部就不能訪問，防止程式碼
(function(){
var box = document.getElementById('box');
var conBegin = document.getElementById('conBegin');
var wrap = document.getElementById('wrap');
//利用封裝好的獲取css樣式的函式，來獲取conBegin的寬度
var conBegin_width = getCss(conBegin,'width');
var timer = window.setInterval(move,10);
function move(){
// 核心程式碼！！！
// scrollLeft：是該元素的顯示（可見）的內容與該元素實際的內容的距離！！！
// scrollLeft屬性可以返回或者設定元素內容向左滾動的尺寸。
// 也就是被元素左側所遮擋的尺寸，或者說滾動條向右滾動的距離。
// 返回或者設定的值都是數字，不能帶單位，預設單位是畫素。
// 此屬性相當有用，比如可以用來製作水平無縫滾動效果
// 簡單了說：元素會從scrollLeft的位置顯示該元素的內容。
// 這個屬性只能用於元素設定了overflow的css樣式中，一般和overflow:hideen配合使用
// scrollLeft相當於該元素的顯示（可見）的內容與該元素實際的內容的距離,每執行一次定時就距離加1,就形成了文字滾動效果
wrap.scrollLeft ++;
// 如果是wrap元素的顯示的內容與該元素實際的內容的距離。超過盒子的寬度，就讓scrollLeft為0,從頭開始
if(wrap.scrollLeft >= parseInt(conBegin_width)){
wrap.scrollLeft = 0
}
}
//滑鼠劃過停止定時器
box.onmouseover = function(){
window.clearInterval(timer);
}
// 滑鼠離開啟動定時器
box.onmouseout = function(){
timer = window.setInterval(move,10)
}
}())
// 封裝的一個JS獲取CSS樣式的方法，第一個寫需要獲取的元素，第二個獲取的屬性，第三個引數需要更改的樣式
function getCss(obj,attr,value){
var getStyle = obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
if(arguments.length === 2){
return getStyle;
}else if(arguments.length === 3){
obj.style[attr] = value;
}
}
</script>
</body>
</html>&n