$(document).ready(function() {   

    var images = $('.pimgsmall img');  
    var currentImageIndex = 0;  
    var imageCount = images.length; 
	var ulWidth = $(".pimgsmall").width(); // 获取ul的宽度	
	var llWidth = $(".pimgsmall li").width()+20; // 获取ll的宽度
	console.log("llWidth:",llWidth)
	var shuZiBox = $(".shuzibox span"); // 获取计数器元素 
	var intervalId; 	// 设置一个定时器 
	 
	startInterval();
	$('.pimgsmall li').eq(currentImageIndex).addClass('cur');
	
	$('.shuzibox .currentshuzi').html(currentImageIndex+1);
	$('.shuzibox .zongshu').html(imageCount);
	
	$(".pimgsmall li").hover(function () { 
				stopInterval();
				var indeximg = $(this).index()+1;
				currentImageIndex = $(this).index();
				var imgsrc=$(this).children("img").attr("src");	
				$("#pimgbig").attr("src",imgsrc);
				$('.shuzibox .currentshuzi').html(indeximg);			
				$(this).addClass("cur");
				$(this).siblings().removeClass('cur'); 
				 
				
				 
	});	
	
	//前后按钮点击实现
    $('.prev').click(function() {  
		stopInterval();
        if (currentImageIndex > 0) {  
            currentImageIndex--;  
			var newPosition = (currentImageIndex-1) * llWidth; // 计算新的位置  
			$(".pimgsmall li").eq(0).animate({ "margin-left": "-" + newPosition + "px" }, 100); // 移动li元素  
			$('.shuzibox .currentshuzi').html(currentImageIndex+1);
            $('#pimgbig').attr('src', images[currentImageIndex].src); 
			$('.pimgsmall li').siblings().removeClass('cur'); 	
			$('.pimgsmall li').eq(currentImageIndex).addClass('cur');
						
        }else{
			alert("已经是第一张了");
		} 
    });  
  
    $('.next').click(function() {  
	    stopInterval();
        if (currentImageIndex < imageCount - 1) {  
            currentImageIndex++;  
			var newPosition = currentImageIndex * llWidth; // 计算新的位置  
			$(".pimgsmall li").eq(0).animate({ "margin-left": "-" + newPosition + "px" }, 100); // 移动li元素  				
            $('#pimgbig').attr('src', images[currentImageIndex].src);			
			$('.shuzibox .currentshuzi').html(currentImageIndex+1);			 
			$('.pimgsmall li').siblings().removeClass('cur'); 
			$('.pimgsmall li').eq(currentImageIndex).addClass('cur'); 	 
						
        }else{
			alert("已经是最后一张了");
		}   
    }); 
	
	//自动切换
	    function startInterval() {  
		intervalId = setInterval(function() {   
        if (currentImageIndex < imageCount - 1) { // 判断是否还有下一张图片  
            currentImageIndex++; // 更新当前图片索引  
            var newPosition = currentImageIndex * llWidth; // 计算新的位置  
            $(".pimgsmall li").eq(0).animate({ "margin-left": "-" + newPosition + "px" }, 2000); // 移动li元素（2000ms动画时间）  
			$('#pimgbig').attr('src', images[currentImageIndex].src);
            $('.shuzibox .currentshuzi').html(currentImageIndex + 1); // 更新计数器  
			$('.pimgsmall li').siblings().removeClass('cur'); 
            $(".pimgsmall li").eq(currentImageIndex).addClass("cur"); // 为当前图片添加"cur"类  
        } else {  
           // alert("已经是最后一张了"); // 提示已经没有下一张图片了  
            clearInterval(); // 停止自动切换  
        }  
		}, 2000); // 每2秒执行一次切换操作 
		}
	 
		// 停止定时器  
		function stopInterval() {  
		  clearInterval(intervalId);  
		}  

	 
		 	
});