四种方式实现轮播图
来源：互联网 发布：如何注册网络域名 编辑：程序博客网 时间：2024/06/15 12:16
转载自：http://www.jianshu.com/p/bd1f34e7e953
不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。
轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮播图，如果哪位读者老爷真的让非要我解释一下啥是轮播图，求您饶了在下吧，真心词穷~
为了方便大家观看，我把css，html，js都写在一个文件里。
swiper插件实现轮播图
swiper是一个实现轮播图很强大，上手也容易。并且也是现在app，网址等用的最多的，
官方网址：http://www.swiper.com.cn/
下载插件导入，按照教程即可实现精美效果
运行效果
GIF.gif
代码部分
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="swiper-3.4.1.min.css"> <script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script> <script type="text/javascript" src="swiper-3.4.1.jquery.min.js"></script> <style type="text/css"> .swiper-container{ width: 790px; height: 340px; } </style></head><!-- 结构以及class的类名不允许更改 --><body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">.jpg)</div> <div class="swiper-slide">.jpg)</div> <div class="swiper-slide">.jpg)</div> <div class="swiper-slide">.jpg)</div> <div class="swiper-slide">.jpg)</div> <div class="swiper-slide">.jpg)</div> <div class="swiper-slide">.jpg)</div> <div class="swiper-slide">.jpg)</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><script type="text/javascript"> var mySwiper = new Swiper ('.swiper-container', { // 滚动方向 horizontal/vertical direction: 'horizontal', // 自动播放 autoplay:2000, // 是否循环播放 loop: true, // 如果需要分页器（小圆点） // 是否需要分页器 pagination: '.swiper-pagination', // 点击分页器是否切换到对应的图片 是 true 否 false paginationClickable:true, // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。 // 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。 // 操作包括触碰，拖动，点击pagination等。 autoplayDisableOnInteraction:false, }) </script></body></body></html>JS实现轮播图
运行效果
GIF.gif
代码部分
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <style> #loopDiv{ width: 790px; height: 340px; margin: 0 auto; position: relative; } #list{ list-style: none; position: absolute; bottom: 10px; left: 250px; } #list li{ float: left; width: 20px; height: 20px; line-height: 20px; text-align: center; 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></head><body> <div id="loopDiv">  <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <div id="left" class="chooseBut"><</div> <div id="right" class="chooseBut">></div> </div> <script type="text/javascript"> var jsDivBox = document.getElementById("loopDiv"); //图片节点 var jsImg = document.getElementById("pic"); //左右按钮节点 var jsLeft = document.getElementById("left"); var jsRight = document.getElementById("right"); //获取所有的li var jsUl = document.getElementById("list"); var jsLis = jsUl.getElementsByTagName("li"); //让第一个小圆点变为红色 jsLis[0].style.backgroundColor = "red"; //显示当前的图片下标 var currentPage = 0; //启动定时器 var timer = setInterval(func, 1000); function func() { currentPage++; changePic(); } function changePic() { if (currentPage == 8) { currentPage = 0; } if (currentPage == -1) { currentPage = 7; } //更换图片 //"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></body></html>jQuery实现轮播图
运行结果
GIF.gif
代码部分
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .pic{ width: 790px; height: 340px; margin: 10px auto; position: relative; overflow: hidden; } .content{ width: 99999px; height: 340px; position: absolute; left: 0px; top: 0px; } .content img{ float: left; } .index{ position: absolute; left: 300px; bottom: 5px; width: 200px; height: 20px; list-style: none; } .index li{ width: 10px; height: 10px; border-radius: 50%; float: left; 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: red; } </style> <script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script></head><body> <div class="pic"> <div class="content"> .jpg) .jpg) .jpg) .jpg) .jpg) .jpg) .jpg) .jpg) </div> <ul class="index"> <li class="first"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="right">></div> <div class="left"><</div> </div> <script type="text/javascript"> $(function(){ //每个固定的时间移动图片 var timer = setInterval(picLoop,1000); var index = 0; function picLoop(){ index++; if (index==8) {index=0;} $(".content").animate({"left":-790*index},300); $("li").eq(index).css("background-color","red") .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","red") .siblings().css("background-color","rgba(100,100,100,0.3)"); index = $(this).index(); $(".content").animate({"left":-790*index},300); }) $(".left").click(function(){ index--; if (index==-1) {index=7;} $(".content").animate({"left":-790*index},300); $("li").eq(index).css("background-color","red") .siblings().css("background-color","rgba(100,100,100,0.3)"); }) $(".right").click(function(){ index++; if (index==8) {index=0} $(".content").animate({"left":-790*index},300); $("li").eq(index).css("background-color","red") .siblings().css("background-color","rgba(100,100,100,0.3)"); }) }) </script></body></html>css3实现轮播图
css3的轮播实用性差，但是也可以使用，但是可以锻炼我们的思维。
运行效果
GIF.gif
代码部分
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin:0; padding:0; } ul { list-style:none; } .loop{ position: relative; margin:30px auto; width:600px; height:300px; } #wrap { position:relative; width:600px; height:300px; border:1px solid #9cc5ef; overflow:hidden; } #slider { width:300%; height:100%; font:100px/400px Microsoft Yahei; text-align:center; color:#fff; margin-left:0; -webkit-animation:slide1 3s ease-out infinite; } #slider li { float:left; width:600px; height:100%; } #slider img{ width:600px; height:100%; } /*创建三种动画策略*/ @-webkit-keyframes slide1 { 0% { margin-left:0;} 23% { margin-left:0;} 33% { margin-left:-600px;} 56% { margin-left:-600px;} 66% { margin-left:-1200px;} 90% { margin-left:-1200px;} 100% {margin-left:0;} } @-webkit-keyframes slide2 { 0% { margin-left:-600px;} 23% { margin-left:-600px;} 33% { margin-left:-1200px;} 56% { margin-left:-1200px;} 66% { margin-left:0;} 90% { margin-left:0;} 100% {margin-left:-600px;} } @-webkit-keyframes slide3 { 0% { margin-left:-1200px;} 23% { margin-left:-1200px;} 33% { margin-left:0;} 56% { margin-left:0;} 66% { margin-left:-600px;} 90% { margin-left:-600px;} 100% {margin-left:-1200px;} } /*当我们点击对应按钮时显示对应的动画*/ #first:checked ~ #wrap #slider { -webkit-animation-name:slide1; } #second:checked ~ #wrap #slider { -webkit-animation-name:slide2; } #third:checked ~ #wrap #slider { -webkit-animation-name:slide3; } /*短暂地取消动画名称，模拟重启动画*/ #first:active ~ #wrap #slider { -webkit-animation-name:none; margin-left:0; } #second:active ~ #wrap #slider { -webkit-animation-name:none; margin-left:-600px; } #third:active ~ #wrap #slider { -webkit-animation-name:none; margin-left:-1200px; } #opts { width:600px; height:40px; margin:auto; color:#fff; text-align:center; font:16px/30px Microsoft Yahei; position: absolute; top: 260px; left: 250px; } #opts label { float:left; width:30px; height:30px; margin-right:10px; background:#cccccc; cursor:pointer; border-radius: 50%; } #opts label:hover { background:#405871; } /* 隐藏Input按钮*/ #first, #second, #third { display:none; } </style> </head> <body> <div class="loop"> <input type="radio" name="slider" id="first"> <input type="radio" name="slider" id="second"> <input type="radio" name="slider" id="third"> <div id="wrap"> <ul id="slider"> <li></li> <li></li> <li></li> </ul> </div> <div id="opts"> <label for="first">1</label> <label for="second">2</label> <label for="third">3</label> </div> </div> </body></html>觉得有收获就点赞啦
学习前端的过程中，我整理了很多资料，也希望能共享出来帮助到更多刚接触或者接触前端不久的同学。不过也为了把控微信群的质量，入群的一定要是前端的小伙伴才可以。入群我就会把资料发给每个人，每天也会挑选前沿的前端高质量文章发到群里给大家学习。想加入的同学可以加笑笑微信：iamaixiaoxiao，拉你入群。再次强调，保证群高质量，群非前端不加，请谅解哦。扫描微信二维码也可以。
0 0
- 四种方式实现轮播图
- 代理的四种实现方式
- 四种方式实现Flex页面跳转
- Spring实现AOP的四种方式
- Java 单例实现四种方式
- SWAP方法的四种实现方式
- 四种方式实现SQLServer 分页查询
- 内部类的四种实现方式
- spring实现注入的四种方式
- Android四种方式实现计时器
- Spring实现AOP的四种方式
- 四种方式实现SQLServer 分页查询
- 四种方式实现SQLServer 分页查询
- Ui 实现多线程的四种方式
- 四种方式实现SQLServer 分页查询
- Spring实现AOP的四种方式
- Android实现监听的四种方式
- 四种方式实现SQLServer 分页查询
- Java笔记~ArrayList
- jmap、 jhat 分析堆内存溢出
- 36、C++对C语言的面向对象的扩充
- JavaSE_36th_Set接口
- 2001年北理复试上机题(B)
- 四种方式实现轮播图
- 活动的最佳实践之随时随地退出程序
- 228. Summary Ranges
- ECharts No.4
- 【B/S总结篇】
- LeetCode 394. Decode String
- 初始TreeSet
- 解决Mac中tomcat启动后报无访问权限的异常
- 探究单例模式（java）
