loopedSlider

jsntghf

浏览: 2542897 次
性别:
来自: 苏州

最近访客更多访客>>

samhunglv

loginboot

yongjiucui

diabloaaa

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

JavaScript jQuery CSS XHTML HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>loopedSlider - Image Example</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="loopedslider.js"></script>
    <script type="text/javascript">
      $(function(){
        $('#loopedslider').loopedSlider({
          autoHeight: true,
          containerClick: false
        });
      });
    </script>
    <style type="text/css">
      /*
		 * Required 
		*/
      .container {
        width:500px;
        height:250px;
        overflow:hidden;
        position:relative;
      }
      .slides {
        position:absolute;
        top:0;
        left:0;
      }
      .slides > div {
        position:absolute;
        top:0;
        width:480px;
        padding:20px;
        display:none;
      }
      /*
		 * Optional
		*/
      body { 
        font:normal 15px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
        letter-spacing:0.33px;
        color:#0e152b;
        background:#eee;
        padding:20px 0;
      }
      #loopedslider {
        margin:0 auto;
        width:500px;
        position:relative;
        clear:both;
      }
      ul.pagination {
        list-style:none;
        padding:0;
        margin:0;
      }
      ul.pagination li  {
        float:left;
      }
      ul.pagination li a {
        padding:2px 4px;
      }
      ul.pagination li.active a {
        background:blue;
        color:white;
      }
      .container {
        background:#fff;
        padding:0 20px;
      }
    </style>
  </head>
  <body>
    <div id="loopedslider">
      <a href="#" class="previous">previous</a>
      <a href="#" class="next">next</a>
      <div class="container">
        <div class="slides">
          <div>
            <h1>Title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <a href="http://example.com/">Some Link</a>
          </div>
          <div>
            <h1>Title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <a href="http://example.com/">Some Link</a>
          </div>
          <div>
            <h1>Title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <a href="http://example.com/">Some Link</a>
          </div>
          <div>
            <h1>Title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <a href="http://example.com/">Some Link</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

示例图：

默认参数

container: ".container", //Class/id of main container. You can use "#container" for an id.
slides: ".slides", //Class/id of slide container. You can use "#slides" for an id.
pagination: "pagination", //Class name of parent ul for numbered links. Don't add a "." here.
containerClick: true, //Click slider to goto next slide? true/false
autoStart: 0, //Set to positive number for true. This number will be the time between transitions.
restart: 0, //Set to positive number for true. Sets time until autoStart is restarted.
slidespeed: 300, //Speed of slide animation, 1000 = 1second.
fadespeed: 200, //Speed of fade animation, 1000 = 1second.
autoHeight: 0, //Set to positive number for true. This number will be the speed of the animation.
addPagination: false //Add pagination links based on content? true/false

具体用法可参考：http://nathansearles.com/plugin/loopedslider/

example.rar (26.5 KB)
下载次数: 13

分享到：

no such file to load -- test/unit/error ... | Apache2 403 Forbidden错误

2011-04-22 08:47
浏览 1775
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

loopedSlider

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

loopedSlider

评论

发表评论

相关推荐

密码输入延迟屏蔽

日历控件

渐变打分条

滚动新闻

网页配色

圆角文本框的实现

javascript加载xml，在chrome下失败的解决办法

可输入文本的下拉框

二级树形菜单

不规则菜单

二级树形菜单

随机显示图片

滚动字幕效果

美化select

无图片圆角

设置滚动条的颜色

CSS细线表格

分页效果

FormTools

表单当前行高亮的实现

最近访客更多访客>>