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

吧，用swiper做轮播图其实很简单，特别是官网在使用说明上已经讲得很清楚了。
但我还是在这里唠叨几下。
现有的js库是很丰富的，其实我们常用到的组件都有了，轮播图就是其中之一。
本文就讲一下怎么用swiper做轮播图，因为它是一个很出名的轮播图组件。
更多文章请关注我的头条号，我是落笔承冰。

一、百度一下“swiper”，进入它的中文官网。

swiper历经了多个版本，我们就用最新的swiper4来说说吧。

二、调用swiper的方法有很多种，比如用npm安装之类的，这里我们就用下载css和js库文件来实现吧。

解压后，里面有很多文件，找哪个呢？就是这两个，一个是css，一个是js。

三、我们创建一个空白test.html文件来添加swiper。

引用刚才我们下载的那两个文件。

四、开始做html部分。

接下来放入轮播的模块了。

五、大家知道html只是一个外表，js才是内核，于是我们加入js部分。

轮播是可以用了，但是真的很很不成看，只有一个很小的范围可以轮播。

六、我们试着改一下轮播图的大小，并加个颜色。

我们用谷歌浏览器F12进入控制台，模拟手机界面看一下效果。

七、果然是满宽高只有一半，可怎么划动，只能划到第三块，怎么样才能让三回到一，循环划动呢，加个loop:true就可以了。

然后我们再改改样式，让里面的字变大居中，变白色，再把body的边距去掉。

八、再加个功能，让它自动播，我不动手，让它每秒跑到下一下张图。

九、我们再加个分页器，分页器是什么东西，就是轮播下方的一个个小圆点，一点就是一页，这里我们应该有三个点。

十、小圆点是有了，也会随图滚动了，可是它不能点击啊，那好，我们加入这个就可以了点了。

还真的可以点击了。

十一、人家的轮播图有左右按钮可以控制图片上一张下一张，我们也可以加。

在js里声明相应的对象

十二、即然只是入门，那么到这里就可以了，更多的使用方法，大家可以去官网查一下，最后，我把图片放进去，做出真正的轮播图吧。

我搞了三张图，三张图宽高大小不一，直接放进去了，多少会让某些图片少一截或是只看见一部分，这个问题大家自己修改图片或添加样式来处理了，我就不再说了。

<!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;
}
/* 小圆点 */
.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个小圆点 -->
<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选择器

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript 图片横向滚动轮播

您的项目需求