超简单的jquery 左右滚动图片，箭头控制左右滚动

超简单的jquery 左右滚动图片，箭头控制左右滚动

 

演示

 

 

XML/HTML Code

<div id="slider1"> <a class="buttons prev" href="#">lefta>
<div class="viewport">
<ul class="overview">
<li><img src="images/picture6.jpg" />li>
<li><img src="images/picture5.jpg" />li>
<li><img src="images/picture4.jpg" />li>
<li><img src="images/picture3.jpg" />li>
<li><img src="images/picture2.jpg" />li>
<li><img src="images/picture1.jpg" />li>
ul>
div>
<a class="buttons next" href="#">righta> div>

 

JavaScript Code

"text/javascript">
        $(document).ready(function(){
            $('#slider1').tinycarousel();
        });

 

CSS Code

/* Tiny Carousel */
#slider1 {
height: 1%;
overflow: hidden;
padding: 0 0 10px;
}
#slider1 .viewport {
float: left;
width: 240px;
height: 125px;
overflow: hidden;
position: relative;
}
#slider1 .buttons {
background: url("../images/buttons.png") no-repeat scroll 0 0 transparent;
display: block;
margin: 30px 10px 0 0;
background-position: 0 -38px;
text-indent: -999em;
float: left;
width: 39px;
height: 37px;
overflow: hidden;
position: relative;
}
#slider1 .next {
background-position: 0 0;
margin: 30px 0 0 10px;
}
#slider1 .disable {
visibility: hidden;
}
#slider1 .overview {
list-style: none;
position: absolute;
padding: 0;
margin: 0;
width: 240px;
left: 0 top: 0;
}
#slider1 .overview li {
float: left;
margin: 0 20px 0 0;
padding: 1px;
height: 121px;
border: 1px solid #dcdcdc;
width: 236px;
}

 

原文地址:http://www.freejs.net/article_jquerytupiantexiao_205.html