轮播图的四种方法

其他 2019-10-09 10:24:31 阅读次数: 0

1.swiper插件实现轮播图

swiper是一个实现轮播图很强大，上手也容易。并且也是现在app，网址等用的最多的，
官方网址：http://www.swiper.com.cn/
下载插件导入，按照教程即可实现精美效果

代码部分

<!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">![]((1).jpg)</div> <div class="swiper-slide">![]((2).jpg)</div> <div class="swiper-slide">![]((3).jpg)</div> <div class="swiper-slide">![]((4).jpg)</div> <div class="swiper-slide">![]((5).jpg)</div> <div class="swiper-slide">![]((6).jpg)</div> <div class="swiper-slide">![]((7).jpg)</div> <div class="swiper-slide">![]((8).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>

2.JS实现轮播图

<!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"> ![](img/0.jpg) <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>


3.jQuery实现轮播图

<!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"> ![](img/(1).jpg) ![](img/(2).jpg) ![](img/(3).jpg) ![](img/(4).jpg) ![](img/(5).jpg) ![](img/(6).jpg) ![](img/(7).jpg) ![](img/(8).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>


4.css3实现轮播图

css3的轮播实用性差，但是也可以使用，但是可以锻炼我们的思维。

<!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>![](img/0.jpg)</li> <li>![](img/1.jpg)</li> <li>![](img/2.jpg)</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>


用jquery写的无缝左右滑动轮播图

这里的圆点的html代码是通过js实现的，全jquery实现无缝轮播
1、html代码
<div class="banner">
<ul class="imgs">
<li><a href="#"><img src="/img/pic1.jpg" alt="第1张图片"></a></li>
<li><a href="#"><img src="/img/pic2.jpg" alt="第2张图片"></a></li>
<li><a href="#"><img src="/img/pic3.jpg" alt="第3张图片"></a></li>
<li><a href="#"><img src="/img/pic4.jpg" alt="第4张图片"></a></li>
<li><a href="#"><img src="/img/pic5.jpg" alt="第5张图片"></a></li>
</ul>
<!-- 小圆点 -->
<ul class="nums"></ul>
<!-- <ul class="des">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
<li>第一个</li>
</ul> -->
<div class="btns">
<span class="prev"><</span>
<span class="next">></span>
</div>
</div>

2、css代码
div.banner{
display:block;
position: relative;
margin:0 auto;
width:1200px;
height:535px;
margin-top:30px;
overflow: hidden;
z-index: 1;
}
.imgs{
position: absolute;
top: 0;
left: 0;
}
.des{
position: absolute;
bottom: 0;
left: 0;
z-index: -2;
background: #ccc;
}
.des li{
float: left;
width: 1200px;
}
.imgs li{
float: left;
}
.nums{
position: absolute;
bottom: 10px;width: 100%;
text-align: center;
font-size: 0;
}
.nums li{
width: 10px;
height: 10px;
background:rgba(0,0,0,0.5);
display: block;
border-radius: 100%;
display: inline-block;
margin: 0 5px;
cursor: pointer;
}
.btns{
display: none;
}
.btns span{
display: block;
width: 50px;
height: 100px;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 40px;
line-height: 100px;
text-align: center;
cursor:pointer;
}
.btns .prev{
position: absolute;
left: 0;
top: 50%;
margin-top: -50px;
}
.btns .next{
position: absolute;
right: 0;
top: 50%;
margin-top: -50px;
}
.nums .active{
background-color: #fff;
}
.hide{
display: none;
}

3、全部jquery-js代码

$(function(){
var i=0;
var timer=null;
for (var j = 0; j < $('.imgs li').length; j++) { //创建圆点
$('.nums').append('<li></li>')
}
$('.nums li').first().addClass('active'); //给第一个圆点添加样式
var firstimg=$('.imgs li').first().clone(); //复制第一张图片
$('.imgs').append(firstimg).width($('.imgs li').length*($('.imgs img').width()));
//第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度
$('.des').width($('.imgs li').length*($('.imgs img').width()));
// 下一个按钮
$('.next').click(function(){
i++;
if (i==$('.imgs li').length) {
i=1; //这里不是i=0
$('.imgs').css({left:0}); //保证无缝轮播，设置left值
};
$('.imgs').stop().animate({left:-i*1200},300);
if (i==$('.imgs li').length-1) { //设置小圆点指示
$('.nums li').eq(0).addClass('active').siblings().removeClass('active');
$('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
}else{
$('.nums li').eq(i).addClass('active').siblings().removeClass('active');
$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
}
})
// 上一个按钮
$('.prev').click(function(){
i--;
if (i==-1) {
i=$('.imgs li').length-2;
$('.imgs').css({left:-($('.imgs li').length-1)*1200});
}
$('.imgs').stop().animate({left:-i*1200},300);
$('.nums li').eq(i).addClass('active').siblings().removeClass('active');
$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
})
//设置按钮的显示和隐藏
$('.banner').hover(function(){
$('.btns').show();
},function(){
$('.btns').hide();
})
//鼠标划入圆点
$('.nums li').mouseover(function(){
var _index=$(this).index();
$('.imgs').stop().animate({left:-_index*1200},300);
$('.nums li').eq(_index).addClass('active').siblings().removeClass('active');
$('.des li').eq(_index).removeClass('hide').siblings().addClass('hide');
})
//定时器自动播放
timer=setInterval(function(){
i++;
if (i==$('.imgs li').length) {
i=1;
$('.imgs').css({left:0});
};
$('.imgs').stop().animate({left:-i*1200},300);
if (i==$('.img li').length-1) {
$('.nums li').eq(0).addClass('active').siblings().removeClass('active');
$('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
}else{
$('.nums li').eq(i).addClass('active').siblings().removeClass('active');
$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
}
},3000)
//鼠标移入，暂停自动播放，移出，开始自动播放
$('.banner').hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(function(){
i++;
if (i==$('.imgs li').length) {
i=1;
$('.imgs').css({left:0});
};
$('.imgs').stop().animate({left:-i*1200},300);
if (i==$('.img li').length-1) {
$('.nums li').eq(0).addClass('active').siblings().removeClass('active');
$('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
}else{
$('.nums li').eq(i).addClass('active').siblings().removeClass('active');
$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
}
},3000)
})
})

 

猜你喜欢

转载自www.cnblogs.com/jhflyfish/p/11639950.html
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022