<style> .slideshow {
position: relative; background-color: orange; overflow: hidden;
}
.slideshow ul {
position: relative; padding: 0; margin: 0;
} .slideshow ul li {
padding: 0; margin: 0; list-style-type: none;
}
.slideshow .ss_nav {
position: absolute; width: 100%; height: 100%;
}
.slideshow .ss_nav li {
position: absolute; width: 50px; height: 50px; font-size: 50px; text-align: center; line-height: 50px; top: 50%; margin-top: -25px; z-index: 99999;
}
.slideshow .ss_nav .ss_prev {
left: 0;
}
.slideshow .ss_nav .ss_next {
right: 0;
}
.slideshow .ss_content {
width: 100%;
}
.slideshow .ss_content li {
position: relative; float: left;
} </style> <script> $(function(){
$('.ss_prev').click(function(){ var loop = $(this).parent().parent().hasClass('loop'), current = $(this).parent().siblings('.ss_content:first').children('li').not(':hidden'), width = current.width(); if(!current.is(':first-child')){ current.hide().prev('li').fadeIn(500); } else if(loop){ current.hide().siblings(':last-child').fadeIn(500); } }); $('.ss_next').click(function(){ var loop = $(this).parent().parent().hasClass('loop'), current = $(this).parent().siblings('.ss_content:first').children('li').not(':hidden'), width = current.width(); if(!current.is(':last-child')){ current.hide().next('li').fadeIn(500); } else if(loop){ current.hide().siblings(':first-child').fadeIn(500); } }); $('.ss_content li:first-child').siblings().hide();
}); </script>