关闭

两种轮播图实现方式

时间: 2021-02-11阅读: 183标签: 轮播

最近做了一个网站,首页轮播图一直没有达到理想的效果,在网上找了两个实现方法,一个是用css自己实现,一个是用swiper插件,个人认为swiper做的还比较好用。这里只贴出主要的实现代码,想要看具体实现代码及效果可以到对应网址上看:


一、css实现轮播图

原文网址:https://www.jianshu.com/p/550c11f3b731

实现逻辑:

1)将所有的轮播图片放在一个容器里面,并排排列;

2)编写css动画事件:每隔一定时间向左偏移一定距离,距离为一个轮播图宽度;到最后一个轮播图后切换到第一个图片,实现无限循环

优点:

实现逻辑简单,可以直接拿来用

缺点:

轮播图数量固定,如果要增删,需要修改代码;不是一个顺序的无限循环,到达最后一个轮播图后,会有一个快速倒退的动画,效果不是太好

主要实现代码:

<!-- 点击轮播 -->
<div class="slide" style="margin-top: 80px;">

<input type="radio" name="sildeInput" value="0" id="sildeInput1" checked hidden />
<label for="sildeInput1">1</label>

<input type="radio" name="sildeInput" value="1" id="sildeInput2" hidden />
<label for="sildeInput2">2</label>

<input type="radio" name="sildeInput" value="1" id="sildeInput3" hidden />
<label for="sildeInput3">3</label>

<ul>
<li>one-点击切换</li>
<li>two-点击切换</li>
<li>three-点击切换</li>
</ul>
</div>
.slide {
position: relative;
margin: auto;
width: 600px;
height: 200px;
text-align: center;
font-family: Arial;
color: #FFF;
overflow: hidden;
}

.slide ul {
margin: 10px 0;
padding: 0;
width: calc(600px * 3);
transition: all 0.5s;
}

.slide li {
float: left;
width: 600px;
height: 200px;
list-style: none;
line-height: 200px;
font-size: 36px;
}

.slide li:nth-child(1) {
background: #9fa8ef;
}

.slide li:nth-child(2) {
background: #ef9fb1;
}

.slide li:nth-child(3) {
background: #9fefc3;
}

.slide input[name="sildeInput"] {
display: none;
}

.slide label[for^="sildeInput"] {
position: absolute;
top: 170px;
width: 20px;
height: 20px;
margin: 0 10px;
line-height: 20px;
color: #FFF;
background: green;
cursor: pointer;
border-radius: 50%;
}

.slide label[for="sildeInput1"] {
left: 0;
}

.slide label[for="sildeInput2"] {
left: 30px;
}

.slide label[for="sildeInput3"] {
left: 60px;
}

#sildeInput1:checked~ul {
margin-left: 0;
}

#sildeInput2:checked~ul {
margin-left: -600px;
}

#sildeInput3:checked~ul {
margin-left: -1200px;
}

#sildeInput1:checked~label[for="sildeInput1"] {
color: #000;
background: #fff;
}

#sildeInput2:checked~label[for="sildeInput2"] {
color: #000;
background: #fff;
}

#sildeInput3:checked~label[for="sildeInput3"] {
color: #000;
background: #fff;
}


二、swiper插件实现方式

文档网址:https://www.swiper.com.cn/usage/index.html

实现方法:

1)下载插件文件:swiper-bundle.min.js和swiper-bundle.min.css,下载地址:https://www.swiper.com.cn/download/index.html#file1,下载文件后解压,在\swiper-master\package目录下有这两个文件;

2)引入插件文件:

<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
...
<script src="dist/js/swiper-bundle.min.js"></script>
...
</body>
</html>

3)编写轮播html页面:

<div >
<div >
<div >Slide 1</div>
<div >Slide 2</div>
<div >Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div ></div>

<!-- 如果需要导航按钮 -->
<div ></div>
<div ></div>

<!-- 如果需要滚动条 -->
<div ></div>
</div>

4)JS编写代码启动轮播图效果

var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项

// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},

// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})

优点:

对轮播图数量没有限制,增删轮播图不需要修改代码;

功能可配置,自由增删轮播功能,api文档地址:https://www.swiper.com.cn/api/index.html

可以外部控制轮播图,详细可见api文档中的Methods(Swiper方法)

提供import引入方式,可应用在vuereact中。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/10160

js无缝轮播的实现思路

最简单的点击按钮切换图片很简单,给按钮添加click事件监听,改变图片的translateX。当然如果想要轮播图从上到下播放,相应的改变translateY就行。

使用backgroundImage解决图片轮播切换

利用backgroundImage可以添加多张图片,以及位置偏移实现轮播效果:创建一个div;并用backgroundImage给div附图片;利用backgroundPosition调节位置;利用css3 transition调节过渡

swiper在angular.js中使用循环轮播失效的解决方法总汇

我们在anjular.js 中使用了swiper轮播图,把json数据放入swiper-slide中,容易出现swiper循环轮播失效的问题,就此整理一些此问题的解决方法

jquery轮播图的实现

今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相应位置,首先书写的div部分;然后书写style样式部分

原生 js 实现移动端 Touch 轮播图

touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下。结构上,还是用ul、li来存放轮播图片,ol、li来存放轮播小圆点:

vue轮播图_用vue实现一个仿简书的轮播图

Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果。写好css样式,只需改变每张图片的class即可实现轮播效果。可以将轮播图看成两个,如图所示

原生js实现轮播图实例教程

轮播图是前端最基本、最常见的功能,不论web端还是移动端,大平台还是小网站,大多在首页都会放一个轮播图效果。本教程讲解怎么实现一个简单的轮播图效果。

原生JS实现滑动轮播图

纯粹只使用了html+css+JS,发现还是比较简单的,并不需要借助别的插件或类库来实现,核心是把图片组合成一行序列,通过左右移动,以及父元素的overflow:hidden来决定显示的图片

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!