`
hudeyong926
  • 浏览: 2034985 次
  • 来自: 武汉
社区版块
存档分类
最新评论

图片轮换 滚动

阅读更多

jcarousellite是一款jquery插件,可以控制文档元素滚动,丰富的参数设置可以控制滚动的更多细节,是一款不可多得的滚动插件,使用非常方便,目前支持jquery1.2和以上版本

官网:http://www.gmarwaha.com/jquery/jcarousellite/

btnPrev     string 上一个按钮的class名, 比如  btnPrev: ".prev"
btnNext     string 下一个按钮的class名, 比如  btnPrev: ".prev"
btnGo       array  自定义滚动位置,类似幻灯片效果置,有选项卡,按照数组顺序,依次为按钮1按钮2按钮N,如以下,class名为1的按钮是第一个按钮:[".1", ".2"]
mouseWheel  bool   鼠标滑是否可以轮控制上下滚动,可选:false,true,默认false
auto        int    指定多少秒内容定期自动滚动。默认为空(null),是不滚动,如果设定的,单位为毫秒,如1秒为1000
speed       int    滑动的速度,可以尝试800 1000 1500,设置成0将删除效果
easing      string 缓冲效果名称,如:easing: "bounceout",需要jquery中的easing pluin(缓冲插件实现),只适用于jq1.2
vertical    bool   是否垂直滚动,可选:false,true,默认false
circular    bool   是否循环滚动,默认为true,如果为false,滚动到最后一个将停止滚动
visible     int    可见数量,可以为小数,如2.5为2.5个li
start       int    开始的地方,默认是0
scroll      int    每次滚动的li数量
beforeStart func   滚动开始时回调的函数,可以传入对象参数 beforeStart: function(a) { alert("开始的对象是:" + a)}
afterEnd    func   滚动结束时回调的函数,使用方法同上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jcarousellite图片滚动插件7种带按钮jquery图片滚动</title>
    <meta name="description" content="jquery图片滚动用jcarousellite图片滚动插件制作7种带按钮的图片滚动效果总一种合适您,支持左右图片滚动、上下图片滚动、自动图片滚动。jquery插件、jquery插件 jquery下载。" />

    <script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
    <script type="text/javascript" src="http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.js"></script>
    <script type="text/javascript" src="http://gsgd.co.uk/js/jquery.easing.1.1.js"></script>
    <style type="text/css">
        body,ul,li,div{padding:0;margin:0;list-style-type:none;}
        a,img {border:none;}
        .clear {clear:both;display:block;}
        .carousel {width:625px; margin:30px auto;}
        .carousel .prev , .carousel .next {height:23px;width:23px;overflow:hidden;display:block;margin-top:40px;text-decoration:none;cursor:pointer;}
        .carousel .prev {float:left;background:url(images/imageNavLeft.gif) no-repeat;}
        .carousel .next {float:left;background:url(images/imageNavRight.gif) no-repeat;}
        .carousel #prev-03.disabled{background:url(images/imageNavLeft-disabled.gif) no-repeat;cursor:default;}
        .carousel #next-03.disabled{background:url(images/imageNavRight-disabled.gif) no-repeat;cursor:default;}

        .jCarouselLite {float:left;width:486px;height:152px;overflow:hidden;/*必要元素*/}
        .jCarouselLite li{height:152px;width:162px;text-align:center;}
        .jCarouselLite li img,.jCarouselLite-01 li img{border:solid 1px #ddd;}

        .carousel-01 {width:152px;margin:30px auto;}
        .carousel-01 .prev , .carousel-01 .next {height:23px;width:23px;overflow:hidden;display:block;margin-left:60px;text-decoration:none;cursor:pointer;}
        .carousel-01 .prev {background:url(images/imageNavLeft.gif) no-repeat;}
        .carousel-01 .next {background:url(images/imageNavRight.gif) no-repeat;}
        .jCarouselLite-01 {height:385px;width:152px;overflow:hidden;/*必要元素*/}
        .jCarouselLite-01 li{height:152px;width:152px;text-align:center;padding:5px 0;}
    </style>
</head>

<body>
<div class="carousel">
    <a href="javascript:void(0);" class="prev" id="prev-01">&nbsp </a>
    <div class="jCarouselLite" id="demo-01">
        <ul>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2012-03-30/512.html" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="http://www.jsfoot.com/d/file/jquery/images/cj/2012-03-30/smallc7fb1818b3a9ae6770422992d6df7b45.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-20/219.html" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-20/smalld120ac28adc7863174531e90ca30fb35.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-19/217.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-19/small861fb36ea5b2491877623752f84c1297.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-18/189.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-18/small64e64c223150aacadf239d25c4f96440.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-05/167.html" target="_blank"><img height="150" width="150" alt="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-05/small60e10976234830bb2f715dc2b6438479.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-20/135.html" target="_blank"><img height="150" width="150" alt="jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-20/smallcef595d06b263f623b878c41a9640f5b.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-15/124.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-15/smallc2081239df287adc9fff1cf991e62b2e.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-07-26/82.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-07-26/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-02-21/38.html" target="_blank"><img height="150" width="150" alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-21/smallc9cfb68c13cbe925d3c9a03912f3b1de.jpg" /></a></li>
        </ul>
    </div>
    <a href="javascript:void(0);" class="next" id="next-01">&nbsp </a>
    <div class="clear"></div>
</div><!--carousel end-->
<script type="text/javascript">
    $(document).ready(function(){
        $('#demo-01').jCarouselLite({
            btnPrev: '#prev-01',
            btnNext: '#next-01',
            visible:2
        });
    });
</script>

<div class="carousel">
    <a href="javascript:void(0);" class="prev" id="prev-02">&nbsp </a>
    <div class="jCarouselLite" id="demo-02">
        <ul>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2012-03-30/512.html" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="http://www.jsfoot.com/d/file/jquery/images/cj/2012-03-30/smallc7fb1818b3a9ae6770422992d6df7b45.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-20/219.html" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-20/smalld120ac28adc7863174531e90ca30fb35.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-19/217.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-19/small861fb36ea5b2491877623752f84c1297.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-18/189.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-18/small64e64c223150aacadf239d25c4f96440.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-05/167.html" target="_blank"><img height="150" width="150" alt="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-05/small60e10976234830bb2f715dc2b6438479.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-20/135.html" target="_blank"><img height="150" width="150" alt="jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-20/smallcef595d06b263f623b878c41a9640f5b.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-15/124.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-15/smallc2081239df287adc9fff1cf991e62b2e.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-07-26/82.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-07-26/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-02-21/38.html" target="_blank"><img height="150" width="150" alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-21/smallc9cfb68c13cbe925d3c9a03912f3b1de.jpg" /></a></li>
        </ul>
    </div>
    <a href="javascript:void(0);" class="next" id="next-02">&nbsp </a>
    <div class="clear"></div>
</div><!--carousel end-->
<script type="text/javascript">
    $(document).ready(function(){
        $('#demo-02').jCarouselLite({
            btnPrev: '#prev-02',
            btnNext: '#next-02',
            auto: 800,
            speed: 1000
        });
    });
</script>

<div class="carousel">
    <a href="javascript:void(0);" class="prev disabled" id="prev-03">&nbsp </a>
    <div class="jCarouselLite" id="demo-03">
        <ul>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2012-03-30/512.html" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="http://www.jsfoot.com/d/file/jquery/images/cj/2012-03-30/smallc7fb1818b3a9ae6770422992d6df7b45.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-20/219.html" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-20/smalld120ac28adc7863174531e90ca30fb35.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-19/217.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-19/small861fb36ea5b2491877623752f84c1297.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-18/189.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-18/small64e64c223150aacadf239d25c4f96440.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-05/167.html" target="_blank"><img height="150" width="150" alt="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-05/small60e10976234830bb2f715dc2b6438479.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-20/135.html" target="_blank"><img height="150" width="150" alt="jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-20/smallcef595d06b263f623b878c41a9640f5b.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-15/124.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-15/smallc2081239df287adc9fff1cf991e62b2e.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-07-26/82.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-07-26/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-02-21/38.html" target="_blank"><img height="150" width="150" alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-21/smallc9cfb68c13cbe925d3c9a03912f3b1de.jpg" /></a></li>
        </ul>
    </div>
    <a href="javascript:void(0);" class="next" id="next-03">&nbsp </a>
    <div class="clear"></div>
</div><!--carousel end-->
<script type="text/javascript">
    $(document).ready(function(){
        $('#demo-03').jCarouselLite({
            btnPrev: '#prev-03',
            btnNext: '#next-03',
            circular: false,
            scroll: 2
        });
    });
</script>

<div class="carousel">
    <a href="javascript:void(0);" class="prev" id="prev-04">&nbsp </a>
    <div class="jCarouselLite" id="demo-04">
        <ul>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2012-03-30/512.html" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="http://www.jsfoot.com/d/file/jquery/images/cj/2012-03-30/smallc7fb1818b3a9ae6770422992d6df7b45.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-20/219.html" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-20/smalld120ac28adc7863174531e90ca30fb35.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-19/217.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-19/small861fb36ea5b2491877623752f84c1297.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-18/189.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-18/small64e64c223150aacadf239d25c4f96440.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-05/167.html" target="_blank"><img height="150" width="150" alt="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-05/small60e10976234830bb2f715dc2b6438479.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-20/135.html" target="_blank"><img height="150" width="150" alt="jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-20/smallcef595d06b263f623b878c41a9640f5b.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-15/124.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-15/smallc2081239df287adc9fff1cf991e62b2e.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-07-26/82.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-07-26/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-02-21/38.html" target="_blank"><img height="150" width="150" alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-21/smallc9cfb68c13cbe925d3c9a03912f3b1de.jpg" /></a></li>
        </ul>
    </div>
    <a href="javascript:void(0);" class="next" id="next-04">&nbsp </a>
    <div class="clear"></div>
</div><!--carousel end-->
<script type="text/javascript">
    $(document).ready(function(){
        $('#demo-04').jCarouselLite({
            btnPrev: '#prev-04',
            btnNext: '#next-04',
            easing: "bounceout",
            speed: 1000
        });
    });
</script>

<div class="carousel-01">
    <a href="javascript:void(0);" class="prev" id="prev-05">&nbsp </a>
    <div class="jCarouselLite-01" id="demo-05">
        <ul>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2012-03-30/512.html" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="http://www.jsfoot.com/d/file/jquery/images/cj/2012-03-30/smallc7fb1818b3a9ae6770422992d6df7b45.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-20/219.html" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-20/smalld120ac28adc7863174531e90ca30fb35.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-19/217.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-19/small861fb36ea5b2491877623752f84c1297.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-18/189.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-18/small64e64c223150aacadf239d25c4f96440.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-05/167.html" target="_blank"><img height="150" width="150" alt="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-05/small60e10976234830bb2f715dc2b6438479.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-20/135.html" target="_blank"><img height="150" width="150" alt="jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-20/smallcef595d06b263f623b878c41a9640f5b.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-15/124.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-15/smallc2081239df287adc9fff1cf991e62b2e.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-07-26/82.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-07-26/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-02-21/38.html" target="_blank"><img height="150" width="150" alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-21/smallc9cfb68c13cbe925d3c9a03912f3b1de.jpg" /></a></li>
        </ul>
    </div>
    <div style="clear:both;"></div>
    <a href="javascript:void(0);" class="next" id="next-05">&nbsp </a>
</div><!--carousel end-->

<script type="text/javascript">
    $(document).ready(function(){
        $('#demo-05').jCarouselLite({
            btnPrev: '#prev-05',
            btnNext: '#next-05',
            visible: 3,
            vertical: true,
            easing: "bounceout",
            speed: 1000
        });
    });
</script>


<div class="carousel-01">
    <a href="javascript:void(0);" class="prev" id="prev-06">&nbsp </a>
    <div class="jCarouselLite-01" id="demo-06">
        <ul>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2012-03-30/512.html" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="http://www.jsfoot.com/d/file/jquery/images/cj/2012-03-30/smallc7fb1818b3a9ae6770422992d6df7b45.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-20/219.html" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-20/smalld120ac28adc7863174531e90ca30fb35.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-19/217.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-19/small861fb36ea5b2491877623752f84c1297.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-18/189.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-18/small64e64c223150aacadf239d25c4f96440.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-05/167.html" target="_blank"><img height="150" width="150" alt="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-05/small60e10976234830bb2f715dc2b6438479.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-20/135.html" target="_blank"><img height="150" width="150" alt="jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-20/smallcef595d06b263f623b878c41a9640f5b.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-15/124.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-15/smallc2081239df287adc9fff1cf991e62b2e.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-07-26/82.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-07-26/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-02-21/38.html" target="_blank"><img height="150" width="150" alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-21/smallc9cfb68c13cbe925d3c9a03912f3b1de.jpg" /></a></li>
        </ul>
    </div>
    <a href="javascript:void(0);" class="next" id="next-06">&nbsp </a>
</div><!--carousel end-->

<script type="text/javascript">
    $(document).ready(function(){
        $('#demo-06').jCarouselLite({
            btnPrev: '#prev-06',
            btnNext: '#next-06',
            visible: 3,
            vertical: true
        });
    });
</script>

<div class="carousel">
    <a href="javascript:void(0);" class="prev" id="prev-07">&nbsp </a>
    <div class="jCarouselLite" id="demo-07">
        <ul>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2012-03-30/512.html" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="http://www.jsfoot.com/d/file/jquery/images/cj/2012-03-30/smallc7fb1818b3a9ae6770422992d6df7b45.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-20/219.html" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-20/smalld120ac28adc7863174531e90ca30fb35.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-19/217.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-19/small861fb36ea5b2491877623752f84c1297.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-18/189.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-18/small64e64c223150aacadf239d25c4f96440.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-05/167.html" target="_blank"><img height="150" width="150" alt="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-05/small60e10976234830bb2f715dc2b6438479.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-20/135.html" target="_blank"><img height="150" width="150" alt="jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-20/smallcef595d06b263f623b878c41a9640f5b.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-15/124.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-15/smallc2081239df287adc9fff1cf991e62b2e.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-07-26/82.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-07-26/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" /></a></li>
            <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-02-21/38.html" target="_blank"><img height="150" width="150" alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-21/smallc9cfb68c13cbe925d3c9a03912f3b1de.jpg" /></a></li>
        </ul>
    </div>
    <a href="javascript:void(0);" class="next" id="next-07">&nbsp </a>
    <div><button class="0">0</button><button class="1">1</button><button class="2">2</button></div>
</div><!--carousel end-->
<script type="text/javascript">
    $(document).ready(function(){
        $('#demo-07').jCarouselLite({
            btnPrev: '#prev-07',
            btnNext: '#next-07',
            btnGo:[".0", ".1", ".2"]
        });
    });
</script>
</body>
</html>

 

  • 描述: 图片轮换
  • 大小: 18.2 KB
  • 大小: 38.5 KB
分享到:
评论

相关推荐

    Android类似于头条的图片轮换滚动

    在Android应用开发中,实现类似今日头条的图片轮换滚动效果,通常会用到ViewPager这个组件。ViewPager是一个强大的视图滑动容器,它允许用户在多个页面间左右滑动,非常适合用来展示图片轮播或者实现类似轮播图的...

    Js轮换滚动

    Javasc图片轮换滚动

    轮换滚动图片jQuery效果,带有左右箭头

    7. **测试与优化**:预览网页,检查图片轮换是否正常,调整动画速度和过渡效果,以达到预期的用户体验。 通过以上步骤,我们可以构建一个基本的轮换滚动图片效果。这个案例中的演示地址...

    图片轮换、滚动都非常适合

    在IT行业中,图片轮换和滚动是两种非常重要的视觉呈现技术,尤其在网页设计和用户体验优化方面发挥着关键作用。这两种技术能够有效地展示大量图片,提高用户浏览的便捷性和吸引力。 图片轮换,通常被称为“幻灯片”...

    图片轮换、文字滚动、做网页专用26个

    "图片轮换、文字滚动、做网页专用26个"这个资源包,就是专门为网页设计师提供的一系列图片轮换和文字滚动效果的源文件。这些效果是通过CSS(Cascading Style Sheets)实现的,CSS是一种用于描述HTML或XML(包括如SVG...

    js无缝轮换滚动及透明轮换

    在本主题中,"js无缝轮换滚动及透明轮换"是指利用JS技术来创建一种视觉上连续且平滑的图片或内容展示方式,其中元素会自动地、无明显停顿地从一端滚动到另一端,同时可能伴随着透明度的变化,以增加视觉吸引力。...

    jQuery实例教程,滚动、导航、轮换、广告切换、图片轮换、弹出层、隔行换色、收缩展开效果、图片展示

    在本教程中,我们将深入探讨jQuery的一些核心功能和常见应用,如滚动、导航、轮换、广告切换、图片轮换、弹出层、隔行换色、收缩展开效果以及图片展示。 1. **滚动效果** jQuery提供了多种滚动效果,例如平滑滚动...

    超级Marquee,可做图片导航,图片轮换

    在IT行业中,网页元素的动态效果是提升用户体验的重要手段之一,"超级Marquee"就是这样的一个功能强大的工具,特别适用于创建图片导航和图片轮换效果。Marquee是HTML5中的一个非标准标签,它允许内容在网页上以滚动...

    图片轮换广告JS版和SWF版(内含调用示例)

    图片轮换广告是一种常见的网页设计元素,用于在有限的空间内展示多张图片,吸引用户的注意力,提高用户体验,以及促进产品的宣传或服务的推广。在这个压缩包中,包含两种版本的图片轮换广告实现:JS版和SWF版,以及...

    HTML图片轮换特效

    一个简单的图片轮换布局可能包括一个包含多张图片的`&lt;div&gt;`元素,每张图片用`&lt;img&gt;`标签表示。例如: ```html ``` 接下来,我们可以使用CSS来隐藏除第一张图片外的所有图片,并设置容器的样式。这里我们...

    JS图片轮换封装中处理时钟

    在JavaScript(JS)编程中,实现图片轮换是一种常见的需求,尤其在动态展示多张图片或创建滑动广告效果时。这个"JS图片轮换封装中处理时钟"的主题涉及了两个关键概念:图片轮换的实现和JavaScript的计时器机制。下面...

    JS图片流动和轮换效果

    一、图片轮换效果 图片轮换效果,又称为幻灯片效果,是一种在固定区域依次展示多张图片的技术。这种效果通常用于广告展示、产品展示或者新闻滚动等场景。主要包含以下几种类型: 1. 定时切换:通过设置定时器,每...

    多屏上下滚动flash图片轮换.rar

    【标题】"多屏上下滚动flash图片轮换.rar"是一个包含JavaScript特效的资源包,主要用于实现网页中的图片轮播效果。这种特效使得多张图片能够按照预设的顺序,在屏幕上以上下滚动的方式进行切换,为用户提供动态且...

    由模糊变清淅,FLASH 3D滚动图片轮换代码

    标题中的“由模糊变清淅,FLASH 3D滚动图片轮换代码”指的是一个使用Adobe Flash技术实现的3D图像展示效果,其中图片在展示过程中会经历从模糊到清晰的过渡,同时配合3D滚动效果,增加了视觉的动态感和吸引力。...

    图片轮换播放器网页特效

    在网页设计中,图片轮换播放器是一种常见的视觉效果,用于展示一组图片并按照特定的顺序和时间间隔自动切换,以此吸引用户注意力并提供丰富的用户体验。这种特效在网站的首页、产品展示、幻灯片或者新闻滚动等场景中...

    图片轮换JS网页特效

    在网页设计中,图片轮换效果是一种常见的动态展示方式,用于吸引用户注意力并提升网站的视觉体验。这种特效常用于首页焦点图、产品展示、新闻滚动等场景。本教程将详细解析“图片轮换JS网页特效”的实现原理、常用...

    四屏flash图片轮换代码js广告代码.rar

    【标题】"四屏flash图片轮换代码js广告代码.rar" 涉及的知识点主要集中在JavaScript(JS)编程和网页动态效果实现上,特别是关于焦点图或幻灯片展示的技巧。在网页设计中,四屏Flash图片轮换通常指的是在一个页面上...

Global site tag (gtag.js) - Google Analytics