JavaScript 圖片橫向滾動輪播

例1: 無縫連續(xù)滾動

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 1000px;
height: 130px;
margin: 100px auto;
border: 1px solid #000;
position: relative;

overflow: hidden; /* 防止?jié)L動的圖片溢出 */
}
ul{
width: 2000px;
position: absolute;
left: 0;
top: 0;
}
li{
float: left;
}
img{
display: block;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
<!--我們在復制一套出來-->
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
</ul>
</div>

<script type="text/javascript">
var ul = document.getElementsByTagName("ul")[0];

setInterval(function(){
    if(getStyle(ul,"left")===-1000){
    ul.style.left = "0px";//執(zhí)行這一行代碼需要多長時間???
    }

    ul.style.left = getStyle(ul,"left") - 1 + "px";
},10)


function getStyle(obj,attr){
    if(window.getComputedStyle){
    return parseInt(window.getComputedStyle(obj)[attr]);
    }else{
    return parseInt(obj.currentStyle[attr]);
    }
}
</script>
</body>
</html>

圖片規(guī)格: 200px 130px

易的CSS3炫酷3D滾動預覽特效， 3D旋轉展示！

效果圖：

實現(xiàn)代碼：

html:

css:

javascript：

影預告動態(tài)滾動效果圖

效果所用知識點：html常用標簽, css浮動定位盒模型，javascript自定義動畫、鼠標跟隨移動特效等。

如果有正在學習前端的伙伴，不知道怎么學習的可以加一下我的前端群589651705，每天都會分享一些企業(yè)級的知識和特效分享。

精美選項卡特效源碼：

中間布局只是UL，li就不發(fā)出來了。

需要更多的炫酷企業(yè)級練習特效，學習方法和面試技巧，敬請關注本頭條號！

在線咨詢

上一篇：XML 實例
下一篇：Web前端：JavaScript最強總結，最全面的零基礎入門教程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

JavaScript 圖片橫向滾動輪播

您的項目需求