我正在研究 jQuery 轮播。这是我的代码: // CAROUSEL $('#left-arrow').click(previousSlide); $('#right-arrow').click(nextSlide);function nextSlide() { var $currentSlide = $('#carousel .slide-image:first'); var width = $currentSlide.width(); var $lastSlide = $('#carousel .slide-image:last') $currentSlide.animate({ 'margin-left': -width }, 1000, function() { $currentSlide.remove().css({ 'margin-left': '0px' }); $lastSlide.after($currentSlide); }); } function previousSlide() { var $currentSlide = $('#carousel .slide-image:first'); var width = $currentSlide.width(); var $last = $('#carousel .slide-image:last'); $last.remove().css({ 'margin-left': -width }); $currentSlide.before($last); $last.animate({ 'margin-left': '0px' }, 1000); }/* CAROUSEL */#slide1 { background-color: red;}#slide2 { background-color: blue;}#slide3 { background-color: magenta;}#carousel { overflow: hidden; white-space: nowrap; position: relative; width: 100vw; height: 75vh;}.slide-image { width: 100vw; height: 75vh; background-position: center; background-size: cover; display: inline-block;}.arrow { width: 2%; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer;}#right-arrow { right: 30px;}#left-arrow { left: 30px;}
目前暂无任何回答
- 0 回答
- 0 关注
- 106 浏览
添加回答
举报
0/150
提交
取消