JQuery的jCarousellite插件打造超炫左右滚动效果

2014年5月4日 飞飞 阅读(6.43K)

工作时用到了左右滚动,经过大量的查找,研究,学习突然发现Jquery的插件jCarousellite是最好用的,下面是我写的一个例子,共享出来和大家一起学习研究,欢迎大家来我的网站PHP学习网

效果图:

jcarousellite

<!DOCTYPE HTML>
<html>
<head>
    <title>JQuery的jCarousellite插件打造超炫左右滚动效果</title>
    <script src=”http://www.viphper.com/js/jquery-1.8.3.js” type=”text/javascript”></script>
    <script src=”http://www.viphper.com/js/jcarousellite.js” type=”text/javascript”></script>
    <style type=”text/css”>
.slide{
    width:996px;
    height:117px;
    padding:5px;
    position:relative;    
}
.slide ul li{
    float:left;    
    display:block;
    width:130px; height:92px;
    text-align:center;
    line-height:92px;
    padding: 5px;
    position:relative; /*设置图片样式加透明字*/

}

.slide ul li span{
    width:120px;
    height: 25px;
    line-height: 25px;
    margin-left: 10px;
    background:#000;
    display:block;
    position:absolute; /*它的父为 slide ul li(注:只有父设置为相对定位,子设置绝对定位时不会飘出)*/
    bottom:0; left:0; top:70px;
    color:#fff;
    filter:alpha(opacity=50);
    -moz-opacity:0.6;
    opacity:0.6;
    text-align:center;
}

/**************左右箭头***************/
.yl,.yr{
    position:absolute; /*它的父为slide*/
    width:33px;
    height:33px;
    background:url(images/pre_btn.png) no-repeat;
    top:32px;
    left:20px;
    z-index: 9999;
}
.yr{
    left:942px;
    background:url(images/back_btn.png) no-repeat
}
    </style>
    
<script type=text/javascript>
$(document).ready(function(){
    $(‘#slide_01’).jCarouselLite({
      btnPrev: ‘#prev’,
      btnNext: ‘#next’,
      scroll:1, //每次滚动一个
      visible:7, //显示7个
      auto:800, //自动
      speed:1000 //加速
    });   
});
</script>
</head>
<body>
    <div >
          <div id=”slide_01″>
              <ul>
                <li><a href=”http://www.viphper.com/” title=”PHP学习网”><img src=”images/01.jpg” ></a><span>PHP学习网</span></li>
                <li><a href=”http://www.viphper.com/” title=”PHP学习网”><img src=”images/02.jpg” ></a><span>PHP学习网</span></li>
                <li><a href=”http://www.viphper.com/” title=”PHP学习网”><img src=”images/03.jpg” ></a><span>PHP学习网</span></li>
                <li><a href=”http://www.viphper.com/” title=”PHP学习网”><img src=”images/04.jpg” ></a><span>PHP学习网</span></li>
                <li><a href=”http://www.viphper.com/” title=”PHP学习网”><img src=”images/05.jpg” ></a><span>PHP学习网</span></li>
                <li><a href=”http://www.viphper.com/” title=”PHP学习网”><img src=”images/06.jpg” ></a><span>PHP学习网</span></li>
                <li><a href=”http://www.viphper.com/” title=”PHP学习网”><img src=”images/07.jpg” ></a><span>PHP学习网</span></li>
              </ul>
           </div>
            <a href=”javascript:void(0);” id=”prev”></a>
            <a href=”javascript:void(0);” id=”next”></a>
  </div>
</body>
</html>

献上演示地址:

http://www.viphper.com/demo/jcarousellite_left_right/index.html

未经允许不得转载:PHP学习网 » JQuery的jCarousellite插件打造超炫左右滚动效果
分享到:

相关推荐

评论抢沙发

要发表评论,您必须先

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

扫码关注微信公众号

扫描关注微信公众号