1
2
3
4
とそれぞれスライドさせるための要素があります。
4→1へ遷移させるときにのみ動きが不自然な感じになります。
.activeを付与して、css3アニメーションで動いてる部分が機能しない、といった感じです。
これの解決策をご存知の方、いらっしゃいますでしょうか。
サンプルコードを貼ります。
lang
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title></title> 6<style> 7 8* {margin: 0; padding: 0;} 9body,html {width: 100%;height: 100%;} 10 11 12.container {width: 100%; height: 100%; overflow-x: hidden;} 13.slide_all {width: 800px; margin: 0 auto; height: 250px; position: relative;} 14.slide_wrap {width: 2400px; position: absolute; left: 50%; margin-left: -1200px;} 15.slide_body {width: 100%;} 16.slide {width: 800px; font-family: 'arial'; background: #000; color: #fff; font-size: 50px; line-height: 250px; text-align: center;} 17.slide img {width: 100%; vertical-align: bottom;} 18 19.bx-controls-direction,.bx-pager {text-align: center;height: 25px;} 20.bx-controls-direction a,.bx-pager-item {display: inline-block;} 21.bx-pager-item a{display: block; height: 10px; width: 10px; text-indent: -9999px; background: #fff; border-radius: 10px; margin:10px 2px 0 2px;} 22.bx-pager-item a.active {opacity: 0.3;} 23.bx-controls-direction a{text-decoration: none; color: #fff; padding:0 5px;} 24.bx-controls {position: absolute;bottom: 5px;z-index: 100;width: 100%;} 25 26.slide{transition:all .3s;opacity:.8;} 27.slide.active{ opacity:1;} 28</style> 29<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 30<script src="http://zxcvbnmnbvcxz.com/demonstration/js/jquery.bxslider.js"></script> 31<script> 32$(function(){ 33var slideNum = $('.slide').size(); 34$('.slide_body').bxSlider({ 35slideWidth: 800, 36minSlides: 3, 37maxSlides: 3, 38moveSlides: 1, 39slideMargin: 0, 40onSliderLoad:function(currentIndex){ 41$('.slide').removeClass('active'); 42$('.slide_body > div:nth-child(3n-1)').addClass('active'); 43}, 44onSlideBefore: function($slideElement, oldIndex, newIndex){ 45var new_i = newIndex%3 - 1; 46var nth = (new_i < 0) ? '3n-1' : '3n'+new_i; 47$('.slide').removeClass('active'); 48$('.slide_body > div:nth-child('+nth+')').addClass('active'); 49} 50}); 51}); 52</script> 53</head> 54<body> 55<div class="container"> 56<div class="slide_all"> 57<div class="slide_wrap"> 58<div class="slide_body"> 59<div class="slide">4</div> 60<div class="slide">1</div> 61<div class="slide">2</div> 62<div class="slide">3</div> 63</div> 64</div> 65</div> 66</div> 67</body> 68</html>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/03/29 09:59