首页 > 其他分享> 文章详细

手写轮播图上下翻页

2019-08-29 14:00:48 阅读：232 来源： 互联网

标签：pagination 轮播翻页 removeClass custom background 手写 eq swiper

</ul>

</div>

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

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

</li>

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

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

</li>

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

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

</li>

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

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

</li>

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

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

</li>

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

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

</li>

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

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

</li>

</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) {

}

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

}

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

}

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

}

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

background-color: #4280e7;

}

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

background-color: #444544;

}

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

background-color: aquamarine;

}

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

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

});

})

标签：pagination,轮播,翻页,removeClass,custom,background,手写,eq,swiper
来源： https://blog.csdn.net/hmily43/article/details/100136200

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

手写轮播图 上下翻页

手写轮播图上下翻页