自写图片轮播插件--fred_pic
发布在2013年11月11日view:2341
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

网上的图片轮播插件形形色色,没有一万也有九千九了,但是有时候需要的一些功能,找到的插件都差那么一点点,让人十分头疼,趁着前端时间空闲,就自己写了一个,不说写法有多么规范,运行的效率有多么好,但经过我的测试谷歌、火狐、ie7+都可以流畅运行,若各位看官发现什么不足之处,请给予指正~

本插件只有从右往左和从左往右翻的功能,使用的是移形换位的切换方式,怎么用语言表达不太好说,有兴趣的可以看下源代码,闲话不多说,上代码

第一部分 dom结构

<div class="main">
<ul>
    <li><img src="images/p1.jpg" /></li>
    <li><img src="images/p2.jpg" /></li>
    <li><img src="images/p3.jpg" /></li>
    <li><img src="images/p4.jpg" /></li>
    <li><img src="images/p5.jpg" /></li>
</ul>

其中main、ul和li结构必须,main是控制整个轮播区域大小的div,li则是切换的区域,至于li中的内容,可以是图片,也可以是其他内容,可以自己写,我比较懒,就用图片做了。

第二部分 css

*{margin:0;padding:0;} .main{margin:0 auto;width:100%;height:100%; position:relative;} .main ul,.main li{display:block;width:100%;height:100%;position:absolute;top:0px;left:0px; overflow:hidden;} .main li{ background:#fff; z-index:1;} .main li img{width:100%;height:auto;}

.f_pre,.f_next{ display:block;width:50px;height:80px; position:absolute;top:400px; background:#fff; z-index:20;} .f_pre{left:40px;} .f_next{right:40px;}

.f_dot{ position:absolute;bottom:20px;left:0px; z-index:30;} .f_dot dd{display:block;float:left;margin:0 3px; background:#fff;width:20px;height:20px;color:#333; text-align:center; cursor:pointer;} .f_dot dd.sel{ background:#990;color:#fff;}

/* 必须设置的css样式 因为懒得在插件里设置样式 就这么设定几个必须要设定的属性 其他的属性随意设置 内容可以是图片,或者其他东西 .main{position:relative;} .main ul,.main li{display:block;width:100%;height:100%;position:absolute;top:0px;left:0px; overflow:hidden;} .main li{z-index:1;}

.f_pre,.f_next{position:absolute;z-index:20;}

.f_dot{ position:absolute;z-index:30;} .f_dot dd{cursor:pointer;} .f_dot dd.sel{}

*/

蛋疼,代码太难贴了,有空到我百度空间去看吧——百度空间-前端小兵

看注释部分,好像已经写得挺清楚了,其实主要是控制内容和按钮的层次,避免按钮被覆盖在内容层之下,当然你要是想弄成别的样子也可以,欢迎之至。

第三部分 js部分

$(function(){
//设置参数
$('.main').toslide({
    f_pn:true, //是否有上一个下一个按钮
    f_dot:true, //是否有序列按钮
    f_time_auto:true, //是否自动轮播
    f_time:3000, //自动轮播的速度默认为3秒
    f_easing:'easeOutQuint' //轮播切换的效果,默认为swing,增加多样的想过,必须依靠easing插件的支持,可查看缓动函数表http://easings.net/zh-cn
});

//设置轮播的宽高,随浏览器变化
var winW = window.innerWidth ? window.innerWidth: $(window).width();
var winH = window.innerHeight ? window.innerHeight: $(window).height();
$('.main').width(winW);
$('.main').height(winH);

$(window).on('resize',function() {
    var winW = window.innerWidth ? window.innerWidth: $(window).width();
    var winH = window.innerHeight ? window.innerHeight: $(window).height();

    $('.main').width(winW);
    $('.main').height(winH);
});});

插件的参数是上边注释设置参数那一块,我比较喜欢全屏的图片轮播,所以在下面设置了全屏大小。插件产生的设置代码中有注释。

以上就是在页面上写的内容,若有建议或者意见,可以联系我~ 插件写得不是那么成熟,也不咋规范,这也算是成长中的一个痕迹。附上demo下载地址:下载地址-百度云

评论
发表评论
4年前

@Bolt_白衣苍狗 文章确实有所欠缺,多谢指正……所以在底部加了个demo的链接,主要是芋头的这个编辑器插入代码不太习惯

4年前

小编整篇文章都没提到使用了JQuery,如果没有看Demo的话,按照文章从头做到尾是没有效果的。

虽然我们从JS部分能看到漂亮的$,但是也要照顾新手不是?还要考虑文章的严密性。

WRITTEN BY
不懂的小兵
在前端的世界里摸打滚爬……
TA的新浪微博

我的收藏