学做网站培训课程介绍

当前位置:

网站图片循环swiper横向轮播制作方法

相信大家在有的网站上会看到一些图片横向轮播的效果,它可以自动不断的横向轮播,也支持手动点击轮播。效果如下图:

网站图片循环swiper横向轮播

怎么在自己做网站时,也制作这样的网站图片循环swiper横向轮播效果呢?下面学做网站论坛就介绍一下制作方法。

第一步:在需要显示这种横向轮播的位置 ,放上以下的HTML代码;里面的图片可以换成自己的图片。


<div id="certify">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="static/picture/certify01.png"><p>Picture information 1</p></div>
<div class="swiper-slide"><img src="static/picture/certify02.png"><p>Picture information 2</p></div>
<div class="swiper-slide"><img src="static/picture/certify03.png"><p>Picture information 3</p></div>
<div class="swiper-slide"><img src="static/picture/certify04.png"><p>Picture information 4</p></div>
<div class="swiper-slide"><img src="static/picture/certify05.png"><p>Picture information 5</p></div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

第二步:在网页头部引入swiper横向轮播JS文件与CSS文件;(下载地址:https://pan.baidu.com/s/19e1YcMp3zPqgbpNIDB2pSw?pwd=4sqs)


<link rel="stylesheet" href="static/css/swiper.min.css">
<link rel="stylesheet" href="static/css/certify.css">
<script src="static/js/swiper.min.js"></script>

第三步:在网页底部放上以下的JS代码,用于控制播放速度;


<script>
var certifySwiper = new Swiper('#certify .swiper-container', {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
loop: true,autoplay:true,
loopedSlides: 5,
autoplay: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
//clickable :true,
},
on: {
progress: function(progress) {
for (i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i);
var slideProgress = this.slides[i].progress;
modify = 1;
if (Math.abs(slideProgress) > 1) {
modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
}
translate = slideProgress * modify * 260 + 'px';
scale = 1 - Math.abs(slideProgress) / 5;
zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
slide.transform('translateX(' + translate + ') scale(' + scale + ')');
slide.css('zIndex', zIndex);
slide.css('opacity', 1);
if (Math.abs(slideProgress) > 3) {
slide.css('opacity', 0);
}
}
},
setTransition: function(transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition);
}

}
}

})
</script>

这样就可以制作好这种网站图片循环swiper横向轮播功能了。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 一些特殊的原因,为了表达心情,可以将网站转为黑白网站。怎么将网站转为黑白网站呢?其实是非常简单的,只需要一句CSS代码就可以了。在自己网站的
  • 在很多网站的登录、注册或者表单中,都会使用到各种各样的验证。例如点击图片验证,这种验证需要用户按照要求点击所有对应的图片才算验证通过。效果如
  • 前面的教程我们介绍了怎么安装SSL证书,实现HTTPS安全访问。有的站长使用的是国外的主机,安装了SSL证书后,出现了HTTP和HTTPS同时可以访问网站的情况
  • 外贸网站制作时,有些人会选择Bluehost主机,但有些新手不会使用Bluehost主机建网站,下面介绍一下Bluehost如何安装Wordpress程序建网站教程。方法/
  • 在做网站过程中,经常会遇到一些奇怪的问题。例如一个网站中有的网页的字体图标正常显示,但有的字体图标却显示为空白。如下图:通过浏览器的检查功
  • Z-Blog是一款国内开发的网站程序,在开发过程中,我们怎么通过代码来判断文章所属的分类呢?可以通过以下的判断代码来实现。{if $article.Cat
  • 我们在做网站远程获取数据时,往往需要通过API接口来获取数据,在使用API接口之前,我们通常会使用PostMan软件来测试API是否正常。一些建网站新手不
  • 我们在本地环境下制作好网站之后,想把本地的网站搬家到互联网上,就需要将网站的程序和数据库导入到主机里。在使用阿里云主机导入数据库时,会出现这
  • 以前古文书籍的文字排序是从右到左,向上到下的排列。那么我们自己的网页上的文字也想像古文书籍那样排列,怎么实现呢?对于CSS3中已经有这样的属性来
  • 自从HTML5推出之后,网站上的视频可以像图片一样使用video标签直接播放了。但使用video播放视频有一个缺点就是只能播放小视频,如果视频比较大就会出