一个焦点图插件，调用简单。_$('.banner li').each(-优快云博客

本文介绍了一个使用jQuery实现的简单焦点图插件，该插件包含左右切换按钮及小圆点指示器，并通过鼠标悬停事件控制自动轮播与暂停。文章详细展示了如何创建轮播效果、设置图片切换动画及交互样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(function($){
	
	/***一个BANNER插件带左右箭头****/
	$.fn.Focus = function(options){
		var opt = {
			time:1000		 //播放秒数	
		}
		var options = $.extend(opt,options);
		this.each(function(){			
			var thisFocus = $(this);			
			var focusWidth = $(thisFocus).width();					
			var num = $(thisFocus).find("ul li").length;					
			var picTime;
			var index = 0;
			
			/***左右按钮控制图片显示***/
			var btn = "<div class='ud'> <div class='prev'></div> <div class='next'></div> </div>";
	        $(thisFocus).append(btn); //添加元素
		
			$(thisFocus).find(".ud .prev").hover(function(){
			$(this).stop(true,false).animate({'opacity':0.5},300);
			},function(){
				$(this).stop(true,false).animate({'opacity':0.2},300);
			})	
				
			$(thisFocus).find(".ud .next").hover(function(){
			$(this).stop(true,false).animate({'opacity':0.5},300);
			},function(){
			$(this).stop(true,false).animate({'opacity':0.2},300);
			})
	
			$(thisFocus).find(".prev").click(function(){
			index -=1;
			if(index == -1){index = num -1;}
			showimg(index);
			});
	         
			$(thisFocus).find(".next").click(function(){
			  index += 1;
			if(index == num){index = 0;}
			  showimg(index);
			});
   
            /***小按钮鼠标移上去显示图片***/
    		var clickbtn = "<div class='clickbtn'>";
			for(var i= 0;i < num; i++){
			clickbtn += "<span></span>";
			}
			clickbtn += "</div>";
	
			$(thisFocus).append(clickbtn);
	
			$(thisFocus).find(".clickbtn span").mouseenter(function(){
			index = $(thisFocus).find(".clickbtn span").index(this);			
			showimg(index);
			}).trigger("mouseenter");
   
			
			/***设定UI宽度***/
			$(thisFocus).find("ul").width(focusWidth * num);
			
			/***动画 改变UI现在的位置 向左移动***/
			function showimg(index){
				var nowleft = -index * focusWidth;
				$(thisFocus).find("ul").stop(true,false).animate({left:nowleft},"slow");
				$(thisFocus).find(".clickbtn span").removeClass("on").eq(index).addClass("on");
			}
			
			
			$(thisFocus).hover(function(){
				clearInterval(picTime);
			},function(){
				picTime = setInterval(function(){
					showimg(index);
					index++;
					if(index == num){index = 0}
				},options.time);
			}).trigger("mouseleave");
			
		});
	};
	
})(jQuery);

/***焦点图 css****/
#banner {width:800px; height:280px; position:relative; overflow:hidden; margin:0 auto;}
#banner ul{ position:absolute; height:280px;}
#banner ul li{ width:800px; height:280px; position:relative; overflow:hidden; float:left}
#banner .ud{width:800px; position:absolute; top:70px; height:100px;}
#banner .ud .prev{width:45px; height:100px; background:url(img/sprite.png) no-repeat left;float:left;opacity:0.2}
#banner .ud .next{width:45px; height:100px; background:url(img/sprite.png) no-repeat right;float:right;opacity:0.2}
#banner .clickbtn{ position:absolute;height:8px;bottom:10px; width:800px; text-align:center;}
#banner .clickbtn span{ display:inline-block; height:8px; width:50px; background:#FFFFFF; opacity:0.6; margin:0 3px 0 3px;}
#banner .clickbtn span:hover{opacity:0.7; background:#000;}
#banner .clickbtn span.on{opacity:0.7; background:#000;}