切换图片尝试写第一个js插件图片轮播

新手发帖，很多方面都是刚入门，有错误的地方请大家见谅，欢迎批评指正

最近在看怎么写js插件，实验写了一个简单的图片轮播插件 jqury.picPlay.js 。

基本html框架为<div class="picPanel"><div class="slider"></div></div>，根据需要往里添加class为.pic、.num、.txt的div来分离放置图片列表，数字列表和文字列表。

调用方式：$.fn.jsPicPlay(setting);

setting可以设置三个参数

type: 图片切换方向，默许为横向切换，值为2的时候为垂直切换

intervalTime:设置图片多久切换一次，默许为3000ms

speed:图片切换的速度，默许为200ms

插件源码

View Code

(function($){$.fn.extend({jsPicPlay:function(setting){var setting = setting || {};var config = {type:1, //默许横向切换intervalTime:3000,speed:400};$.extend(config,setting);var panel =  this.length ? this : $(".picPanel");panel.each(function(){var panel = $(this),pic = $(".pic",panel),num = $(".num",panel),txt = $(".txt",panel),cn="on",intervalTime = config.intervalTime,speed = config.speed,type=config.type,curIndex=0,myTime = 0;var picList = $("ul",pic),picItem = $("li",pic),numItem=$("li",num),txtItem = $("li",txt);var flash = {setStyle:function(){switch(type){case 2:picList.css({position:"absolute"});    break;default:picList.css({position:"absolute","width":picItem.width()*picItem.length});picItem.css({"float":"left"});}},setNum:function(){var ht="";for(var i=1;i<picItem.length+1;i++){ht+="<li>"+i+"</li>";}num.append("<ul>"+ht+"</ul>");numItem = $("li",num);numItem.first().addClass("on");},play:function(){++curIndex >= picItem.length && (curIndex=0);switch(type){case 2:picList.animate({top:-curIndex*picItem.height()},speed);break;default:picList.animate({left:-curIndex*picItem.width()},speed);}numItem.removeClass(cn).eq(curIndex).addClass(cn);    txt.length && txtItem.eq(curIndex).show().siblings().hide();},start:function(){myTime = picItem.length && setInterval(flash.play,3000);},stop:function() {clearInterval(myTime);}};flash.setStyle();pic.length && num.length && flash.setNum();flash.start();num.delegate("li",'click',function(){flash.stop();curIndex=numItem.index($(this))-1;flash.play();flash.start();});});return panel;}});
})(jQuery);

CSS

View Code

.picPanel ul,.picPanelul li{padding:0;margin:0;list-style:none;
}.picPanel {font-size:12px;font-family:arial,simsun;
}
.slider{width:400px;height:300px;padding:2px;border:1px solid #ccc;overflow:hidden;position:relative;
}
.pic {width:400px;height:300px;overflow:hidden;position:absolute;
}
.num {position:absolute;bottom:20px;right:10px;height:20px;
}
.num li {width:14px;height:14px;background:#000;color:#fff;margin:0 3px;text-align:center;line-height:14px;font-size:10px;cursor:pointer;float:left;
}
.num .on {font-weight:bold;background:#ff0000;
}
.txt {position:absolute;bottom:2px;height:20px;width:400px;opacity:0.6;filter:alpha(opacity=60);background:#000;overflow:hidden;
}
.txt li {color:#fff;height:20px;line-height:20px;padding-left:8px;z-index:99;
}

示例：

每日一道理
共和国迎来了她五十诞辰。五十年像一条长河，有急流也有缓流；五十年像一幅长卷，有冷色也有暖色；五十年像一首乐曲，有低音也有高音；五十年像一部史诗，有痛苦也有欢乐。长河永远奔流，画卷刚刚展开，乐曲渐趋高潮，史诗还在续写。我们的共和国正迈着坚定的步伐，跨入新时代。

完全的带有数字和文字的轮播

景致1
景致2
景致3
景致4

html

<div id="picOne" class="picPanel"><div class="slider"><div class="pic"><ul><li><img src="img/1.jpg"/></li><li><img src="img/2.jpg"/></li><li><img src="img/3.jpg"/></li><li><img src="img/4.jpg"/></li></ul></div><div class="num"></div><div class="txt"><ul><li>景致1</li><li>景致2</li><li>景致3</li><li>景致4</li></ul></div></div></div>

执行JS

$("#picOne").jsPicPlay();

仅有图片的轮播

html

<div class="picPanel" id="picTwo"><div class="slider"><div class="pic"><ul><li><img src="img/4.jpg"/></li><li><img src="img/1.jpg"/></li><li><img src="img/2.jpg"/></li><li><img src="img/3.jpg"/></li></ul></div></div></div>

执行JS

$("#picTwo").jsPicPlay({type:2});

如果当前页面的一个或多个轮播都应用同样的设置直接写$.fn.jsPicPlay()来执行;

文章结束给大家分享下程序员的一些笑话语录：警告
有一个小伙子在一个办公大楼的门口抽着烟，一个妇女路过他身边，并对他说， “你知道不知道这个东西会危害你的健康？我是说，你有没有注意到香烟盒上的那个警告（Warning）？”
小伙子说，“没事儿，我是一个程序员”。
那妇女说，“这又怎样？”
程序员说，“我们从来不关心 Warning，只关心 Error”

切换图片尝试写第一个js插件图片轮播相关推荐

java 移动图片_Java写的一个简单的图片移动小程序
前两天,有一个小姑娘让帮忙给其写一个小玩意,就是在Panel上绘制一个图片,然后通过键盘的方向键进行控制移动.虽然比较简单,这里还是希望和大家分享一下,里面有两点特别需要注意的知识点,这里一并加以说明 ...
html图片百叶窗轮播,纯js百叶窗效果轮播图插件
这是一款纯js百叶窗效果轮播图插件.该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图.该轮播图由纯js编写,兼容ie8浏览器. 使用方法在页面中引入imgSwitch.min.js ...
js大屏导出图片_超大图片全屏动态展示js插件
intense-images是一款非常实用的超大图片全屏动态展示js插件.该图片查看插件可以全屏显示超大图片,可以使用鼠标来和图片进行交互,上下左右移动鼠标会相应的移动图片,对于超大图片的展示是非常好 ...
使用原生JS和使用插件实现轮播图
网页上的大致轮播图的滚动就是上面的演示轮播图的制作在制作轮播图的过程中我分成3步:框架的搭建--样式的装扮--动画效果. 1.框架的搭建如下代码展示,就是先在HTML里搭建出一个框架来: < ...
html原生js实现图片轮播,原生js实现简单轮播图
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: ...
使用CSS写正方体，结合JS实现3D轮播图
立体轮播图代码+界面呈现 HTML <div class="pox"><ul class="box"><li class=&qu ...
图片竖轮播html,JS实现纵向轮播图（初级版）
本文实例为大家分享了JS实现纵向轮播图的具体代码,供大家参考,具体内容如下描述: 纵向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的透明度 ...
html如何控制图片自动放缩,如何用js控制图片放大缩小
js控制图片放大缩小的效果,可以通过JavaScript的width和height属性来实现.其属性可以实现按比例放大和缩小图像尺寸的功能. 在前面的文章中,也为大家介绍了JS获取图片当前宽高和JS获 ...
原生js+css 实现轮播图完整代码
利用原生的js实现轮播图,可以添加到自己的UI库中,在以后的项目中对其进行修改然后添加到已有项目中. 先写出css部分和html部分,直接上代码 <!DOCTYPE html> <h ...

切换图片尝试写第一个js插件图片轮播

切换图片尝试写第一个js插件图片轮播相关推荐

最新文章

热门文章

切换图片尝试写第一个js插件 图片轮播

切换图片尝试写第一个js插件 图片轮播相关推荐

最新文章

热门文章

切换图片尝试写第一个js插件图片轮播

切换图片尝试写第一个js插件图片轮播相关推荐