html实现可以折叠的轮播图,四种方式实现轮播图
发布日期:2021-10-21 18:59:16 浏览次数:2 分类:技术文章

本文共 7684 字,大约阅读时间需要 25 分钟。

不论是app,还是网站,基本上都会出现轮播图,今天和大家分享几种不同工具实现轮播图的几种方式。

轮播图的基本样式和功能就不需要解释了,相信能根据题目选择看文章的话都知道啥是轮播图,如果哪位读者老爷真的让非要我解释一下啥是轮播图,求您饶了在下吧,真心词穷~

为了方便大家观看,我把css,html,js都写在一个文件里。

swiper插件实现轮播图

swiper是一个实现轮播图很强大,上手也容易。并且也是现在app,网址等用的最多的,

官方网址:http://www.swiper.com.cn/

下载插件导入,按照教程即可实现精美效果

运行效果:

3bee02f21fbda7de291f8c38375c8ce9.gif

代码部分:html>

Document

.swiper-container{

width: 790px;

height: 340px;

}

![]((1).jpg)
![]((2).jpg)
![]((3).jpg)
![]((4).jpg)
![]((5).jpg)
![]((6).jpg)
![]((7).jpg)
![]((8).jpg)

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,

})

JS实现轮播图

运行效果:

77d461e84fb30ab8942c1d5792bab9ff.gif

代码部分:html>

轮播图

#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;

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
<
>

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[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[j].onmouseover = function() {

currentPage = parseInt(this.innerHTML) - 1;

changePic();

};

}

jQuery实现轮播图

运行结果:

1d74b59c6630665378b63b4cf51ca2f1.gif

代码部分:html>

Document

.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;

}

            

            

            

            

            

            

            

            

>
<

$(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)");

})

})

css3实现轮播图

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

运行效果:

6aa9a123cc2496e22b9eed0fff07dc61.gif

代码部分:html>

* {

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;

}

1

2

3

原文链接:HelloWeb前端网 » 四种方式实现轮播图 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:a0f609b288c7de88131b6f6ba37c81b3.png 196291215&nbsp共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

转载地址:https://blog.csdn.net/weixin_29391349/article/details/117760875 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:html 消息列表,消息列表.html · vevay/new_fixengineer - Gitee.com
下一篇:html css在线调试,怎样调试css样式?

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月22日 18时22分42秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

java国际化bundle_java语言国际化--ResouceBundle、struts 2019-04-21
java图片延迟加载_jQuery实现图片延迟加载 2019-04-21
java开发加入购物车功能_java web开发——购物车功能实现 2019-04-21
Java虚拟机不能满足_深入理解Java虚拟机--读书笔记1/3 2019-04-21
python 协程 asyncio_python – asyncio.as_completed是否会产生期货或协同程序? 2019-04-21
java设定xml文件的encoding_配置web-xml解决中文乱码问题,及各种乱码问题集结 2019-04-21
hanlp java api_java分词工具hanlp介绍 2019-04-21
nginx php 源码安装,Nginx1.12.2加php7.2.0的编译安装 2019-04-21
php 删除字节,php – 删除无效/不完整的多字节字符 2019-04-21
php 实现版本号对比,如何在PHP中实现比较版本号 2019-04-21
php sql 给数据库追加内容,php如何向数据库中的某串数据后追加内容【急】 2019-04-21
php微信小程序获取用户信息,微信小程序授权获取用户详细信息openid的实例详解... 2019-04-21
Java三元运算和if,Java三元运算符与<JDK8兼容性中的if / else 2019-04-21
graphql-php enum,php – 如何在不写长查询的情况下查询所有的GraphQL类型字段? 2019-04-21
php date 函数用法,php中date()日期时间函数使用方法 2019-04-21
php除法获取整数和余数,PHP除法取整和取余数 2019-04-21
java迷宫路径,Java中的迷宫路径查找器 2019-04-21
php substr cnblog,php中substr用法示例 2019-04-21
php链接怎么截取,PHP 截取网页中的固定种子链接 2019-04-21
iis运行不起来php报500,解决IIS上安装thinkphp6运行报500错误 2019-04-21