Skip to content

Instantly share code, notes, and snippets.

@alexzhou

alexzhou/accordion-slides.html

Created November 4, 2013 03:01
Show Gist options
  • Save alexzhou/7297531 to your computer and use it in GitHub Desktop.
Save alexzhou/7297531 to your computer and use it in GitHub Desktop.
Download ZIP
可折叠式滑动展示图片 according slides images show
Raw
accordion-slides.html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
.slides{
margin: 0;
padding: 0;
list-style-type: none;
height: 220px;
/*width: 802px;*/
}
.slides li{
width: 100px;
float: left;
display: block;
overflow: hidden;
}
.slides li:first-child{
width: 502px;
}
</style>
<ul class="slides">
<li>
<a href="javascript:void(0)"><img src="http://img10.360buyimg.com/da/g13/M08/14/19/rBEhU1J28lYIAAAAAAC6aRY5rDUAAE9SAFN3IsAALqB529.jpg" alt=""></a>
</li>
<li>
<a href="javascript:void(0)"><img src="http://img10.360buyimg.com/da/g14/M07/19/08/rBEhVlJ0X-wIAAAAAABxFNw0h80AAE79gE-EdIAAHEs267.jpg" alt=""></a>
</li>
<li>
<a href="javascript:void(0)"><img src="http://img14.360buyimg.com/da/g14/M07/19/08/rBEhV1J0YGoIAAAAAACVJjIbnKgAAE79wMU5CUAAJU-845.jpg" alt=""></a>
</li>
<li>
<a href="javascript:void(0)"><img src="http://img13.360buyimg.com/da/g15/M04/13/07/rBEhWVJ0YK8IAAAAAACuQFDf60wAAE47wBpySQAAK5Y928.jpg" alt=""></a>
</li>
</ul>
<script type="text/javascript">
$(".slides li").click(function(){
var item = $(this);
item.siblings().animate({width:100});
item.animate({width:502});
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment