用js實現圖片的無縫滾動效果

時間 2020-05-07

原文原文鏈接

實現圖片的無縫滾動就是要讓你的圖片集在必定時間裏自動切換，那就須要js裏的定時器來控制時間。html

　　js中關於定時器的方法有兩種：setTimeout和setInterval。它們接收的參數是同樣的，第一個參數是函數，用於定時器的執行，第二個參數是數字，表示多少毫秒以後執行函數。它們的不一樣點在於setTimeout只執行一次指定的函數，而setInterval則每隔規定的時間就執行一次指定的函數。函數

　　在定時器後面咱們還要知道清除定時器的方法：clearTimeout和clearInterval。它們都只接收一個參數，即定時器返回的值，用於消除指定的定時器。ui

　　知道定時器之後咱們就要想辦法讓圖片動起來，讓圖片元素按必定的速度移位就能實現。能夠用js控制元素的樣式，例如：code

　　oUl.style.left = oUl.offsetLeft + speed + 'px';//其中speed的正負能夠改變移動的方向。htm

　　代碼以下：seo

<!DOCTYPE html>
<html lang="en">圖片

<head>
<meta charset="UTF-8">
<title>ZuiYangDan</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}

#container {
width: 100%;
border: 1px solid #aaa;
margin: 100px 0px;
}

#pictures {
width: 100%;
height: 520px;
overflow: hidden;
position: relative;
}

#ul1 {
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}

#ul1 li {
float: left;
width: 700px;
height: auto;
}

#ul1 li img {
width: 700px;
height: auto;
}ip

</style>
<script>
window.onload = function() {
var oDiv = document.getElementById("pictures");
var oUl = document.getElementById("ul1");
var speed = -3;
var oLi = document.getElementsByTagName("li");get

oUl.innerHTML += oUl.innerHTML;//先把圖片增長一組
oUl.style.width = oLi.length * oLi[0].offsetWidth + "px";string