web前端必學功法之一：輪播圖

# web前端必學功法之一：輪播圖

效果演示:

![在這里插入圖片描述](https://img-blog.csdnimg.cn/759c3e77fb82483892b9ce0413540095.gif#pic_center)

```css

<style>

* {

margin: 0;

padding: 0;

}

/* 去除a標簽的下劃線 */

a {

text-decoration: none;

}

.container {

position: relative;

width: 600px;

height: 400px;

margin: 100px auto 0 auto;

box-shadow: 0 0 5px mediumpurple;

overflow: hidden;

}

.wrap {

position: absolute;

width: 4200px;

height: 400px;

z-index: 1;

}

.container .wrap img {

float: left;

width: 600px;

height: 400px;

}

.container .buttons {

position: absolute;

right: 150px;

bottom: 20px;

width: 200px;

height: 10px;

z-index: 2;

}

.container .buttons span {

margin-left: 5px;

display: inline-block;

width: 20px;

height: 20px;

line-height: 20px;

border-radius: 50px;

background-color: mediumslateblue;

color: white;

cursor: pointer;

text-align: center;

}

.container .buttons span.on {

background-color: red;

}

.container .arrow {

position: absolute;

top: 36%;

color: mediumpurple;

padding: 0 12px;

border-radius: 50%;

font-size: 50px;

z-index: 2;

}

.container .arrow_left {

left: 10px;

}

.container .arrow_right {

right: 10px;

}

.container .arrow:hover {

background-color: rgba(0, 0, 0, 0.3);

}

</style>

```

```html

</div>

</div>

</div>

```

```javascript

var wrap=document.querySelector(".wrap");

var newLeft;

// 上一張

function preImg() {

// 判斷當前圖片是否為最后一張

if (wrap.style.left==="-3600px") {

newLeft=-1200; //是為最后一張就回到最前面一張

} else {

newLeft=parseInt(wrap.style.left) - 600 //不是就到上一張,因為當前wrap.style.left值是個字符串，所以就需要parseInt()

}

wrap.style.left=newLeft + "px"; // 新位置的值

index--; //上一張，每次圖標就減去1

if(index < 0){ //index最小為0

index=4;

}

showCurrentDot();

}

// 下一張

function nextImg() {

// 判斷當前圖片是否為最后一張

if (wrap.style.left==="0px") {

newLeft=-2400; //是為最后一張，就回到第一張

} else {

newLeft=parseInt(wrap.style.left) + 600 //不是第一張就繼續下一張,因為當前wrap.style.left值是個字符串，所以就需要parseInt()

}

wrap.style.left=newLeft + "px"; // 新位置的值

index++; //下一張，每次圖標就加1

if(index > 4){ //index大于4 ，說明到了最后一張

index=0;

}

showCurrentDot();

}

// 自動播放

var timer;

function autoPlay(){

//定時兩秒執行一次，下一章方法調用

timer=setInterval(function(){

nextImg();

},2000)

}

autoPlay();

// 鼠標懸停時，停止圖片輪播

// 找到當前容器，綁定一個onmouserover

document.querySelector(".container").onmouseover=function(){

//清除定時任務

clearInterval(timer);

}

//鼠標離開時，開始輪播圖片

document.querySelector(".container").onmouseleave=function(){

//自動播放

autoPlay();

}

//顯示小圓點

var index=0;

var dots=document.getElementsByTagName("span"); //獲取所有的小圓點

function showCurrentDot(){

for(var i=0; i < dots.length; i++){

//設置圓點不選中

dots[i].className="";

}

//將當前所在位置的圖片對應的小圓點選中

dots[index].className="on";

}

showCurrentDot();

//點擊小圓點事件

for(var i=0; i< dots.length; i++){

//綁定點擊事件

dots[i].onclick=function(){

//獲取點擊的圓點的位置(id屬性值)

var dis=this.id;

//設置wrap的left值

wrap.style.left=-(dis * 600) + "px";

//設置紅點位置

index=dis - 1; //dis是從1開始的，但是索引是從0開始的，所以要減少1

showCurrentDot();

}

</script>

```

## 輪播圖總結

1.這里使用5個小圓點，用7張圖片來輪播，是為了實現無縫輪播，這樣看起來效果比較好一點

2.它的原理：就是將圖片在一行中進行平鋪，把所有的圖片平鋪在頁面中，然后進行計算偏移量，再利用定時器，定時輪播

3.布局很重要。是成功的第一步。

理：

一系列的大小相等的圖片平鋪，利用CSS布局只顯示一張圖片，其余隱藏。通過計算偏移量利用定時器實現自動播放，或通過手動點擊事件切換圖片。

html：

<div id="container">
    <div id="list" style="left: 0px;">
        <img src="./img/1.jpg" alt="1"/>
        <img src="./img/2.jpg" alt="2"/>
        <img src="./img/3.jpg" alt="3"/>
        <img src="./img/4.jpg" alt="4"/>
        <img src="./img/5.jpg" alt="5"/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript：;" id="prev" class="arrow"><</a>
    <a href="javascript：;" id="next" class="arrow">></a>
</div>

container是顯示圖片的區域，list放了所有圖片，buttons是最下方的5個小圓點，prev，next是左右翻頁按鈕

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 20px;
        }

        #container {
            position: relative;
            width: 600px;
            height: 900px;
            border: 3px solid #333;
            overflow: hidden;
            margin: 0 auto;
        }

        #list {
            position: absolute;
            z-index: 1;
            width: 4200px;
            height: 900px;
        }

        #list img {
            float: left;
            width: 600px;
            height: 900px;
        }

        #buttons {
            position: absolute;
            left: 250px;
            bottom: 20px;
            z-index: 2;
            height: 10px;
            width: 100px;
        }

        #buttons span {
            float: left;
            margin-right: 5px;
            width: 10px;
            height: 10px;
            border: 1px solid #fff;
            border-radius: 50%;
            background: #333;
            cursor: pointer;
        }

        #buttons .on {
            background: orangered;
        }

        .arrow {
            position: absolute;
            top: 450px;
            z-index: 2;
            display: none;
            width: 40px;
            height: 40px;
            font-size: 36px;
            font-weight: bold;
            line-height: 39px;
            text-align: center;
            color: #fff;
            background-color: RGBA(0, 0, 0, .3);
            cursor: pointer;
            text-decoration: none;
        }

        .arrow:hover {
            background-color: RGBA(0, 0, 0, .7);
        }

        #container:hover .arrow {
            display: block;
        }

        #prev {
            left: 20px;
        }

        #next {
            right: 20px;
        }
</style>

container 寬高設為一張圖片的大小 overflow: hidden;控制只顯示當前圖片

list height為圖片高度，width設為圖片高度*圖片張數

<a> text-decoration: none;去掉下劃線

確保buttons中每個span所在層置頂，將其設置為最頂端。設置為z-index:2

js:

list初始left:0px默認顯示第一張圖片，js就是操作left來改變當前顯示的圖片，右切就left-圖片寬左切就是left+圖片寬。然后注意就是圖片是可以循環切換，第一張左切就是最后一張，最后一張右切就是第一張。

//圖片寬度
const width=600;
//圖片張數
const pages=5;

功能1：手動點左右箭頭切換圖片，就是左切-圖片寬，右切+圖片寬

function animate(offset) {
  var newLeft=parseInt(list.style.left) + offset;

  if (newLeft > 0) {
    list.style.left=-width * 4 + 'px';
  } else if (newLeft < -width * 4) {
    list.style.left=0 + 'px';
  } else {
    list.style.left=newLeft + 'px';
  }
}

功能2：自動播放，自動播放就是加一個定時器，自動的右切，利用左切、右切很好實現。同時要注意的是鼠標放在圖片上面時，不能切換，就是關掉定時器，鼠標移走，定時器開啟

function play() {
  timer=setInterval(function () {
    next.onclick();
  }, 2000)
}

function stop() {
  clearInterval(timer);
}

container.onmouseover=stop;
container.onmouseout=play;

功能3：點擊下方圓點，切換到對應的圖片。利用圓點的index屬性確定要切到哪一張圖片，當前圖片用index記錄，這樣就可以計算出偏移量利用animate函數就可以切換到對應圖片了。

for (var i=0; i < buttons.length; i++) {
    buttons[i].onclick=function () {
        var clickIndex=parseInt(this.getAttribute('index'));
        var offset=width * (index - clickIndex);
        animate(offset);
        index=clickIndex;
        buttonsShow();
    }
}

想看完整代碼打開https://cocosilent.gitee.io/static/html/index.html直接F12 看源代碼，或者點擊了解更多。

了這么久Win7系統，不過里面的一些功能你可能并不了解。比如，桌面壁紙不僅可以設置一張，而且能多張圖片循環播放哦~ 今天我就教大家如何設置，快來看看吧！

1、在桌面空白位置，點鼠標右鍵，選擇【個性化】；

2、在彈出窗口下方，選擇【桌面背景】；

3、接著，點擊瀏覽按鈕，選擇圖片所在位置（也可以選擇系統自帶的桌面背景）；

4、選擇設置為壁紙的圖片，如果要全選可點擊右上方的全選按鈕；

5、選好后可設置圖片的位置（居中、適應、平鋪等），以及更換圖片時間間隔，是否無序更換等，然后點【保存】。

設置好后，返回個性化窗口會看到【桌面背景】變成了【放映幻燈片】，即為壁紙輪播模式。如果想手動切換下一張壁紙，可右鍵選擇【下一個桌面背景】。

在線咨詢

上一篇：學法減分搜題破解版，分享幾個簡單試用的學習和搜題工具
下一篇：PM技術課｜計算機網絡知多少？

您的項目需求

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

整合營銷服務商

web前端必學功法之一：輪播圖

您的項目需求