在手上工作完成之余，自己写了一个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总结，继续激情的前进着。。。
时间： 2024-10-16 08:39:03