首页 > 代码库 > 图片轮播小插件
图片轮播小插件
在手上工作完成之余，自己写了一个jQuery小插件，针对我们现在所用到的图片轮播特效进行一个封装，没事就写写，记录我的前端历程上的点点滴滴。
编写背景：
在web端经常会看到图片滚来滚去的，自己就想一个方式，让前端团队开发这些特效时间更快，效果更好，实现特效的方式更多，可以随意替换图片轮播的方式，兼容各个浏览器，是我的初衷，也是对自己的js编程经验一个积攒，我相信带着兴趣做自己喜欢的事，是工作生活的初衷意义。。。
插件介绍：
本“小插”是基于jQuery上进行开发，对所播放的图片大小做了自适应，现在能做以下几件事，后期会添加更多效果：
1. 设置播放类型（自动或不自动）
2.设置播放间隔时间（以秒为单位）
3.设置播放层的背景色
4.设置操作键方式（带左右滚动按钮或不带，带滚动坐标点或不带）
5.图片轮播的分类：
（1）无任何特效形式，就是页面单纯的切换（noEffect）
（2）图片在滚动的时候带有淡入淡出效果（fade）
（3）图片自下往上滚动（bottom-up）
（4）图片从左往右延伸滚动（cover）
HTML页面调用插件：
代码如下：
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> body{margin: 0px 0px 0px 0px;} .myslider{height: 400px;} ul{list-style: none; margin:0px 0px 0px 0px; padding-left: 0px;} ul li{display: none;} ul .lishow{display: block;} .klm{position: absolute; z-index: 10; top: 420px; left: 50%;} .klm .klma{width: 30px; height: 30px; line-height: 30px; border-radius: 5px; float: left; text-align: center; text-decoration: none; margin-right: 10px; background: skyblue; color: #fff; border: 1px solid #009933;} .klm .klmbgOn{background: red; color: #fff; border: 1px solid royalblue;} .nav{width: 100px; height: 100px; position: absolute; z-index: 1000; top: 156px; display: none;} .nav .navem{width: 45px; height: 70px; display: block;} .next{left:10px;} .prev{right: 10px;} .next .emleft{background: url("images/index-icon.png") -21px -52px; float: left; } .next .emleft:hover{background: url("images/index-icon.png") -152px -51px;float: left; } .prev .emright{background: url("images/index-icon.png") -59px -52px;float: right; } .prev .emright:hover{background: url("images/index-icon.png") -105px -52px;float: right;} </style></head><body><div class="myslider"> <ul class="ulSlider"> <li class="lishow"> <img src="images/k1.jpg" /> </li> <li> <img src="images/k2.jpg" /> </li> <li> <img src="images/k3.jpg" /> </li> </ul></div><div class="nav next"> <em class="navem emleft"></em></div><div class="nav prev"> <em class="navem emright"></em></div><div class="klm"> <a href="#" class="klma klmbgOn">1</a> <a href="#" class="klma">2</a> <a href="#" class="klma">3</a></div></body><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="js/starSlider.js"></script><script type="text/javascript"> $(‘.myslider‘).starSlider({ width: ‘‘, height: ‘‘, mode:‘bottom-up‘, //切换类型bottom-up,fade,cover,noEffect autoplay: ‘true‘, //自动播放设置 playtime:‘3000‘, //间隔秒数 element:‘li‘, //图片滚动容器设置 //滚动坐标点设置 navObject:{ cla:‘klm‘, node:‘a‘ }, //滚动点样式设置 libutton:{ bgon:‘klmbgOn‘ }, //左右按钮设置 button:{ left:‘next‘, right:‘prev‘ } });</script></html>
主要功能实现在starSlider.js
代码如下：
/** * Created by 前端艺术者 on 14-12-01. */(function($){ $.fn.starSlider = function(option){ //定义初始化属性，用jquery继承方式把自定义属性封装起来 var setting = $.extend({ mode: "fade", //切换类型bottom-up,fade,cover,noEffect, width: ‘100%‘, height: null, bgcolor: "#FFF", autoplay: "true", //自动播放 playtime: 2000, //播放间隔秒数 element:null, navObject:{ cla:null, node:null }, libutton:{ bgon:null }, button:{ left:null, right:null } },option); //定义每个元素对象 var sliders = this.find(setting.element); //获取每个nav对象 var navList = $("." + setting.navObject.cla).find(setting.navObject.node); //设置滚动区域背景 this.css(‘background-color‘, setting.bgcolor); //获取循环元素的长度 var _length = sliders.length; var _len = _length - 1; //记录当前滚动数 var current = 0; var timeStor; var imagesList = this.find(‘img‘); var imgSize = function(){ //定义每个图片对象 图片自适应高宽 imagesList.attr(‘width‘,setting.width == null || setting.width == ‘100%‘ || setting.width == ‘‘ ? document.body.clientWidth : setting.width); imagesList.attr(‘height‘,setting.height == null || setting.height == ‘100%‘|| setting.height == ‘‘? document.body.clientHeight : setting.height); }; imgSize(); window.onresize = function(){ imgSize(); } //鼠标移动到滚动区域显示左右按钮 $(this).hover(function(){ $(‘.‘ + setting.button.left).show(); $(‘.‘ + setting.button.right).show(); },function(){ $(‘.‘ + setting.button.left).hide(); $(‘.‘ + setting.button.right).hide(); }); //启动滚动操作 var running = function(){ setMode(current,0,null); }, /* * 判断滚动数 * @a 操作时候传进来的当前滚动数 * @b 是哪种操作形式 （0,1左右按钮操作值）2,滚动点操作值 * */ lengthV = function(a,b){ //如果b是0表示是程序默认累加滚动 if(b == 0){ //如果a值长度大于滚动图片数 则从头开始滚动 赋值为0 if(a >= _len){ return a = 0; }else{ //如果不是则继续下一张图片滚动 return a = a + 1; } }else{ //如果b不是0，表示直接返回 return a; } }, //给滚动点加入样式，"@f"是当前滚动点数,只有当前滚动点才加新样式 navFind = function(f){ for(var i = 0; i < navList.length; i++){ if(navList.eq(i).text() -1 == f){ navList.eq(i).addClass(setting.libutton.bgon); }else{ navList.eq(i).removeClass(setting.libutton.bgon); } } }, //设置滚动方式"@c"指向当前滚动数 // "@b"传入操作方式0,表示默认滚动 1,表示左右按钮和滚动点操作方式 // "@f"表示哪个点击操作：0,表示左按钮 1,表示右按钮 2,滚动点 setMode = function(c,b,f){ if(setting.mode == "bottom-up"){ if(b == 1){ clickNum(c,b,f); }else{ $(sliders[c]).slideUp(‘slow‘,function(){ $(this).hide(); }); current = lengthV(c,b); $(sliders[current]).slideDown(‘slow‘,function(){ $(this).show(); }); } navFind(current); }else if(setting.mode == "fade"){ if(b == 1){ clickNum(c,b,f); }else{ $(sliders[c]).fadeIn(‘slow‘,function(){ $(this).hide(); }); current = lengthV(c,b); $(sliders[current]).fadeIn(‘slow‘,function(){ $(this).show(); }); } navFind(current); }else if(setting.mode == "cover"){ if(b == 1){ clickNum(c,b,f); }else{ $(sliders[c]).hide({effect: ‘fade‘, duration: 1000}); current = lengthV(c,b); $(sliders[current]).show({effect: ‘fade‘, duration: 1000}); } navFind(current); }else if(setting.mode == "noEffect"){ if(b == 1){ clickNum(c,b,f); }else{ $(sliders[c]).hide(); current = lengthV(c,b); $(sliders[current]).show(); } navFind(current); } }, init = function(){ //初始设置自动播放 if (setting.autoplay == "true"){ timeStor = setInterval(running, setting.playtime); } }, starhover = function(_this,n){ //左右按钮和滚动点指向操作 "@_this"是当前对象，jquery方式获取的 "@n"指的是左右按钮一 $(_this).hover(function(){ clearInterval(timeStor); if(n == 0){ $(‘.‘ + setting.button.left).show(); $(‘.‘ + setting.button.right).show(); } },function(){ init(); }); }, clickNum = function(c,b,f){ current = lengthV(c,b); if(f == 0){ if(current == _len){ $(sliders[0]).hide(); $(sliders[_len]).show(); }else{ $(sliders[current + 1]).hide(); $(sliders[current]).show(); } }else if(f == 1){ if(current == 0){ $(sliders[_len]).hide(); $(sliders[current]).show(); }else{ $(sliders[current - 1]).hide(); $(sliders[current]).show(); } }else if(f == 2){ for(var k = 0; k < _length; k++){ if(current == k){ $(sliders[k]).show(); }else{ $(sliders[k]).hide(); } } } } //初始化加载执行操作 init(); //左右按钮点击操作 $(‘.‘ + setting.button.left).click(function(){ if(current <= 0){ current = _len; }else if(current != 0){ current = current - 1; } setMode(current,1,0); }); $(‘.‘ + setting.button.right).click(function(){ if(current >= _len){ current = 0; }else{ current = current + 1; } setMode(current,1,1); }); //滚动点点击操作 $(setting.navObject.node).click(function(){ var num = $(this).text() - 1; navFind(num); setMode(num,1,2); }); //鼠标指向滚动点和按钮时，停止滚动 starhover(‘.‘ + setting.button.left,0); starhover(‘.‘ + setting.button.right,0); starhover(setting.navObject.node,1); }})(jQuery);
简单的实现了图片轮播的封装。。。
个人的js总结，继续激情的前进着。。。
图片轮播小插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。