dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery

1、swiper插件：

需要下载该插件到本地，并用link标签引用其swiper-bundle.min.css文件，用script引用其swiper-bundle.min.js文件，下载地址及官方文档：https://www.swiper.com.cn/。

该插件提供了很多轮播图的参数，可实现各种样式的轮播图，详情参见官方文档。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图-swiper插件</title><link rel="stylesheet" href="./swiper-bundle.min.css"><script src="./swiper-bundle.min.js"></script>
</head>
<body><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1125010569,136668811&fm=26&gp=0.jpg" alt=""></div><div class="swiper-slide"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1917573789,4173076623&fm=26&gp=0.jpg" alt=""></div><div class="swiper-slide"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596352754828&di=d48398b5009a09e83b9cd8f5bc8b3187&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F03%2F31%2Ffd984a04246ebd74ef12d746a74ed2e8.jpg" alt=""></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滚动条 --><!-- <div class="swiper-scrollbar"></div> --></div>
</body>
<style>.swiper-container {width: 790px;height: 340px;}  .swiper-slide img{width: 790px;height: 340px; }
</style>
<script>var mySwiper = new Swiper ('.swiper-container', {direction: 'horizontal', // 垂直切换选项autoplay: {delay: 1000,//1秒切换一次} ,// 自动播放loop: true, // 循环模式选项// effect : 'fade',切换效果// 如果需要分页器pagination: {el:'.swiper-pagination'},// 点击分页器是否切换到对应的图片 是 true 否 falsepaginationClickable:true,// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 用户操作swiper之后，是否禁止autoplay。默认为true：停止。// 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。// 操作包括触碰，拖动，点击pagination等。autoplayDisableOnInteraction:false,// 如果需要滚动条// scrollbar: {//   el: '.swiper-scrollbar',// },})
</script>
</html>

2、原生js

不借助插件实现轮播图的思路有主要有三种：第一：当前图片显示，其他图片不显示；第二：通过操作DOM来改变div的背景图片或者img的src来实现图片切换，第三：外层div设置overflow：hidden，图片通过左右移动出现在当前视图中，如下图：

这种图片切换，存在一个问题：因为不是闭环，左右切换到最边上的时候，会有空白，此时可在最前面加上最后一张图P4-1，最后面加上最前面一张图P1-1，点击向左可以直接到P4-1，然后操作位置到正常序列的P4，就可以正常的向左切换，向右也是一样的原理。

这里原生js利用的是操作DOM切换img的src来实现；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图-js</title>
</head>
<style>ul{padding-inline-start: 0px; /*浏览器默认样式为40px,会导致分页圆点不居中，这里改为0px*/}#loopDiv{width: 790px;height: 340px;margin: 0 auto;position: relative;}#pic{width: 790px;height: 340px;}#list{list-style: none;position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);display: flex;justify-content: space-between;}#list li{float: left;width: 20px;height: 20px;line-height: 20px;border-radius: 50%;background: #aaa;margin-right: 10px;}.chooseBut{width: 50px;height: 80px;background-color: rgba(0,0,0,0.2);color: #fff;font-size: 30px;line-height: 80px;text-align: center;display: none;}#left{position: absolute;left: 0px;top: 130px;}#right{position: absolute;right: 0px;top: 130px;}
</style>
<body><div id="loopDiv"><img id="pic" src=""></img><ul id="list"><li></li><li></li><li></li></ul><div id="left" class="chooseBut"><</div><div id="right" class="chooseBut">></div></div>
</body>
<script>var jsDivBox = document.getElementById("loopDiv");//图片节点var jsImg = document.getElementById("pic");//左右按钮节点var jsLeft = document.getElementById("left");var jsRight = document.getElementById("right");//获取所有的livar jsUl = document.getElementById("list");var jsLis = jsUl.getElementsByTagName("li");//让第一个小圆点变为红色jsLis[0].style.backgroundColor = "red";//显示当前的图片下标var currentPage = 0;//默认显示第一张图片jsImg.src = "img/" + currentPage + ".jpg";//启动定时器var timer = setInterval(func, 1000);function func() {currentPage++;changePic();console.log(currentPage);}function changePic() {if (currentPage == 3) {currentPage = 0;}if (currentPage == -1) {currentPage = 2;}//更换图片//"img/1.jpg"jsImg.src = "img/" + currentPage + ".jpg";//将所有的小圆点颜色清空for (var i = 0; i < jsLis.length; i++) {jsLis[i].style.backgroundColor = "#aaa";}//改变对应小圆点为红色jsLis[currentPage].style.backgroundColor = "red";}//鼠标进入jsDivBox.addEventListener("mouseover", func1, false);function func1() {//停止定时器clearInterval(timer);//显示左右按钮jsLeft.style.display = "block";jsRight.style.display = "block";}//鼠标移出jsDivBox.addEventListener("mouseout", func2, false);function func2() {//重启定时器timer = setInterval(func, 1000);//隐藏左右按钮jsLeft.style.display = "none";jsRight.style.display = "none";}//点击左右按钮jsLeft.addEventListener("click", func3, false);function func3() {currentPage--;changePic();}jsLeft.onmouseover = function() {this.style.backgroundColor = "rgba(0,0,0,0.6)";}jsLeft.onmouseout = function() {this.style.backgroundColor = "rgba(0,0,0,0.2)";}jsRight.addEventListener("click", func4, false);function func4() {currentPage++;changePic();}jsRight.onmouseover = function() {this.style.backgroundColor = "rgba(0,0,0,0.6)";}jsRight.onmouseout = function() {this.style.backgroundColor = "rgba(0,0,0,0.2)";}//进入小圆点for (var j = 0; j < jsLis.length; j++) {jsLis[j].onmouseover = function() {currentPage = parseInt(this.innerHTML) - 1;changePic();};}</script>
</html>

3、jQuery

实现原理与上面的原生js一致，只是jQuery提供了更便捷的API，可以节省代码量；这里主要用的是左右平移的方法实现切换，另外左右平移可以实现过渡效果，我这里没有这样实现，有兴趣的小伙伴也可以把自己的代码晒出来，一起学习。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>轮播图-jQuery</title><script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script><style type="text/css">.pic{width: 790px;height: 340px;margin: 10px auto;position: relative;overflow: hidden;}.content{height: 340px;position: absolute;left: -790px;top: 0px;}.content img{float: left;width: 790px;height: 340px;}.index{position: absolute;left: 50%;bottom: 5px;height: 20px;transform: translateX(-50%);list-style: none;display: flex;justify-content: space-between;}.index li{width: 10px;height: 10px;border-radius: 50%;margin-left: 10px;background-color: rgba(100,100,100,0.3);}.left{width: 30px;height:50px;background-color:rgba(100,100,100,0.5);  position: absolute;left: 0px;top: 150px;line-height: 50px;text-align: center;font-size: 20px;color: #fff;display: none;}.right{width: 30px;height:50px;background-color:rgba(100,100,100,0.5);  position: absolute;right: 0px;top: 150px;line-height: 50px;text-align: center;font-size: 20px;color: #fff;display: none;}.index .first{background-color:black;}</style></script>
</head>
<body><div class="pic"><div class="content"><img src="./img/3.jpg" alt=""><img src="./img/1.jpg" alt=""><img src="./img/2.jpg" alt=""><img src="./img/3.jpg" alt=""><img src="./img/1.jpg" alt=""></div><ul class="index"><li class="first"></li><li></li><li></li></ul><div class="right">></div><div class="left"><</div></div><script type="text/javascript">$(function(){console.log($("img"));//每个固定的时间移动图片var timer = setInterval(picLoop,1000);var index = 0;function picLoop(){index++;console.log(index);if (index==3) {index=0;}$(".content").css("left",-790*(index+1));$("li").eq(index).css("background-color","black").siblings().css("background-color","rgba(100,100,100,0.3)");}//定时器的控制$(".pic").hover(function(){clearInterval(timer);$(".left").show();$(".right").show();},function(){timer = setInterval(picLoop,1000);$(".left").hide();$(".right").hide();})$("li").mouseover(function(){$(this).css("background-color","black").siblings().css("background-color","rgba(100,100,100,0.3)");index = $(this).index();console.log(index);$(".content").css("left",-790*(index+1));})$(".left").click(function(){index--;if (index==-1) {index=2;}$(".content").css("left",-790*(index+1));$("li").eq(index).css("background-color","black").siblings().css("background-color","rgba(100,100,100,0.3)");})$(".right").click(function(){index++;if (index==3) {index=0}$(".content").css("left",-790*(index+1));$("li").eq(index).css("background-color","black").siblings().css("background-color","rgba(100,100,100,0.3)");    })})</script>
</body>
</html>

除以上三种方法以外，还可以用纯css来实现，这里就不列出来了，因为日常也不会用到，哈哈哈，偷个懒。

以上是对轮播图的一个总结，参考链接：https://blog.csdn.net/weixin_41897234/article/details/80658856，欢迎大家指正。

dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery相关推荐

老徐WEB：JS简单实现图片滚动效果轮播图，自动、手动和自适应(二)
轮播图是前端网页中常用的功能,包括PC端和移动端,都会用到轮播图,像咨讯.电商和个人博客等,首页基本都会有轮播图. 老徐在上一篇文章的基础上[最简单详细的轮播图原理和制作过程],又扩展了功能,使之成为 ...
dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件（巨详细）
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...
banner轮播图切换插件
下载地址 banner轮播图切换插件,基于jquery实现的图片轮播效果. dd:
使用CSS实现简单的图片切换（轮播图）
使用CSS实现简单的图片切换(轮播图) 预览图如下: 目录使用CSS实现简单的图片切换(轮播图) 一:首先创建基本布局 1:创建一个div容器 ,里面的ul与ol标签分别对应轮播图片和下方圆点: 二 ...
jQuery和CSS3商品图片预览轮播图插件
这是一款非常实用的 jQuery和 CSS3创意商品图片预览轮播图插件.该轮播图插件以每个商品作为一个轮播图,用户可以在每个商品缩略图中查看该商品的颜色和款式.一般的商务网站都是通过图片来吸引用户, ...
轮播图特效 html+css+js
先看效果: 轮播图做法有很多,效果也有很多.下面是一种简单的两边图片模糊,中间图片放大的轮播图效果.鼠标点击左边或右边的图片后,它们会移动到中间并变大,其它图片移动到到两边并模糊. 点击最右边图片: ...
banner轮播图以及nav导航栏Jquery
轮播图是非常常见的,主要方法是利用了*setInterval()*定时器.隔一段时间就自动显示下一张图片. 首先制作导航栏导航栏的制作非常简单.一般在写导航栏时,都是使用li+a标签的方式. 简单的 ...
微信小程序10：WXML 组件- 轮播图 swiper
微信小程序10:WXML 组件- 轮播图 swiper 官网地址https://developers.weixin.qq.com/miniprogram/dev/component/swiper.ht ...
HTML轮播图完整代码 (原生Javascript）
HTML轮播图完整代码 (原生Javascript) <!DOCTYPE html> <html><head><meta charset="utf- ...

dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery

dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery相关推荐

最新文章

热门文章