<nav id="cckgk"></nav>

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>
<!--我們在復(fù)制一套出來-->
<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í)行這一行代碼需要多長時(shí)間???
    }

    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

吧，用swiper做輪播圖其實(shí)很簡單，特別是官網(wǎng)在使用說明上已經(jīng)講得很清楚了。
但我還是在這里嘮叨幾下。
現(xiàn)有的js庫是很豐富的，其實(shí)我們常用到的組件都有了，輪播圖就是其中之一。
本文就講一下怎么用swiper做輪播圖，因?yàn)樗且粋€(gè)很出名的輪播圖組件。
更多文章請關(guān)注我的頭條號，我是落筆承冰。

一、百度一下“swiper”，進(jìn)入它的中文官網(wǎng)。

swiper歷經(jīng)了多個(gè)版本，我們就用最新的swiper4來說說吧。

二、調(diào)用swiper的方法有很多種，比如用npm安裝之類的，這里我們就用下載css和js庫文件來實(shí)現(xiàn)吧。

解壓后，里面有很多文件，找哪個(gè)呢？就是這兩個(gè)，一個(gè)是css，一個(gè)是js。

三、我們創(chuàng)建一個(gè)空白test.html文件來添加swiper。

引用剛才我們下載的那兩個(gè)文件。

四、開始做html部分。

接下來放入輪播的模塊了。

五、大家知道html只是一個(gè)外表，js才是內(nèi)核，于是我們加入js部分。

輪播是可以用了，但是真的很很不成看，只有一個(gè)很小的范圍可以輪播。

六、我們試著改一下輪播圖的大小，并加個(gè)顏色。

我們用谷歌瀏覽器F12進(jìn)入控制臺，模擬手機(jī)界面看一下效果。

七、果然是滿寬高只有一半，可怎么劃動，只能劃到第三塊，怎么樣才能讓三回到一，循環(huán)劃動呢，加個(gè)loop:true就可以了。

然后我們再改改樣式，讓里面的字變大居中，變白色，再把body的邊距去掉。

八、再加個(gè)功能，讓它自動播，我不動手，讓它每秒跑到下一下張圖。

九、我們再加個(gè)分頁器，分頁器是什么東西，就是輪播下方的一個(gè)個(gè)小圓點(diǎn)，一點(diǎn)就是一頁，這里我們應(yīng)該有三個(gè)點(diǎn)。

十、小圓點(diǎn)是有了，也會隨圖滾動了，可是它不能點(diǎn)擊啊，那好，我們加入這個(gè)就可以了點(diǎn)了。

還真的可以點(diǎn)擊了。

十一、人家的輪播圖有左右按鈕可以控制圖片上一張下一張，我們也可以加。

在js里聲明相應(yīng)的對象

十二、即然只是入門，那么到這里就可以了，更多的使用方法，大家可以去官網(wǎng)查一下，最后，我把圖片放進(jìn)去，做出真正的輪播圖吧。

我搞了三張圖，三張圖寬高大小不一，直接放進(jìn)去了，多少會讓某些圖片少一截或是只看見一部分，這個(gè)問題大家自己修改圖片或添加樣式來處理了，我就不再說了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS 圖片輪播</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.swiper{
    width: 590px;
    height: 470px;
    margin: 0 auto;
    border: 5px solid red;
    /* 相對定位 */
    position: relative;
}
/* 5張輪播圖 */
.swiper>ul,.swiper>ul>li{
    width: 590px;
    height: 470px;
}
.swiper>ul{
    position: relative;
}
.swiper>ul>li{
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}
.swiper>ul>li.show{
    display: block;
}
/* 左右按鈕 */
.swiper>a{
    color: #fff;
    width: 30px;
    height: 60px;
    font-size: 24px;
    text-decoration: none;
    text-align: center;
    line-height: 60px;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 205px;
}
.swiper>.prev{
    left: 0;
}
.swiper>.next{
    right: 0;
}
/* 小圓點(diǎn) */
.swiper>ol{
    width: 150px;
    height: 20px;
    position: absolute;
    left: 220px;/*此處可以寫成left:50%;margin-left:-75px;*/
    bottom: 10px;
}
.swiper>ol>li{
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.8);
}
.swiper>ol>li.active{
    background-color: #f00;
}
</style>
</head>
<body>
<!-- 輪播圖 -->
<div class="swiper">
<!-- 5張圖片 -->
<ul>
<li class="show"><a href=""><img src="img/jd1.jpg"/></a></li>
<li><a href=""><img src="img/jd2.jpg"/></a></li>
<li><a href=""><img src="img/jd3.jpg"/></a></li>
<li><a href=""><img src="img/jd4.jpg"/></a></li>
<li><a href=""><img src="img/jd5.jpg"/></a></li>
</ul>
<!-- 5個(gè)小圓點(diǎn) -->
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<!-- 左右的按鈕 -->
<a class="prev" href=""><</a>
<a class="next" href="">></a>
</div>
</body>
</html>

在線咨詢

上一篇：CSS tab-size 屬性
下一篇：CSS Id 和 Class選擇器

您的項(xiàng)目需求

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

整合營銷服務(wù)商

JavaScript 圖片橫向滾動輪播

您的項(xiàng)目需求