### 插件开发背景随着前端开发领域越来越受到重视, 前端开发也变得越来越火热. 各种优秀的前端组件层出不穷. 尤其是 jQuery 插件, 很多前端组件都是基于 jQuery 开开发的.
图片滚动是前端开发中可以说是非常常见的一种功能需求. 本人之前也写过几篇关于图片滚动的文章.
浅谈我学会的 3 种 jQuery 滚动动画思路 http://caibaojian.com/front/189
原创 jQuery 图片上下左右滚动代码 http://caibaojian.com/feature/197
jquery 图片滚动 (渐隐渐现模糊消失效果) http://caibaojian.com/feature/305
基于以上的图片滚动研究, 本人决定开发一个全能的图片滚动
什么是全能图片滚动
其实这个并不是什么新词汇, 图片滚动我们知道有这么几种
1. 图片从下往上滚动 (向上)
2. 图片从右往左滚动 (向左)
3. 图片一张消失一张出现
4. 图片下拉出现
5. 图片渐隐渐现滚动
那么有没有一个插件, 只要很少的代码就能全部搞定呢? 答案肯定是有的. 今天本人将介绍我写的插件
- ### 代码预览整屏图片消失与显示幻灯片代码 - 面向对象版
- { margin:0; padding: 0;}li { list-style: none;}a { text-decoration:none;}.slider { height:170px; margin:10px auto; overflow:hidden; position:relative; width:490px;}.sliderbox { position:relative;}/ 必须加这句 CSS, 否则向左右, 上下滚动时会没有效果 */.sliderbox li { width:490px; height:170px;}.slidernav { position:absolute; right:4px; bottom:5px; z-index:1;}.slidernav li { float:left; width:24px;}.slidernav li a { width:16px; padding:2px 4px; height:12px; background:#fff; color:#000; text-align:center;}.slidernav li.current a { background:#3B8DD1; color:#fff;}.slidertext { background:#000; background:rgba(0, 0, 0, 0.6); filter:alpha(opacity=60); position:absolute; left:0; bottom:0; width:100%;}.slidertext li { display:none; padding-left:20px;}.slidertext li a { text-align:left; line-height: 30px; height: 30px; color: #fff;}.slider .prev { position: absolute; top:50%; margin-top:-30px; cursor: pointer; width:61px; height:61px; left:0; background: url(images/ft_icons.png) 0 0 no-repeat;}.slider .next { position: absolute; top:50%; margin-top:-30px; right:0; cursor:pointer; width:61px; height:61px; background: url(images/ft_icons.png) 0 -61px no-repeat;} // 首页图片滚动 jQuery 代码 //author: 酷剑 //website: http://caibaojian.com///2013.1.27 //cbaojian@gmail.com function slider(obj,handle){ var index = 0,sliderBox = $(obj+".sliderbox"), sliderLi = sliderBox.find("li"), len = sliderLi.length, sliderNav = $(obj+".slidernav"),sliderText = $(obj+".slidertext"),prev = $(obj+".prev"),next = $(obj+".next"),sliderTimer,navhtml='',textHtml=''; for(var i=0; i<len; i++){ var title = $("li:eq("+i+") img",sliderBox).attr("alt"); var url = $("li:eq("+i+") a",sliderBox).attr("href"); navHtml += '<li><a href="#"target="_blank"target="_blank"target="_blank">'+(i+1)+'</a></li>'; if(handle == 'fadeTo'){ sliderLi.css({"position":"absolute","left":"0","top":"0"});// 必须加这句 css, 否则渐隐渐显会出现一段空白的 if(i==0){ sliderLi.eq(i).css("display","block"); }else{ sliderLi.eq(i).css("display","none");} } textHtml += '<li><a href="'+url+'"target="_blank"target="_blank"target="_blank">'+title+'</a></li>'; } sliderNav.append(navHtml); sliderText.append(textHtml); var slidertitle = sliderText.find("li"),sliderA = sliderNav.find("li"); slidertitle.eq(0).show(); sliderA.eq(0).addClass("current"), sliderLi.eq(0).addClass("current"); function showImg(i,index){ var sliderHeight = $(obj).height(), sliderWidth = $(obj).width(); slidertitle.hide().eq(index).show(); sliderA.removeClass("current").eq(index).addClass("current"), sliderLi.removeClass("current").eq(index).addClass("current"); if(handle == 'top'){ sliderBox.stop(true,false).animate({"top":-sliderHeightindex},"slow"); }else if(handle == 'left'){ sliderLi.css("float","left"); sliderBox.css("width",lensliderWidth).stop(true,true).animate({"left":-sliderWidth*index},"slow"); }else if(handle == 'hide'){ sliderLi.stop(true,true).hide().eq(index).show(); }else if(handle == 'fadeTo'){ sliderLi.eq(i).stop(true,false).fadeOut(); sliderLi.eq(index).stop(true,false).fadeIn(); } else if(handle == 'slideTo'){ sliderLi.css("z-index",'1').stop(true,true).slideUp().eq(index).css("z-index","2").slideDown(); } } sliderA.mouseover(function(){ index = $(this).index(); var i = sliderA.index($(".slidernav .current:eq(0)")); if(index!=i){ showImg(i,index); } $(this).children("a").click(function(){return false;}); }).eq(0).mouseover(); if(len<=1){prev.hide();next.hide();} else{ //prev prev.click(function(){ var i=index; index -= 1; if(index == -1){index = len -1}; showImg(i,index); }); ////next next.click(function(){ auto(); }); } //auto fn function auto(){ var i = index; index = (index+1)%len; showImg(i,index); } //set time var settime = window.setInterval(auto,6000); $(obj).mouseover(function(){ window.clearInterval(settime); }) $(obj).mouseleave(function(){ window.setInterval(auto,6000); }) } slider("#slider","fadeTo"); [/code]
以上为 jQuery 代码, 下面将转化为 jQuery 插件
jQuery 插件的开发, 请参照本人之前的一篇教程: 自己动手开发 jquery 插件 http://caibaojian.com/feature/357
jQuery 插件代码
$(function(){$("#img").powerSlider({picNum:4,handle:"hide"});}) 先放上代码, 后面有时间再解释怎么使用吧.
插件预览 http://caibaojian.com/slider/jq-power-slider-more.html
来源: http://www.qdfuns.com/article/13873/47d9503bc700830ac87ea8ead8b48a3d.html