iT邦幫忙

0

請大大幫忙看看jq 輪播 不會動

  • 分享至 

  • xImage
$(function() {
	var cdSlider = $(".cd-slider"),
		slides = cdSlider.find('li'),
		nav = cdSlider.children('nav'),
		count = nav.children('.count');

	if ( slides.length <= 1 ) {
		nav.css('display', 'none');
	}

	slides.eq(0).addClass('current');
  slides.last().addClass('prev_slide');

	count.append('<span class="current_number">1</span><span class="total">'+ slides.length +'</span>');

	var updateCount = function (nextIndex, prevIndex) {
		$(".current_number").text(nextIndex + 1, prevIndex + 1);
	}
	
	function nextSlider() {
		var current = cdSlider.find('li.current'),
			nextSlide = ( current.next().length > 0 ) ? current.next() : slides.eq(0);

		nextSlide.addClass('current').removeClass('prev_slide').siblings().removeClass('current');
		nextSlide.prevAll().addClass('prev_slide');
		nextSlide.nextAll().removeClass('prev_slide');

		if ( nextSlide.index() == slides.last().index() ) {
			slides.eq(0).removeClass('prev_slide');
		}

		if ( nextSlide.index() == 0 ) {
			slides.last().addClass('prev_slide');
		}

		updateCount(nextSlide.index());

	}

	function prevSlider() {
		var current = cdSlider.find('li.current'),
			prevSlide = ( current.prev().length > 0 ) ? current.prev() : slides.last();

		prevSlide.addClass('current').removeClass('prev_slide').siblings().removeClass('current');
		prevSlide.prevAll().addClass('prev_slide');

		if ( prevSlide.index() == 0 ) {
			slides.last().addClass('prev_slide');
		}

		if ( prevSlide.index() == slides.last().index() ) {
			prevSlide.prevAll().addClass('prev_slide');
			slides.eq(0).removeClass('prev_slide');
		}

		updateCount(prevSlide.index());

	}

	$(".next").on('click', function(event) {
		event.preventDefault();
		nextSlider();
	});

	$(".prev").on('click', function(event) {
		event.preventDefault();
		prevSlider();
	});

	$(document).keyup(function(event) {
		if (event.which=='37') {
			prevSlider();
		} else if (event.which=='39') {
			nextSlider();
		}
	});
	//當滑鼠滑入區塊停止自動播放
	$("#cd-slider").hover(function(){
		clearTimeout(timer);
	}, function(){
		timer = setTimeout(autoShow, speed);
	});
	
	//自動輪播
	function autoShow(){
		img = (img+1<myImages.length) ? img+1 : 0;
		$(".link li").eq(img).click();
		timer = setTimeout(autoShow, speed);
	}
	
	//啟動自動輪播
	autoShow();	
});
看更多先前的討論...收起先前的討論...
fillano iT邦超人 1 級 ‧ 2016-12-15 09:20:22 檢舉
所以?
mack078 iT邦新手 5 級 ‧ 2016-12-15 09:21:46 檢舉
沒事
Kathy Lai iT邦新手 5 級 ‧ 2016-12-16 01:21:18 檢舉
請教一下輪播的用途?
jsgao0 iT邦新手 5 級 ‧ 2016-12-19 09:43:20 檢舉
HTML & CSS也提供一下吧?
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答