超简单的jquery 左右滚动图片，箭头控制左右滚动
超简单的jquery 左右滚动图片，箭头控制左右滚动
XML/HTML Code
- <div id="slider1"> <a class="buttons prev" href="#">left</a>
- <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="#">right</a> </div>
JavaScript Code
- <script type="text/javascript">
- $(document).ready(function(){
- $('#slider1').tinycarousel();
- });
- </script>
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
相关推荐
周公周金桥 2020-09-06
大象从不倒下 2020-07-31
AlisaClass 2020-07-19
MaureenChen 2020-04-21
xingguanghai 2020-03-13
teresalxm 2020-02-18
木四小哥 2013-05-14
SoShellon 2013-06-01
Simagle 2013-05-31
羽化大刀Chrome 2013-05-31
waterv 2020-01-08
LutosX 2013-07-29
vanturman 2013-06-27
wutongyuq 2013-04-12
luoqu 2013-04-10
today0 2020-09-22
89520292 2020-09-18
bigname 2020-08-25