手写轮播图 上下翻页

<div class="swiper-container">

<ul class="swiper-wrapper">

<li class="swiper-slide"></li>

<li class="swiper-slide"></li>

<li class="swiper-slide"></li>

<li class="swiper-slide"></li>

<li class="swiper-slide"></li>

<li class="swiper-slide"></li>

<li class="swiper-slide"></li>

<li class="swiper-slide"></li>

</ul>

<div class="arrowItems">

<div class="left"></div>

<div class="right"></div>

</div>

<div class="swiper-pagination">

<li class="swiper-pagination-custom ">

<span>1</span>

<h4>汇报工作标准</h4>

<p>及时反馈工作执行进度和执行效果</p>

</li>

<li class="swiper-pagination-custom ">

<span>2</span>

<h4>汇报工作标准</h4>

<p>及时反馈工作执行进度和执行效果</p>

</li>

<li class="swiper-pagination-custom ">

<span>3</span>

<h4>汇报工作标准</h4>

<p>及时反馈工作执行进度和执行效果</p>

</li>

<li class="swiper-pagination-custom ">

<span>4</span>

<h4>汇报工作标准</h4>

<p>及时反馈工作执行进度和执行效果</p>

</li>

<li class="swiper-pagination-custom ">

<span>5</span>

<h4>汇报工作标准</h4>

<p>及时反馈工作执行进度和执行效果</p>

</li>

<li class="swiper-pagination-custom ">

<span>6</span>

<h4>汇报工作标准</h4>

<p>及时反馈工作执行进度和执行效果</p>

</li>

<li class="swiper-pagination-custom ">

<span>7</span>

<h4>汇报工作标准</h4>

<p>及时反馈工作执行进度和执行效果</p>

</li>

</div>

</div>

 

.swiper-container {

width: 100%;

height: 560px;

position: relative;

overflow: hidden;

}

 

.swiper-wrapper {

width: 100%;

height: 560px;

position: absolute;

top: 0;

left: 0;

}

 

.swiper-wrapper .swiper-slide {

background-position: center center;

background-repeat: no-repeat;

width: 100%;

height: 100%;

}

 

.swiper-wrapper .swiper-slide:nth-child(1) {

background-image: url(../img/banner.png);

}

 

.swiper-wrapper .swiper-slide:nth-child(2) {

background-image: url(../img/banner3.png);

}

 

.swiper-wrapper .swiper-slide:nth-child(3) {

background-image: url(../img/banner2.png);

}

 

.swiper-wrapper .swiper-slide:nth-child(4) {

background-image: url(../img/banner.png);

}

 

.swiper-wrapper .swiper-slide:nth-child(5) {

background-image: url(../img/banner.png);

background-color: #4280e7;

}

 

.swiper-wrapper .swiper-slide:nth-child(6) {

background-image: url(../img/banner3.png);

background-color: #444544;

}

 

.swiper-wrapper .swiper-slide:nth-child(7) {

background-image: url(../img/banner2.png);

background-color: aquamarine;

}

 

.swiper-wrapper .swiper-slide:nth-child(8) {

background-image: url(../img/banner.png);

background-color: aquamarine;

}

 

.swiper-pagination {

position: absolute;

height: 390px;

width: 260px;

top: 124px;

left: 360px;

background-color: #2d2aab;

border-radius: 8px;

}

 

@media screen and (max-width: 1600px) {

.swiper-pagination {

left: 200px;

}

}

 

.arrowItems {

width: 0px;

height: 0;

}

 

.arrowItems div {

width: 0px;

height: 0px;

}

 

.swiper-pagination .swiper-pagination-custom {

width: 260px;

height: 48px;

box-sizing: border-box;

border-bottom: 1px solid #7680d4;

color: #cacaca;

line-height: 48px;

padding-left: 10px;

text-align: left;

cursor: pointer;

}

 

.swiper-pagination-custom>span {

display: inline-block;

width: 15px;

height: 15px;

text-align: center;

line-height: 15px;

font-size: 8px;

vertical-align: middle;

}

 

.swiper-pagination-custom:nth-of-type(1)>span {

background: #fd537f;

}

 

.swiper-pagination-custom:nth-of-type(2)>span {

background: #f6c15d;

}

 

.swiper-pagination-custom:nth-of-type(3)>span {

background: #148aff;

}

 

.swiper-pagination-custom:nth-of-type(4)>span {

background: #4a4a4a;

}

 

.swiper-pagination-custom:nth-of-type(5)>span {

background: #686868;

}

 

.swiper-pagination-custom:nth-of-type(6)>span {

background: #919191;

}

 

.swiper-pagination-custom:nth-of-type(7)>span {

background: #c9c9c9;

}

 

.swiper-pagination-custom>h4 {

display: inline-block;

margin-left: 10px;

height: 48px;

line-height: 48px;

box-sizing: border-box;

font-size: 15px;

font-weight: 500;

}

 

.swiper-pagination-custom>p {

display: none;

}

 

.liActive {

height: 78px !important;

}

 

.pActive {

display: block !important;

padding-left: 26px !important;

width: 224px !important;

height: 18px !important;

line-height: 18px !important;

font-size: 14px !important;

}

 

.hActive {

height: 46px !important;

line-height: 46px !important;

font-size: 18px !important;

}

$(document).ready(function() {

 

var picIndex = 0;

//为小圆点绑定鼠标经过事件

$('.swiper-pagination .swiper-pagination-custom ').mouseover(function(event) {

event.stopPropagation();

picIndex = $(this).index();

var top = -(picIndex) * 560 + 'px';

$('.swiper-wrapper').stop().animate({ 'top': top });

clearInterval(timeId);

$(this).addClass('liActive').siblings().removeClass('liActive');

$(this).children('p').addClass('pActive').parent().siblings().children('p').removeClass('pActive');

$(this).children('h4').addClass('hActive').parent().siblings().children('h4').removeClass('hActive');

});

 

//自动播放

autoplayCarousel();

 

var timeId;

 

function autoplayCarousel() {

timeId = setInterval(function() {

$('.arrowItems .right').click();

}, 2000)

}

 

$('.swiper-pagination .swiper-pagination-custom').eq(0).addClass('liActive').siblings().removeClass('liActive');

$('.swiper-pagination .swiper-pagination-custom').eq(0).children('p').addClass('pActive').siblings().removeClass('pActive');

$('.swiper-pagination .swiper-pagination-custom').eq(0).children('h4').addClass('hActive').siblings().removeClass('hActive');

//右边按钮

$('.arrowItems .right').click(function() {

 

if (picIndex == $('.swiper-wrapper li').length - 1) {

picIndex = 0;

$('.swiper-wrapper').css({ 'top': '0px' });

}

picIndex++;

var top = -(picIndex) * 560 + 'px';

$('.swiper-wrapper').stop().animate({ 'top': top });

 

//控制小圆点

if (picIndex == $('.swiper-wrapper li').length - 1) {

$('.swiper-pagination .swiper-pagination-custom').eq(0).addClass('liActive').siblings().removeClass('liActive');

$('.swiper-pagination .swiper-pagination-custom').eq(0).children('p').addClass('pActive').siblings().removeClass('pActive');

$('.swiper-pagination .swiper-pagination-custom').eq(0).children('h4').addClass('hActive').siblings().removeClass('hActive');

$('.swiper-pagination .swiper-pagination-custom').eq(6).removeClass('liActive');

$('.swiper-pagination .swiper-pagination-custom').eq(6).children('p').removeClass('pActive')

$('.swiper-pagination .swiper-pagination-custom').eq(6).children('h4').removeClass('hActive')

} else {

$('.swiper-pagination .swiper-pagination-custom').eq(picIndex).addClass('liActive').siblings().removeClass('liActive');

$('.swiper-pagination .swiper-pagination-custom').eq(picIndex).children('p').addClass('pActive').parent().siblings().children('p').removeClass('pActive');

$('.swiper-pagination .swiper-pagination-custom').eq(picIndex).children('h4').addClass('hActive').parent().siblings().children('h4').removeClass('hActive');

}

});

//左边按钮

$('.arrowItems .left').click(function() {

 

if (picIndex == 0) {

picIndex = $('.swiper-wrapper li').length - 1;

$('.swiper-wrapper').css({ 'top': -($('.swiper-wrapper li').length - 1) * 560 + 'px' });

}

picIndex--;

var top = -(picIndex) * 560 + 'px';

$('.swiper-wrapper').stop().animate({ 'top': top });

 

//控制小圆点

if (picIndex == $('.swiper-wrapper li').length - 1) {

$('.swiper-pagination .swiper-pagination-custom').eq(0).addClass('liActive').siblings().removeClass('liActive');

$('.swiper-pagination .swiper-pagination-custom').eq(0).children('p').addClass('pActive').siblings().removeClass('pActive');

$('.swiper-pagination .swiper-pagination-custom').eq(0).children('h4').addClass('hActive').siblings().removeClass('hActive');

$('.swiper-pagination .swiper-pagination-custom').eq(6).removeClass('liActive');

$('.swiper-pagination .swiper-pagination-custom').eq(6).children('p').removeClass('pActive')

$('.swiper-pagination .swiper-pagination-custom').eq(6).children('h4').removeClass('hActive')

} else {

$('.swiper-pagination .swiper-pagination-custom').eq(picIndex).addClass('liActive').siblings().removeClass('liActive');

$('.swiper-pagination .swiper-pagination-custom').eq(picIndex).children('p').addClass('pActive').siblings().removeClass('pActive');

$('.swiper-pagination .swiper-pagination-custom').eq(picIndex).children('h4').addClass('hActive').siblings().removeClass('hActive');

}

});

 

$('.swiper-container').mouseover(function() {

clearInterval(timeId);

});

$('.swiper-container').mouseout(function() {

autoplayCarousel();

});

 

})