一、100%比例轮播图

1.jpg

HTML代码

CSS样式

*{

margin: 0;

padding: 0;

box-sizing: border-box;

list-style: none;

}

a{

text-decoration: none;

color: #666;

}

img{

display: block;

}

body{

font-size: 12px;

color: #666;

background-color: #fff;

}

.content{

width: 1200px;

margin: 0 auto;

}

.container{

height: 3000px;

position: relative;

}

/* swiper_bg开始 */

.swiper_bg{

width: 100%;

height: 491px;

position: relative;

margin-top: 30px;

border-top: 1px solid #dd0207;

}

.swiper_bg>a.active{

opacity: 1;

}

.swiper_bg>a{

display: block;

opacity: 0;

width: 100%;

height: 491px;

transition: 1.5s;

position: absolute;

top: 0;

left: 0;

}

.swiper_bg>a:nth-child(1){

background: url(../image/swiper_01.jpg) center center no-repeat;

}

.swiper_bg>a:nth-child(2){

background: url(../image/swiper_02.jpg) center center no-repeat;

}

.swiper_bg>a:nth-child(3){

background: url(../image/swiper_03.jpg) center center no-repeat;

}

.swiper_bg>a:nth-child(4){

background: url(../image/swiper_04.jpg) center center no-repeat;

background-size: 100% 100%;

}

.swiper_bg>a:nth-child(5){

background: url(../image/swiper_05.jpg) center center no-repeat;

background-size: 100% 100%;

}

.swiper_bg>.circle{

position: absolute;

top: 450px;

left: 50%;

transform: translateX(-50%);

display: flex;

z-index: 6;

}

.swiper_bg>.circle>span{

display: block;

width: 12px;

height: 12px;

border-radius: 50%;

background-color: #fff;

margin: 0 5px;

cursor: pointer;

}

.swiper_bg>.circle>span.active{

background-color: transparent;

border: 3px solid #fff;

transform: calc(1.5);

}

/* swiper_bg结束 */

js代码

window.onload = function(){

// 封装获取标签函数

function $(selector){

return document.querySelectorAll(selector)

}

// container swiper_bg

function swiperBg(){

var lis = $('.swiper_bg a')

var circles = $('.circle span')

var indexCir = 0

var timer = setInterval(play,3000)

// 轮播

function play(){

indexCir++

if(indexCir>=lis.length){

indexCir = 0

}

for(var i=0;i

lis[i].className = ''

lis[i].style.zIndex = '0'

circles[i].className = ''

}

lis[indexCir].className = 'active'

lis[indexCir].style.zIndex = '2'

circles[indexCir].className = 'active'

}

// circles

circles.forEach(function(item,index){

item.onmouseenter = function(){

clearInterval(timer)

for(var i=0;i

circles[i].className = ''

lis[i].className = ''

lis[i].style.zIndex = '0'

}

this.className = 'active'

lis[index].className = 'active'

lis[index].style.zIndex = '2'

indexCir = index

}

item.onmouseleave = function(){

timer = setInterval(play, 3000)

}

})

// 浏览器优化

document.addEventListener("visibilitychange", function() {

if(document.hidden) {

clearInterval(timer) // 浏览器隐藏，清除计时器

} else {

timer = setInterval(play, 3000) // 浏览器显示，正常轮播

}

})

}

swiperBg()

}

二、手动箭头轮播图

2.jpg

三、简易轮播图

3.jpg