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前端必学功法之一：轮播图

您的项目需求