ピクチャーの輪番の小さいプラグイン
47360 ワード
手の上で仕事が完成した后に、自分で1つのjQueryの小さいプラグインを书いて、私达の今使ったピクチャーの轮播の特効に対して1つのパッケージを行って、大丈夫で书いて、私の先端の过程の上の少しを记录します.
作成背景:
web端でよくピクチャーが転がっているのを見て、自分で1つの方式を考えて、フロントエンドのチームにこれらの特効の時間をもっと速く開発させて、効果はもっと良くて、特効の方式を実現してもっと多くて、勝手にピクチャーの輪番の方式を交換することができて、各ブラウザを互換して、私の初志で、自分のjsのプログラミングの経験に対して1つの蓄積で、趣味を持って自分の好きなことをするのは、仕事生活の初心の意味だと信じています...
プラグインの説明:
この「プラグイン」は、jQueryに基づいて開発され、再生された画像のサイズに適応しました.
1. 再生タイプの設定(自動または非自動)
2.再生間隔を秒単位で設定
3.再生レイヤの背景色を設定
4.操作キーの設定方法(左右スクロールボタン付きまたはなし、スクロール座標点付きまたはなし)
5.画像の輪番の分類:
(1)何の特効もなく,ページの単純な切り替え(noEffect)である.
(2)画像をスクロールするときのフェードアウト効果(fade)
(3)画像を下から上へスクロール(bottom-up)
(4)画像を左から右へスクロール(cover)
HTMLページ呼び出しプラグイン:
コードは次のとおりです.
主な機能はstarSliderで実現する.js
コードは次のとおりです.
Demo: http://104.kuailingmin.sinaapp.com/
简単に画像の轮播のパッケージを実现しました..
个人的なjsまとめ、情热的に进んでいます..
作成背景:
web端でよくピクチャーが転がっているのを見て、自分で1つの方式を考えて、フロントエンドのチームにこれらの特効の時間をもっと速く開発させて、効果はもっと良くて、特効の方式を実現してもっと多くて、勝手にピクチャーの輪番の方式を交換することができて、各ブラウザを互換して、私の初志で、自分のjsのプログラミングの経験に対して1つの蓄積で、趣味を持って自分の好きなことをするのは、仕事生活の初心の意味だと信じています...
プラグインの説明:
この「プラグイン」は、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);Demo: http://104.kuailingmin.sinaapp.com/
简単に画像の轮播のパッケージを実现しました..
个人的なjsまとめ、情热的に进んでいます..