how to create simple image slider / accordion ?

问题

In wordpress pages is there a plugin for vertical images..

I want a web page which should look like as follows:

In this there a main panel Products .And which has images as accordions..

Only 10% of the image is visible..but onclick of the image1 It should expand 100% as follows :

And the main thing is..These images user should be able to put in WP pages

Static its possible ..as shown in this

but i want it to be edited in the page or ..some othe way ..may be in one folder..

Is it possible? Is there a plugin which will help me out ? or else if i need to code for that then can anyone give me idea regarding same...?

回答1:

Here is your simple jQuery slider/accordion:

You can inspect from here (jsfiddle).

jQuery:

$('div').bind({
  click: function() {
    $('div').stop().animate({'height':'100px'},600);//600 sets time. 600miliseconds
    $(this).stop().animate({'height':'320px'},600);
  },
  /* if you want to do it with hover effects, just deactive click and use these:
  mouseenter: function() {
    $('div').stop().animate({'height':'100px'},600);//600 sets time. 600miliseconds
    $(this).stop().animate({'height':'320px'},600);
  },
  mouseleave: function() {
    $('div').stop().animate({'height':'100px'},600);
  }
  */
});

html:

<div>
   <img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" />
</div>
<div>
   <img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" />
</div>
<div>
   <img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" />
</div>
<div>
   <img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg" />
</div>

css:

div { overflow:hidden; float:left; height:100px; margin:0 5px; border-bottom: 1px solid #000; }

Note: You can use this on everything, just need to initialise jQuery (:

来源：https://stackoverflow.com/questions/11556127/how-to-create-simple-image-slider-accordion

标签

jquery

image

slider

jquery-animate

accordion