web design: Slider Image Menggunakan JQuery

Slider Image Menggunakan JQuery

Pada pertemuan kali ini saya akan berbagi Slder Image dengan dengan menggunakan Jquery atau disebut dengan javasript. dengan dropdown lain dari pada yang lain. kamu juga dapat melihat sendiri hasilnya setelah didowload atau lihat sendiri pada link Demo.juga dapat didowload pada link download. berikut ini saya jelaskan tag html dan cssnya :

Tag HTML nya

<div id="ei_menu" class="ei_menu">
 <ul>
<li>
   <a href="#" class="pos1">
    <span class="ei_preview"></span>
    <span class="ei_image"></span>
    </a>
     <div class="ei_descr">
      <h2>
Gary</h2>
<h3>
Vocals</h3>
<p>
A wonderful serenity has taken possession of my
      entire soul, like these sweet mornings of
      spring which I enjoy with my whole heart.
      </p>
<p>
I am alone, and feel the charm of existence in
      this spot, which was created for the bliss of
      souls like mine.
      </p>
</div>
</li>
<li>
   <a href="#" class="pos2">
   <span class="ei_preview"></span>
   <span class="ei_image"></span>
   </a>
    <div class="ei_descr">
    <h2>
David</h2>
<h3>
Guitar</h3>
<p>
A wonderful serenity has taken possession of my
    entire soul, like these sweet mornings of
    spring which I enjoy with my whole heart.
    </p>
<p>
I am alone, and feel the charm of existence in
    this spot, which was created for the bliss of
    souls like mine.
    </p>
</div>
</li>
<li>
   <a href="#" class="pos3">
   <span class="ei_preview"></span>
   <span class="ei_image"></span>
   </a>
    <div class="ei_descr">
    <h2>
Andrew</h2>
<h3>
Bass</h3>
<p>
A wonderful serenity has taken possession of my
    entire soul, like these sweet mornings of
    spring which I enjoy with my whole heart.
    </p>
<p>
I am alone, and feel the charm of existence in
    this spot, which was created for the bliss of
    souls like mine.
    </p>
</div>
</li>
<li>
   <a href="#" class="pos4">
   <span class="ei_preview"></span>
   <span class="ei_image"></span>
   </a>
    <div class="ei_descr">
    <h2>
Sean</h2>
<h3>
Drums</h3>
<p>
A wonderful serenity has taken possession of my
    entire soul, like these sweet mornings of
    spring which I enjoy with my whole heart.
    </p>
<p>
I am alone, and feel the charm of existence in
    this spot, which was created for the bliss of
    souls like mine.
    </p>
</div>
</li>
<li>
   <a href="#" class="pos5">
   <span class="ei_preview"></span>
   <span class="ei_image"></span>
   </a>
    <div class="ei_descr">
    <h2>
Marc</h2>
<h3>
Guitar</h3>
<p>
A wonderful serenity has taken possession of my
    entire soul, like these sweet mornings of
    spring which I enjoy with my whole heart.
    </p>
<p>
I am alone, and feel the charm of existence in
    this spot, which was created for the bliss of
    souls like mine.
    </p>
</div>
</li>
<li>
   <a href="#" class="pos6">
   <span class="ei_preview"></span>
   <span class="ei_image"></span>
   </a>
    <div class="ei_descr">
    <h2>
Matt</h2>
<h3>
Guitar</h3>
<p>
A wonderful serenity has taken possession of my
    entire soul, like these sweet mornings of
    spring which I enjoy with my whole heart.
    </p>
<p>
I am alone, and feel the charm of existence in
    this spot, which was created for the bliss of
    souls like mine.
    </p>
</div>
</li>
</ul>
</div>

ul.trigger_list{
 position:absolute;
 right:20px;
 top:145px;
}
ul.trigger_list li{
 float:left;
 line-height:53px;
 color:#ddd;
 font-style:italic;
}
ul.trigger_list li a{
 font-family: 'Rock Salt', arial, serif;
 display:block;
 background:#000;
 color:#ddd;
 line-height:35px;
 padding:5px 10px;
 margin:3px;
 border-radius:5px 5px 5px 5px;
 text-shadow:1px 1px 1px #000;
}
ul.trigger_list li a:hover{
 background:#222;
 color:#fff;

}

JQuery

itemParam = (dir) ? {width : '400px'} : {width : '75px'},
imageParam = (dir) ? {left : '0px'} : {left : '75px'};

/*
if opening, we animate the opacity of all the elements to 0.1.
this is to give focus on the opened item..
*/
if(dir)
/*
alternative:
$menuItemsPreview.not($menuItemsPreview.eq(current))
 .stop()
 .animate({opacity:0.1}, 500);
*/
$menuItemsPreview.stop()
.animate({opacity:0.1}, 1000);
else if(mLeave)
$menuItemsPreview.stop()
.animate({opacity:1}, 1500);

/* the <li> expands or collapses */
$item.stop().animate(itemParam, speed, easing);
/* the image (color) slides in or out */
$ei_image.stop().animate(imageParam, speed, easing, function() {
/*
if opening, we animate the opacity to 1,
otherwise we reset it.
*/
if(dir)
$ei_image.animate({opacity:1}, 2000);
else
$ei_image.css('opacity', 0.2);
});
};

return {
init   : init,
openItem : openItem
};
})();
     
/*
call the init method of ExpandingMenu
*/
ExpandingMenu.init();
   
/*
if later on you want to open / close a specific item you could do it like so:
ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing)
*/
});
</script>

File nya dapat dilihat hasilnya dan dapat diunduh berikut ini :

Pages

Slider Image Menggunakan JQuery

Slider Image Menggunakan JQuery

Tag HTML nya

Tag CSS nya

JQuery

Demo Unduh

About Me