html实现可以折叠的轮播图,四种方式实现轮播图

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

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

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

swiper插件实现轮播图

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

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

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

运行效果：

代码部分：html>

Document

.swiper-container{

width: 790px;

height: 340px;

}

.jpg)

.jpg)

.jpg)

.jpg)

.jpg)

.jpg)

.jpg)

.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实现轮播图

运行效果：

代码部分：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实现轮播图

运行结果：

代码部分：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的轮播实用性差，但是也可以使用，但是可以锻炼我们的思维。

运行效果：

代码部分：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” 学习交流群： 196291215&nbsp共同交流并结识同行，在这里说出您的收获与感想或有什么不同的观点，我们期待您的留言，分享，让我们一起进步！