利用jquery实现幻灯片定制插件



35 139 47



特效描述:利用jquery实现 幻灯片定制插件,利用jquery实现幻灯片定制插件

代码结构

1. 引入CSS

<link rel="stylesheet" href="index_files/bootstrap.css">
<link rel="stylesheet" href="index_files/jbhslider.css">
<link href="index_files/prettify.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="index_files/bootstrap.css">
<link rel="stylesheet" href="index_files/jbhslider.css">
<link href="index_files/prettify.css" type="text/css" rel="stylesheet">

2. 引入JS

<script src="js/html5.js"></script>
<script src="index_files/ga.js" async="" type="text/javascript"></script>
<script src="index_files/jbh_slider.js"></script>
<script type="text/javascript" src="index_files/prettify.js"></script>
<script src="js/html5.js"></script>
<script src="index_files/ga.js" async="" type="text/javascript"></script>
<script src="index_files/jbh_slider.js"></script>
<script type="text/javascript" src="index_files/prettify.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<!--[if lt IE 9]>
<![endif]-->
<script src="index_files/ga.js" async="" type="text/javascript"></script><script src="index_files/jquery.js"></script>
</head>
<body onLoad="prettyPrint();">
<div style="display:none">
</div>
<div class="container">
<div class="row" id="about">
<div class="span16">
<h2>About</h2>
<hr>
<p>
The JbhSlider is designed for be <strong>fully customizable</strong>. It's for a <strong>
Magento project</strong> that I've made this <strong>jQuery plugin</strong>.<br>
Therefore this plugin is completly usable for a <em>Magento store</em> and 
others (Wordpress for example).
</p>
<p>
You can <strong>easily make a slider</strong>, or with few lines of javascript a <strong>
simple tabs switcher</strong>. You can use this jQuery plugin simply for make a 
transition between two or more HTML elements.
</p>
</div>
</div>
<div class="row" id="examples">
<div class="span16">
<h2>Examples</h2>
<hr>
<div class="row">
<div class="span7">
<h3>Default slider</h3>
<p>This slider is the default configuration.</p>
<h4>HTML</h4>
<pre class="prettyprint"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">&quot;default_slider&quot;</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;ul&gt;</span><span class="pln">
</span><span class="tag">&lt;li&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">&quot;http://dummyimage.com/500x250&quot;</span><span class="pln"> </span><span class="tag">/&gt;&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;li&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">&quot;http://dummyimage.com/500x250&quot;</span><span class="pln"> </span><span class="tag">/&gt;&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;li&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">&quot;http://dummyimage.com/500x250&quot;</span><span class="pln"> </span><span class="tag">/&gt;&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></pre>
<h4>Javascript</h4>
<pre class="prettyprint"><span class="pln">jQuery</span><span class="pun">(</span><span class="str">'#default_slider'</span><span class="pun">).</span><span class="pln">jbhSlider</span><span class="pun">();</span></pre>
</div>
<div class="span9">
<div style="width: 500px; height: 250px; overflow: hidden;" class="slider jbhSlider" id="default_slider">
<ul style="width: 500px; height: 250px; position: relative;">
<li style="width: 500px; height: 250px; position: absolute; top: 0px; left: 0px; opacity: 0; z-index: 10;" class="jbhSliderItem"><img src="index_files/ffffff_006.png"></li>
<li style="width: 500px; height: 250px; position: absolute; top: 0px; left: 0px; opacity: 1; z-index: 11;" class="jbhSliderItem"><img src="index_files/ffffff_002.png"></li>
<li style="width: 500px; height: 250px; position: absolute; top: 0px; left: 0px; opacity: 0; z-index: 9;" class="jbhSliderItem"><img src="index_files/ffffff_005.png"></li>
</ul>
</div><ul class="jbhSliderNavigation"><li><a style="visibility: visible;" class="jbhSliderNavigationPrevious" href="#">
	&lt;</a></li><li><a style="visibility: visible;" class="jbhSliderNavigationNext" href="#">
	&gt;</a></li></ul>
</div>
<script type="text/javascript">
// <![CDATA[
jQuery('#default_slider').jbhSlider();
// ]]>
</script>
</div>
<hr>
<div class="row">
<div class="span7">
<h3>Be simple, just slide</h3>
<p>This slider is a little bit configurated.</p>
<ol>
<li>Timer to 5 seconds</li>
<li>Slide duration to 0.5 second</li>
<li>Horizontal slide</li>
<li>Simple pagination</li>
<li>3 loops</li>
</ol>
<h4>HTML</h4>
<pre class="prettyprint"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">&quot;simple_slider&quot;</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;ul&gt;</span><span class="pln">
</span><span class="tag">&lt;li&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">&quot;http://dummyimage.com/500x250&quot;</span><span class="pln"> </span><span class="tag">/&gt;&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;li&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">&quot;http://dummyimage.com/500x250&quot;</span><span class="pln"> </span><span class="tag">/&gt;&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;li&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">&quot;http://dummyimage.com/500x250&quot;</span><span class="pln"> </span><span class="tag">/&gt;&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></pre>
<h4>Javascript</h4>
<pre class="prettyprint"><span class="pln">jQuery</span><span class="pun">(</span><span class="str">'#simple_slider'</span><span class="pun">).</span><span class="pln">jbhSlider</span><span class="pun">({</span><span class="pln">
transition</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'horizontal-left'</span><span class="pun">,</span><span class="pln">
duration</span><span class="pun">:</span><span class="pln"> </span><span class="lit">500</span><span class="pun">,</span><span class="pln">
timer</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5000</span><span class="pun">,</span><span class="pln">
repeat</span><span class="pun">:</span><span class="pln"> </span><span class="lit">3</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
pagination</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'bullets'</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></pre>
</div>
<div class="span9 slider">
<div style="width: 500px; height: 250px; overflow: hidden; position: relative;" class="slider jbhSlider" id="simple_slider">
<ul style="width: 1500px; height: 250px; position: absolute; top: 0px; left: 0px;">
<li style="width: 500px; height: 250px; float: left; opacity: 1;" class="jbhSliderItem"><img src="index_files/ffffff_006.png"></li>
<li style="width: 500px; height: 250px; float: left;" class="jbhSliderItem"><img src="index_files/ffffff_002.png"></li>
<li style="width: 500px; height: 250px; float: left;" class="jbhSliderItem"><img src="index_files/ffffff_005.png"></li>
</ul>
</div><ul class="jbhSliderNavigation"><li><a style="visibility: visible;" class="jbhSliderNavigationPrevious" href="#">
	&lt;</a></li><li><a style="visibility: visible;" class="jbhSliderNavigationNext" href="#">
	&gt;</a></li></ul><ol class="jbhSliderPages"><li class="current"><a class="current" href="#">
	&#8226;</a></li><li class=""><a class="" href="#">&#8226;</a></li><li class=""><a class="" href="#">
	&#8226;</a></li></ol>
</div>
<script type="text/javascript">
// <![CDATA[
jQuery('#simple_slider').jbhSlider({
transition: {
type: 'horizontal-left',
duration: 500,
timer: 5000,
repeat: 3
},
pagination: {
type: 'bullets'
}
});
// ]]>
</script>
</div>
<hr>
<div class="row">
<div class="span7">
<h3>Customizable? Yes, it is.</h3>
<p>This slider is fun. Use the settings.</p>
<ol>
<li>Timer to 5 seconds</li>
<li><code>div</code> tags only, with 2 levels (not 3 by default)</li>
<li>Transition customized</li>
<li>Slide duration to 0 second (but x_duration to 1 second ;) )</li>
<li>No pagination &amp; navigation</li>
<li>More CSS applied to the slider and the items (for the border)</li>
</ol>
<h4>HTML</h4>
<pre class="prettyprint"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">&quot;custom_slider&quot;</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;div&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">&quot;http://dummyimage.com/500x250&quot;</span><span class="pln"> </span><span class="tag">/&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">&quot;http://dummyimage.com/500x250&quot;</span><span class="pln"> </span><span class="tag">/&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">&quot;http://dummyimage.com/500x250&quot;</span><span class="pln"> </span><span class="tag">/&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></pre>
</div>
<div class="span9 slider">
<div style="width: 510px; height: 260px; overflow: hidden; position: relative;" class="slider jbhSlider" id="custom_slider">
<div style="border-width: 5px; border-style: solid; border-color: orange green violet yellow; width: 0px; height: 0px; position: absolute; top: 125px; left: 250px; opacity: 0; z-index: 145;" class="jbhSliderItem"><img style="display: inline-block; width: 0px; height: 0px;" src="index_files/ffffff_006.png"></div>
<div style="border-width: 5px; border-style: solid; border-color: orange green violet yellow; width: 0px; height: 0px; position: absolute; top: 125px; left: 250px; opacity: 0; z-index: 146;" class="jbhSliderItem"><img style="width: 0px; height: 0px; display: inline-block;" src="index_files/ffffff_002.png"></div>
<div style="border-width: 5px; border-style: solid; border-color: orange green violet yellow; width: 500px; height: 250px; position: absolute; top: 0px; left: 0px; opacity: 1; z-index: 147;" class="jbhSliderItem"><img style="width: 500px; height: 250px; display: inline-block;" src="index_files/ffffff_005.png"></div>
</div>
</div>
<script type="text/javascript">
// <![CDATA[
jQuery('#custom_slider').jbhSlider({
selector: null,
css: {
width: 510,
height: 260
},
elements: {
selector: '> div',
css: {
borderTop: '5px solid orange',
borderLeft: '5px solid yellow',
borderBottom: '5px solid violet',
borderRight: '5px solid green',
width: 500,
height: 250
}
},
transition: {
duration: 0,
x_duration: 1000,
timer: 4000,
before: function (slider, to, transition) {
// stop events
to.stop(true);
slider.data('current').stop(true);
// css for next item
to.find('img').css({
width: 500,
height: 250
});
to.css({
top: 0,
left: 0,
width: 500,
height: 250
});
// transition
to.animate({
opacity: 1
}, slider.data('settings').transition.x_duration);
slider.data('current').find('img').animate({
width: 0,
height: 0
}, slider.data('settings').transition.x_duration);
slider.data('current').animate({
opacity: 0,
top: 125,
left: 250,
width: 0,
height: 0
}, slider.data('settings').transition.x_duration, function () {
transition();
});
}
},
pagination: {
type: false
},
navigation: {
active: false
}
});
// ]]>
</script>
</div>
<div class="row">
<div class="span11">
<h4>Javascript</h4>
<pre class="prettyprint"><span class="pln">jQuery</span><span class="pun">(</span><span class="str">'#custom_slider'</span><span class="pun">).</span><span class="pln">jbhSlider</span><span class="pun">({</span><span class="pln">
selector</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">,</span><span class="pln">
css</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">510</span><span class="pun">,</span><span class="pln">
height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">260</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
elements</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&gt; div'</span><span class="pun">,</span><span class="pln">
css</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
borderTop</span><span class="pun">:</span><span class="pln"> </span><span class="str">'5px solid orange'</span><span class="pun">,</span><span class="pln">
borderLeft</span><span class="pun">:</span><span class="pln"> </span><span class="str">'5px solid yellow'</span><span class="pun">,</span><span class="pln">
borderBottom</span><span class="pun">:</span><span class="pln"> </span><span class="str">'5px solid violet'</span><span class="pun">,</span><span class="pln">
borderRight</span><span class="pun">:</span><span class="pln"> </span><span class="str">'5px solid green'</span><span class="pun">,</span><span class="pln">
width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">500</span><span class="pun">,</span><span class="pln">
height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">250</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
transition</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
duration</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">
x_duration</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">,</span><span class="pln">
timer</span><span class="pun">:</span><span class="pln"> </span><span class="lit">4000</span><span class="pun">,</span><span class="pln">
</span><span style="font-style: italic"><span class="pln">
before</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">slider</span><span class="pun">,</span><span class="pln"> to</span><span class="pun">,</span><span class="pln"> transition</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="com">// stop events</span><span class="pln">
to</span><span class="pun">.</span><span class="pln">stop</span><span class="pun">(</span><span class="kwd">true</span><span class="pun">);</span><span class="pln">
slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'current'</span><span class="pun">).</span><span class="pln">stop</span><span class="pun">(</span><span class="kwd">true</span><span class="pun">);</span><span class="pln">
</span><span class="com">// css for next item</span><span class="pln">
to</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="str">'img'</span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln">
width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">500</span><span class="pun">,</span><span class="pln">
height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">250</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
to</span><span class="pun">.</span><span class="pln">css</span><span class="pun">({</span><span class="pln">
top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">
left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">
width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">500</span><span class="pun">,</span><span class="pln">
height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">250</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span><span class="com">// transition</span><span class="pln">
to</span><span class="pun">.</span><span class="pln">animate</span><span class="pun">({</span><span class="pln">
opacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pln">
</span><span class="pun">},</span><span class="pln"> slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'settings'</span><span class="pun">).</span><span class="pln">transition</span><span class="pun">.</span><span class="pln">x_duration</span><span class="pun">);</span><span class="pln">
slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'current'</span><span class="pun">).</span><span class="pln">find</span><span class="pun">(</span><span class="str">'img'</span><span class="pun">).</span><span class="pln">animate</span><span class="pun">({</span><span class="pln">
width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">
height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln">
</span><span class="pun">},</span><span class="pln"> slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'settings'</span><span class="pun">).</span><span class="pln">transition</span><span class="pun">.</span><span class="pln">x_duration</span><span class="pun">);</span><span class="pln">
slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'current'</span><span class="pun">).</span><span class="pln">animate</span><span class="pun">({</span><span class="pln">
opacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">
top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">125</span><span class="pun">,</span><span class="pln">
left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">250</span><span class="pun">,</span><span class="pln">
width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">
height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln">
</span><span class="pun">},</span><span class="pln"> slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'settings'</span><span class="pun">).</span><span class="pln">transition</span><span class="pun">.</span><span class="pln">x_duration</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
transition</span><span class="pun">();</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span></span><span class="pln">
</span><span class="pun">},</span><span class="pln">
pagination</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
type</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
navigation</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
active</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></pre>
</div>
<div class="span5">
<h4>WTF?</h4>
<p>It's easy to change the transition.</p>
<h5>Three things</h5>
<ol>
<li>set <code>transition.duration</code> to 0</li>
<li>set <code>transition.effect</code> to fade (by default)</li>
<li>change the <code>transition.before</code> closure</li>
</ol>
<p>Take a look of the <code>transition.before</code> setting on the left side ;)<br>
The <code>x_duration</code> is a custom setting.</p>
<h5>Why?</h5>
<p>
Simply because if the duration is set to 0, the fade will be instant. And an 
instant fade is equal to just change the slide/element displayed.
<br>
Before run the transition you can change the css rules for the current and the 
next slides/elements. With the <code>animate</code> method or not!
<br>
Easy.
</p>
</div>
</div>
<hr>
<div class="row">
<div class="span7">
<h3>Perfect control</h3>
<p>This slider is a little bit configurated.</p>
<ol>
<li>No timer</li>
<li>Slide duration to 2 seconds</li>
<li>Horizontal slide</li>
<li>No navigation</li>
<li>Default &amp; custom pagination</li>
</ol>
</div>
<div class="span9 slider">
<div style="width: 500px; height: 250px; overflow: hidden; position: relative;" class="slider jbhSlider" id="control_slider">
<ul style="width: 1500px; height: 250px; position: absolute; top: 0px; left: 0px;">
<li style="width: 500px; height: 250px; float: left; opacity: 1;" class="jbhSliderItem"><img src="index_files/ffffff_006.png"></li>
<li style="width: 500px; height: 250px; float: left;" class="jbhSliderItem"><img src="index_files/ffffff_002.png"></li>
<li style="width: 500px; height: 250px; float: left;" class="jbhSliderItem"><img src="index_files/ffffff_005.png"></li>
</ul>
</div><ol class="jbhSliderPages"><li class="current"><a class="current" href="#">
	&#8226;</a></li><li><a href="#">&#8226;</a></li><li><a href="#">&#8226;</a></li></ol>
<ul class="jbhSliderNavigation custom" id="control_navigation">
<li><a href="#" rel="1"><img src="index_files/ffffff.png"></a></li>
<li><a href="#" rel="2"><img src="index_files/ffffff_003.png"></a></li>
<li><a href="#" rel="3"><img src="index_files/ffffff_004.png"></a></li>
</ul>
</div>
<script type="text/javascript">
// <![CDATA[
jQuery('#control_slider').jbhSlider({
init: function (slider) {
jQuery('#control_navigation a').click(function () {
slider.jbhSlider('slide', jQuery(this).attr('rel'));
return false;
});
},
transition: {
type: 'horizontal-left',
duration: 2000,
timer: -1
},
pagination: {
type: 'bullets'
},
navigation: {
active: false
}
});
// ]]>
</script>
</div>
<div class="row">
<div class="span16">
<h4>HTML</h4>
<pre class="prettyprint"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">&quot;control_slider&quot;</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;ul&gt;</span><span class="pln">
</span><span class="tag">&lt;li&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">&quot;http://dummyimage.com/500x250&quot;</span><span class="pln"> </span><span class="tag">/&gt;&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;li&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">&quot;http://dummyimage.com/500x250&quot;</span><span class="pln"> </span><span class="tag">/&gt;&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;li&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">&quot;http://dummyimage.com/500x250&quot;</span><span class="pln"> </span><span class="tag">/&gt;&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">&quot;control_navigation&quot;</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">&quot;#&quot;</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">&quot;1&quot;</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">&quot;http://dummyimage.com/30x20&quot;</span><span class="pln"> </span><span class="tag">/&gt;&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">&quot;#&quot;</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">&quot;2&quot;</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">&quot;http://dummyimage.com/30x20&quot;</span><span class="pln"> </span><span class="tag">/&gt;&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">&quot;#&quot;</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">&quot;3&quot;</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">&quot;http://dummyimage.com/30x20&quot;</span><span class="pln"> </span><span class="tag">/&gt;&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;/ul&gt;</span></pre>
</div>
</div>
<div class="row">
<div class="span10">
<h4>Javascript</h4>
<pre class="prettyprint"><span class="pln">jQuery</span><span class="pun">(</span><span class="str">'#control_slider'</span><span class="pun">).</span><span class="pln">jbhSlider</span><span class="pun">({</span><span class="pln">
init</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">slider</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
jQuery</span><span class="pun">(</span><span class="str">'#control_navigation a'</span><span class="pun">).</span><span class="pln">click</span><span class="pun">(</span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
slider</span><span class="pun">.</span><span class="pln">jbhSlider</span><span class="pun">(</span><span class="str">'slide'</span><span class="pun">,</span><span class="pln"> jQuery</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'rel'</span><span class="pun">));</span><span class="pln">
</span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
transition</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'horizontal-left'</span><span class="pun">,</span><span class="pln">
duration</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2000</span><span class="pun">,</span><span class="pln">
timer</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="lit">1</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
pagination</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'bullets'</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
navigation</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
active</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></pre>
</div>
<div class="span6">
<h4>Triggers</h4>
<p>With <strong>JbhSlider</strong>, you can custom easily all triggered actions.</p>
<p>Before slide, on success slide or simply for the slider initialization.</p>
</div>
</div>
</div>
</div> <!-- end examples -->
<div class="row" id="documentation">
<div class="span16">
<h2>Documentation</h2>
<hr>
<div class="row">
<div class="span16">
<h3>Default settings</h3>
<pre class="prettyprint"><span class="kwd">var</span><span class="pln"> settings </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
init</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">slider</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{},</span><span class="pln">
selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&gt; ul'</span><span class="pun">,</span><span class="pln">
cssClass</span><span class="pun">:</span><span class="pln"> </span><span class="str">'jbhSlider'</span><span class="pun">,</span><span class="pln">
elements</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&gt; li'</span><span class="pun">,</span><span class="pln">
cssClass</span><span class="pun">:</span><span class="pln"> </span><span class="str">'jbhSliderItem'</span><span class="pun">,</span><span class="pln">
css</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
css</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">500</span><span class="pun">,</span><span class="pln">
height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">250</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
transition</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'fade'</span><span class="pun">,</span><span class="pln">
duration</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">,</span><span class="pln">
timer</span><span class="pun">:</span><span class="pln"> </span><span class="lit">3000</span><span class="pun">,</span><span class="pln">
actionStopTimer</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
mouseHoverStop</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
before</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">slider</span><span class="pun">,</span><span class="pln"> to</span><span class="pun">,</span><span class="pln"> transition</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">transition</span><span class="pun">();},</span><span class="pln">
success</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">slider</span><span class="pun">,</span><span class="pln"> to</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{},</span><span class="pln">
maxZIndex</span><span class="pun">:</span><span class="pln"> </span><span class="lit">300</span><span class="pun">,</span><span class="pln">
repeat</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="lit">1</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
pagination</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
type</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">,</span><span class="pln">
text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'{{page}}'</span><span class="pun">,</span><span class="pln">
cssClass</span><span class="pun">:</span><span class="pln"> </span><span class="str">'jbhSliderPages'</span><span class="pun">,</span><span class="pln">
id</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">,</span><span class="pln">
currentCssClass</span><span class="pun">:</span><span class="pln"> </span><span class="str">'current'</span><span class="pun">,</span><span class="pln">
tag</span><span class="pun">:</span><span class="pln"> </span><span class="str">'ol'</span><span class="pun">,</span><span class="pln">
subTag</span><span class="pun">:</span><span class="pln"> </span><span class="str">'li'</span><span class="pun">,</span><span class="pln">
position</span><span class="pun">:</span><span class="pln"> </span><span class="str">'after'</span><span class="pun">,</span><span class="pln">
container</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
navigation</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
active</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
cssClass</span><span class="pun">:</span><span class="pln"> </span><span class="str">'jbhSliderNavigation'</span><span class="pun">,</span><span class="pln">
id</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">,</span><span class="pln">
loop</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
tag</span><span class="pun">:</span><span class="pln"> </span><span class="str">'ul'</span><span class="pun">,</span><span class="pln">
subTag</span><span class="pun">:</span><span class="pln"> </span><span class="str">'li'</span><span class="pun">,</span><span class="pln">
</span><span class="kwd">next</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&gt;'</span><span class="pun">,</span><span class="pln">
cssClass</span><span class="pun">:</span><span class="pln"> </span><span class="str">'jbhSliderNavigationNext'</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
previous</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&lt;'</span><span class="pun">,</span><span class="pln">
cssClass</span><span class="pun">:</span><span class="pln"> </span><span class="str">'jbhSliderNavigationPrevious'</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
position</span><span class="pun">:</span><span class="pln"> </span><span class="str">'after'</span><span class="pun">,</span><span class="pln">
container</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">};</span></pre>
</div>
</div>
<div class="row">
<div class="span16">
<h3>The different settings</h3>
<div class="row">
<div class="span16">
<h4>Basics</h4>
<pre class="prettyprint"><span class="kwd">var</span><span class="pln"> settings </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&gt; ul'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// CSS Selector for the slides/elements container</span><span class="pln">
</span><span class="com">// If null: the slider is the container but the transition effect is set to fade.</span><span class="pln">
</span><span class="com">// By default the slider is like that: div &gt; ul.jbhSlider &gt; collection(li.jbhSliderItem)</span><span class="pln">
cssClass</span><span class="pun">:</span><span class="pln"> </span><span class="str">'jbhSlider'</span><span class="pln"> </span><span class="com">// The CSS class for the slider</span><span class="pln">
</span><span class="pun">};</span></pre>
</div>
</div>
<div class="row">
<div class="span16">
<h4>Triggers</h4>
<pre class="prettyprint"><span class="kwd">var</span><span class="pln"> settings </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
init</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">slider</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{},</span><span class="pln"> </span><span class="com">// Method call on slider loading</span><span class="pln">
transition</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
before</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">slider</span><span class="pun">,</span><span class="pln"> to</span><span class="pun">,</span><span class="pln"> transition</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">transition</span><span class="pun">();},</span><span class="pln"> </span><span class="com">// Method call before sliding</span><span class="pln">
success</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">slider</span><span class="pun">,</span><span class="pln"> to</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{}</span><span class="pln"> </span><span class="com">// Method call after sliding</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">};</span></pre>
</div>
</div>
<div class="row">
<div class="span16">
<h4>The slides</h4>
<pre class="prettyprint"><span class="kwd">var</span><span class="pln"> settings </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
elements</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&gt; li'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// Selector wich permits to reach the second level. The class &quot;current&quot; will be applied. Can be NULL.</span><span class="pln">
cssClass</span><span class="pun">:</span><span class="pln"> </span><span class="str">'jbhSliderItem'</span><span class="pln"> </span><span class="com">// CSS class applied to slides</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">};</span></pre>
</div>
</div>
<div class="row">
<div class="span16">
<h4>Cascading Style Sheets</h4>
<pre class="prettyprint"><span class="kwd">var</span><span class="pln"> settings </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
css</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">500</span><span class="pun">,</span><span class="pln"> </span><span class="com">// Slider width</span><span class="pln">
height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">250</span><span class="pln"> </span><span class="com">// Slider height</span><span class="pln">
</span><span class="com">// You can add every CSS properties which will be applied to the slides/elements and the slider.</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
elements</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
css</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{}</span><span class="pln"> </span><span class="com">// List of css properties which will be applied to the elements.</span><span class="pln">
</span><span class="com">// If empty, the css setting (above) will be used.</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">};</span></pre>
</div>
</div>
<div class="row">
<div class="span16">
<h4>Transition</h4>
<pre class="prettyprint"><span class="kwd">var</span><span class="pln"> settings </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
transition</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'fade'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// It can be : horizontal-left or horizontal-right</span><span class="pln">
duration</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">,</span><span class="pln"> </span><span class="com">// Effect duration</span><span class="pln">
timer</span><span class="pun">:</span><span class="pln"> </span><span class="lit">3000</span><span class="pun">,</span><span class="pln"> </span><span class="com">// Time between two slides, put -1 for disable the automatic sliding</span><span class="pln">
actionStopTimer</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="com">// Indicate if a simple clic stops the automatic sliding</span><span class="pln">
mouseHoverStop</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="com">// Indicates if the transition will stop or not when the mouse hovers on the slider</span><span class="pln">
before</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">slider</span><span class="pun">,</span><span class="pln"> to</span><span class="pun">,</span><span class="pln"> transition</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">transition</span><span class="pun">();},</span><span class="pln"> </span><span class="com">// Method call before sliding (trigger section)</span><span class="pln">
success</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">slider</span><span class="pun">,</span><span class="pln"> to</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{},</span><span class="pln"> </span><span class="com">// Method call after sliding (trigger section)</span><span class="pln">
maxZIndex</span><span class="pun">:</span><span class="pln"> </span><span class="lit">300</span><span class="pun">,</span><span class="pln"> </span><span class="com">// Count for maximum z-index for the fade effect. The z-index is reset when the limit is exceeded</span><span class="pln">
repeat</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="lit">1</span><span class="pln"> </span><span class="com">// How many loops (-1 = no limit)</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">};</span></pre>
</div>
</div>
<div class="row">
<div class="span16">
<h4>Pagination</h4>
<pre class="prettyprint"><span class="kwd">var</span><span class="pln"> settings </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
pagination</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
type</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">,</span><span class="pln"> </span><span class="com">// Can be : numbers, bullets, custom</span><span class="pln">
</span><span class="com">// NULL    : No pagination</span><span class="pln">
</span><span class="com">// numbers : displays &quot;1 2 3 4&quot;</span><span class="pln">
</span><span class="com">// bullets : displays &quot;&#8226; &#8226; &#8226; &#8226;&quot;</span><span class="pln">
</span><span class="com">// custom  : displays &quot;1 2 3 4&quot; by default</span><span class="pln">
text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'{{page}}'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// Text used with the &quot;custom&quot; pagination type</span><span class="pln">
cssClass</span><span class="pun">:</span><span class="pln"> </span><span class="str">'jbhSliderPages'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// CSS class applied to the pagination</span><span class="pln">
id</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">,</span><span class="pln"> </span><span class="com">// id applied to the pagination (nothing if NULL)</span><span class="pln">
currentCssClass</span><span class="pun">:</span><span class="pln"> </span><span class="str">'current'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// CSS class applied to the current page</span><span class="pln">
tag</span><span class="pun">:</span><span class="pln"> </span><span class="str">'ol'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// HTML tag for the main pagination container</span><span class="pln">
subTag</span><span class="pun">:</span><span class="pln"> </span><span class="str">'li'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// HTML tag used to frame the pagination links. The CSS class 'currentCssClass' will be applied.</span><span class="pln">
</span><span class="com">// Can be empty or NULL, in this cases no supplementary tags are used to frame the pagination links.</span><span class="pln">
position</span><span class="pun">:</span><span class="pln"> </span><span class="str">'after'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// Can be : before</span><span class="pln">
</span><span class="com">// Indicates if the pagination block will be placed before of after the slider.</span><span class="pln">
container</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pln"> </span><span class="com">// Identifier of the container for the pagination block (nothing by default)</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">};</span></pre>
</div>
</div>
<div class="row">
<div class="span16">
<h4>Navigation</h4>
<pre class="prettyprint"><span class="kwd">var</span><span class="pln"> settings </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
navigation</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
active</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="com">// Enable or disable the navigation</span><span class="pln">
cssClass</span><span class="pun">:</span><span class="pln"> </span><span class="str">'jbhSliderNavigation'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// CSS class added to the navigation</span><span class="pln">
id</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">,</span><span class="pln"> </span><span class="com">// id applied to the navigation (nothing if null)</span><span class="pln">
loop</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="com">// Indicates if the previous and next links can be used for loop</span><span class="pln">
tag</span><span class="pun">:</span><span class="pln"> </span><span class="str">'ul'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// HTML tag of the main container of the navigation</span><span class="pln">
subTag</span><span class="pun">:</span><span class="pln"> </span><span class="str">'li'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// HTML tag used to frame the navigation links</span><span class="pln">
</span><span class="com">// Can be empty or NULL, in this cases no supplementary tags are used to frame the navigation links.</span><span class="pln">
</span><span class="com">// Parameters for the &quot;next&quot; link</span><span class="pln">
</span><span class="kwd">next</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&gt;'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// HTML text used for the next link</span><span class="pln">
cssClass</span><span class="pun">:</span><span class="pln"> </span><span class="str">'jbhSliderNavigationNext'</span><span class="pln"> </span><span class="com">// CSS class</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
</span><span class="com">// Parameters for the &quot;previous&quot; link</span><span class="pln">
previous</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&lt;'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// HTML text used for the next link</span><span class="pln">
cssClass</span><span class="pun">:</span><span class="pln"> </span><span class="str">'jbhSliderNavigationPrevious'</span><span class="pln"> </span><span class="com">// CSS class</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
position</span><span class="pun">:</span><span class="pln"> </span><span class="str">'after'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// Can be : before</span><span class="pln">
</span><span class="com">// Indicates if the navigation block will be placed before or after the slider.</span><span class="pln">
container</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pln"> </span><span class="com">// Identifier of the container for the navigation block (nothing by default)</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">};</span></pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span16">
<h3>How to select slider elements</h3>
<pre class="prettyprint"><span class="com">/**
* The slider
*/</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> slider </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'slider_id'</span><span class="pun">);</span><span class="pln">
</span><span class="com">// The settings</span><span class="pln">
slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'settings'</span><span class="pun">);</span><span class="pln">
</span><span class="com">// Elements count</span><span class="pln">
slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'count'</span><span class="pun">);</span><span class="pln">
</span><span class="com">// The current slide/element</span><span class="pln">
slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'current'</span><span class="pun">);</span><span class="pln">
</span><span class="com">// Previous and next slide/element</span><span class="pln">
slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'previous'</span><span class="pun">);</span><span class="pln"> </span><span class="com">// element or null</span><span class="pln">
slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'next'</span><span class="pun">);</span><span class="pln"> </span><span class="com">// element or null</span><span class="pln">
</span><span class="com">// Mouse over the slider?</span><span class="pln">
slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'mouseIn'</span><span class="pun">);</span><span class="pln"> </span><span class="com">// bool</span><span class="pln">
</span><span class="com">/**
* Some access via the settings
*/</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> settings </span><span class="pun">=</span><span class="pln"> slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'settings'</span><span class="pun">);</span><span class="pln">
</span><span class="com">// All elements</span><span class="pln">
settings</span><span class="pun">.</span><span class="pln">data</span><span class="pun">.</span><span class="pln">liList</span><span class="pun">;</span><span class="pln"> </span><span class="com">// bad name... I know :D</span><span class="pln">
</span><span class="com">// The current zIndex for the fade effect</span><span class="pln">
settings</span><span class="pun">.</span><span class="pln">data</span><span class="pun">.</span><span class="pln">zIndex</span><span class="pun">;</span><span class="pln">
</span><span class="com">/**
* With the current slide... lot of data
*/</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> element </span><span class="pun">=</span><span class="pln"> slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'current'</span><span class="pun">);</span><span class="pln">
</span><span class="com">// Position of the slide</span><span class="pln">
element</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'position'</span><span class="pun">);</span><span class="pln">
</span><span class="com">// Is first? Last?</span><span class="pln">
element</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'first'</span><span class="pun">);</span><span class="pln"> </span><span class="com">// bool</span><span class="pln">
element</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'last'</span><span class="pun">);</span><span class="pln"> </span><span class="com">// bool</span><span class="pln">
</span><span class="com">// The pager link for this element</span><span class="pln">
element</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'pager'</span><span class="pun">);</span><span class="pln">
</span><span class="com">// The slider of course :)</span><span class="pln">
element</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'slider'</span><span class="pun">);</span><span class="pln">
</span><span class="com">/**
* With the pager link
*/</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> pagerLink </span><span class="pun">=</span><span class="pln"> element</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'pager'</span><span class="pun">);</span><span class="pln">
</span><span class="com">// The linked element</span><span class="pln">
pagerLink</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'to'</span><span class="pun">);</span><span class="pln"> </span><span class="com">// element</span><span class="pln">
</span><span class="com">// The slider of course :)</span><span class="pln">
pagerLink</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'slider'</span><span class="pun">);</span><span class="pln">
</span><span class="com">/**
* The pagination
*/</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> pagination </span><span class="pun">=</span><span class="pln"> slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'settings'</span><span class="pun">).</span><span class="pln">pagination</span><span class="pun">.</span><span class="pln">element</span><span class="pun">;</span><span class="pln">
</span><span class="com">// The pagination elements</span><span class="pln">
slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'settings'</span><span class="pun">).</span><span class="pln">pagination</span><span class="pun">.</span><span class="pln">elements</span><span class="pun">;</span><span class="pln">
</span><span class="com">/**
* The navigation
*/</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> navigation </span><span class="pun">=</span><span class="pln"> slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'settings'</span><span class="pun">).</span><span class="pln">navigation</span><span class="pun">.</span><span class="pln">element</span><span class="pun">;</span><span class="pln">
</span><span class="com">// The previous link</span><span class="pln">
slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'settings'</span><span class="pun">).</span><span class="pln">navigation</span><span class="pun">.</span><span class="pln">previous</span><span class="pun">.</span><span class="pln">link</span><span class="pun">;</span><span class="pln">
</span><span class="com">// The next link</span><span class="pln">
slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'settings'</span><span class="pun">).</span><span class="pln">navigation</span><span class="pun">.</span><span class="kwd">next</span><span class="pun">.</span><span class="pln">link</span><span class="pun">;</span><span class="pln">
</span><span class="com">// For previous and next links, you can get the slider of course ;)</span><span class="pln">
slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'settings'</span><span class="pun">).</span><span class="pln">navigation</span><span class="pun">.</span><span class="pln">previous</span><span class="pun">.</span><span class="pln">link</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'slider'</span><span class="pun">);</span><span class="pln">
slider</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'settings'</span><span class="pun">).</span><span class="pln">navigation</span><span class="pun">.</span><span class="kwd">next</span><span class="pun">.</span><span class="pln">link</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'slider'</span><span class="pun">);</span></pre>
</div>
</div>
</div>
</div>
</div> <!-- /container -->
<div style="text-align:center;clear:both">
</div>
</body></html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 图片淡出淡进 滑动选项卡切换 文字淡出淡进 图片滑动 文字滑动 滑动手风琴 滑动星星打分 滑动滑过 渐隐切换 淡出淡入淡进

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到