(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>
一个焦点图插件,调用简单。
最新推荐文章于 2021-06-01 06:03:13 发布