タイトルの通りの現象が起こってしまいます。
jqueryのスライダープラグインで
ページネイションをクリックしたときに起こるのですが
最初にクリックした時点では通常通り動きますが、もう一回同じところを
クリックすると右から左へとアニメーションが発生すると共に消えてしまいます。
解決策をご存知の方、いらっしゃいますか?
下記コードはコピペだけで動くようにしています。
(html、css、JSを分割していません)
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 6<title></title> 7<style> 8.jquery-slider-pages { 9overflow: visible; 10position: absolute; 11left: 0; 12bottom: 0; 13height: 14px; 14right: 0; 15} 16.jquery-slider-page { 17overflow: hidden; 18position: relative; 19display: block; 20float: right; 21width: 10px; 22height: 10px; 23border:1px solid #E3FFE3; 24background: #333; 25cursor: pointer; 26margin:2px; 27border-radius: 50%; 28} 29 30.jquery-slider-page:hover { 31background: #c0c0c0; 32} 33.jquery-slider-page-current { 34background: #c0c0c0; 35} 36 37.jquery-slider-control { 38position: absolute; 39text-align:center; 40width: 20px; 41color:#000; 42background: #fff; 43line-height: 40px; 44font-size: 4em; 45font-weight: normal; 46cursor: pointer; 47z-index:9000; 48overflow:hidden; 49margin:0px -10px 0 -10px; 50opacity:0.8; 51} 52 53.jquery-slider-control-prev { 54left: 6px; 55top:150px; 56border-radius:0px 3px 3px 0px; 57} 58.jquery-slider-control-next { 59right: 6px; 60top:150px; 61border-radius:3px 0 0 3px; 62} 63 64.jquery-slider { 65overflow: hidden; 66position: relative; 67} 68.jquery-slider-element { 69overflow: hidden; 70display: none; 71position: absolute; 72left: 0; 73top: 0; 74width: 100%; 75height: 100%; 76} 77 78#slider { 79position: absolute; 80width:200px; 81height:100px; 82backgrond:#B1B1B1; 83} 84 85#slider div { 86width:200px; 87height:100px; 88backgrond:#B1B1B1; 89} 90</style> 91<script> 92(function($) { 93$.fn.slider = function(options) { 94var $this = this; 95var settings = { 96'width': this.width(), 97'height': this.height(), 98'wait': 4000, 99'fade': 750, 100'direction': 'left', 101'showControls': true, 102'showProgress': true, 103'hoverPause': true, 104'autoplay': true, 105'randomize': false, 106'slidebefore': function() {}, 107'slideafter': function() {}, 108'rewind': function() {} 109}; 110var _timer = false; 111var _last = false; 112var _this = false; 113var _cycle = function() { 114clearTimeout(_timer); 115_last = _this; 116if (settings.direction == 'right') { 117_this = _this.prev('.jquery-slider-element'); 118} else { 119_this = _this.next('.jquery-slider-element'); 120} 121if (!_this.length) { 122_rewind(); 123} 124_draw(); 125if (!$this.hasClass('jquery-slider-paused') && settings.autoplay) { 126_timer = setTimeout(_cycle, settings.wait); 127} 128}; 129var _rewind = function() { 130if (settings.direction == 'right') { 131_this = $this.children('.jquery-slider-element').last(); 132} else { 133_this = $this.children('.jquery-slider-element').first(); 134} 135settings.rewind(_this, $this); 136}; 137var _draw = function() { 138$this.addClass('jquery-slider-sliding'); 139if (settings.showProgress) { 140$this.find('.jquery-slider-page').removeClass('jquery-slider-page-current'); 141$this.find('.jquery-slider-page:eq(' + (_this.nextAll('.jquery-slider-element').length) + ')').addClass('jquery-slider-page-current'); 142} 143settings.slidebefore(_this, $this); 144if (settings.direction == 'right') { 145_this.show().css('left', -settings.width); 146} else { 147_this.show().css('left', settings.width); 148} 149_this.stop(true, true).animate({ 150'left': (settings.direction == 'right' ? '+=' : '-=') + settings.width + 'px' 151}, { 152'duration': settings.fade, 153'complete': function() { 154settings.slideafter(_this, $this); 155$this.removeClass('jquery-slider-sliding'); 156} 157}); 158if (_last) { 159_last.stop(true, true).animate({ 160'left': (settings.direction == 'right' ? '+=' : '-=') + settings.width + 'px' 161}, { 162'duration': settings.fade 163}); 164} 165}; 166var _next = function() { 167if ($this.hasClass('jquery-slider-sliding')) return; 168var direction = settings.direction; 169$this.addClass('jquery-slider-paused'); 170settings.direction = 'left'; 171_cycle(); 172settings.direction = direction; 173}; 174var _prev = function() { 175if ($this.hasClass('jquery-slider-sliding')) return; 176var direction = settings.direction; 177$this.addClass('jquery-slider-paused'); 178settings.direction = 'right'; 179_cycle(); 180settings.direction = direction; 181}; 182var _init = function() { 183if (options) { 184$.extend(settings, options); 185} 186if (settings.hoverPause) { 187$this.bind({ 188'mouseenter': function() { 189$this.addClass('jquery-slider-paused') 190clearTimeout(_timer); 191}, 192'mouseleave': function() { 193$this.removeClass('jquery-slider-paused'); 194if (settings.autoplay) { 195_timer = setTimeout(_cycle, settings.wait); 196} 197} 198}); 199} 200var positionEls = $('<span class="jquery-slider-pages"></span>'); 201$this.addClass('jquery-slider').width(settings.width).height(settings.height); 202$this.children().each(function() { 203var $tmp = $(this); 204_this = $(this).addClass('jquery-slider-element'); 205positionEls.prepend($('<span class="jquery-slider-page"></span>').on('click', function() { 206if ($this.hasClass('jquery-slider-sliding')) return; 207_last = _this; 208_this = $tmp; 209_draw(); 210})); 211}); 212if (settings.showProgress) { 213$this.append(positionEls); 214} 215if (settings.showControls) { 216var controlPrev = $('<span class="jquery-slider-control jquery-slider-control-prev">‹</span>').css('cursor','pointer').bind('click', function() { 217_prev(); 218}); 219var controlNext = $('<span class="jquery-slider-control jquery-slider-control-next">›</span>').css('cursor','pointer').bind('click', function() { 220_next(); 221}); 222$this.append(controlPrev); 223$this.append(controlNext); 224} 225if (settings.randomize) { 226_this = $this.children('.jquery-slider-element').eq(parseInt($this.children('.jquery-slider-element').length * Math.random())); 227} 228_cycle(); 229}; 230_init(); 231}; 232})(jQuery); 233</script> 234</head> 235<body> 236<script> 237jQuery(function($) { 238$('#slider').slider({ 239showControls: true, 240autoplay: true, 241showPosition: true, 242hoverPause: true, 243wait: 2500, 244fade: 300, 245direction: "left" 246}); 247}); 248</script> 249<div id="slider"> 250<div>1</div> 251<div>2</div> 252<div>3</div> 253</div> 254</body> 255</html>
回答1件
あなたの回答
tips
プレビュー