一个焦点图插件，调用简单。

本文主要是介绍一个焦点图插件，调用简单。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

(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;}



 


<script type="text/javascript"> $(function(){$("#banner").Focus({time:3000}); })</script><div id="banner"> <ul> <li><a href="#"><img src="img/01.jpg" /></a></li> <li><a href="#"><img src="img/02.jpg" /></a></li> <li><a href="#"><img src="img/03.jpg" /></a></li>
<li><a href="#"><img src="img/04.jpg" /></a></li> <li><a href="#"><img src="img/05.jpg" /></a></li> </ul></div>

这篇关于一个焦点图插件，调用简单。的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---