JavaScript 圖片橫向滾動輪播

例1: 無縫連續滾動

<!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; /* 防止滾動的圖片溢出 */
}
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";//執行這一行代碼需要多長時間???
    }

    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>

圖片規格: 200px 130px

姐姐最近迷上了css3

so研究了一個純用css3制作的幻燈片輪播

6不6，就問你們6不6，沒有js，沒有jq，我覺得我好棒，哈哈哈。

但其實做起來還是蠻復雜的，首先我先把框架搭好，看到底下和左右的按鈕沒有，如果是jq我們就得選中到他然后用下標來實現點擊切換對應的圖。

那css怎么去實現呢？我們先搭6個radio（因為我這用了6張圖），然后用label的for屬性去指向radio。要知道radio他默認樣式特別丑，還改變不了，除非你用圖片然后用js去實現。這里呢，小姐姐就教你個小方法，咱就用label標簽去做，那我就可以改變形狀，然后功能指向radio就好了.

直接上代碼

至于丑八怪radio就默默的隱藏幕后就好

現在就是這么一個效果，切換已經實現，你可以先別把radio隱藏，你可以點擊試試是否已經指向

至于圖片那酷炫的效果，待小姐姐下回分解，想要源碼142991222求我呀

端實用特效：javascript制作騰訊新聞輪播小案例

javascript正則實現QQ空間換膚效果源碼：

源碼以上傳至群589651705群文件，小伙伴們可以進群自行下載。

更加系統的小案例和學習方法可以關注我的微信公眾號：‘學習web前端’關注后回復‘給我資料’可以領取一套完整的學習視頻

在線咨詢

上一篇：ThinkPHP之去掉文章中的所有HTML標簽并截取部分內容作為簡介
下一篇：JavaScript 根據指定的字符串格式格式化日期

您的項目需求

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

整合營銷服務商

JavaScript 圖片橫向滾動輪播

端實用特效：javascript制作騰訊新聞輪播小案例

您的項目需求