图片循环滚动imgscroll插件使用方法 图片连续无缝循环滚动效果演示

<

>

古剑奇谭-百里屠苏

古剑奇谭-风晴雪

古剑奇谭-欧阳少恭

古剑奇谭-襄玲

古剑奇谭-红玉

<

>

1

2

3

4

5

古剑奇谭2场景

古剑奇谭2-阿阮

古剑奇谭2-夏夷则

古剑奇谭2-闻人羽

古剑奇谭2-乐无异

^

v

仙剑奇侠传5前传-夏侯瑾轩

仙剑奇侠传5前传-瑕

仙剑奇侠传5前传-姜承

仙剑奇侠传5前传-暮菖兰

仙剑奇侠传5前传-结萝

^

v

仙剑奇侠传5所有主角

仙剑奇侠传5-小蛮

仙剑奇侠传5-龙幽

仙剑奇侠传5-唐雨柔

仙剑奇侠传5-姜云凡

<

>

1

2

3

4

5

仙剑奇侠传4-云天河

仙剑奇侠传4-韩菱纱

仙剑奇侠传4-慕容紫英

仙剑奇侠传4-柳梦璃

仙剑奇侠传4

<

>

新剑侠传奇-耶律离

新剑侠传奇-温酾酒

新剑侠传奇-耶律青

新剑侠传奇-杨不凡

新剑侠传奇-赵鹤闲

CSS代码（参考）

<style>
*{padding:0;margin:0;font-family:"微软雅黑"}
.imgscroll2{width:380px;margin-right:5px;margin-bottom:5px;height:180px;float:left;position:relative;overflow:hidden}
.imgscroll2:hover .pre{display:block}
.imgscroll2:hover .next{display:block}
.imgscroll2 li{list-style:none;margin:0;padding:0}
.imgscroll2 .imglist{width:100%;height:inherit;position:absolute}
.imgscroll2 .imglist li{height:inherit;position:absolute;top:0;left:0}
.imgscroll2 .imgdesc{width:80px;left:50%; margin-left:-40px;bottom:5px;position:absolute;overflow:hidden}
.imgscroll2 .imgdesc li{width:16px; border-radius:8px; transition:all linear 0.2s;height:16px;float:left;vertical-align:middle;text-align:center;background:rgba(102,102,102,0.5);margin:0;cursor:pointer; line-height:16px; color:#fff}
.imgscroll2 .imgdesc li.hover{background:#fff;color:#000}
.imgscroll2 .pre{position:absolute; top:50%; margin-top:-40px; z-index:10; width:20px; height:80px; left:0; background:rgba(0,0,0,0.5); line-height:80px; vertical-align:middle; text-align:center; color:#fff; cursor:pointer; display:none}
.imgscroll2 .next{position:absolute; top:50%;margin-top:-40px; z-index:10;  width:20px; height:80px; right:0; background:rgba(0,0,0,0.5); line-height:80px; vertical-align:middle;text-align:center; color:#fff; cursor:pointer; display:none}
.imgscroll2 .imginfo{position:absolute; width:190px; top:0; left:50%; margin-left:-95px; height:30px; overflow:hidden;background:rgba(102,102,102,0.5);}
.imgscroll2 .imginfo li{ height:30px; color:#fff; width:100%; color:#fff; text-align:center;line-height:30px; vertical-align:middle; text-align:; position:absolute;}
</style>

JS代码（核心）

<script src="http://www.xcsoft.cn/Public/js/jquery.js"></script><!--引入Jquery-->
<script src="http://www.xcsoft.cn/Public/js/jquery.imgscroll.min.js?v=2014102202"></script><!--引入图片循环滚动js-->
<script>
$(function(e){
    //滚动循环示例
    imgScroll.scroll({
        name:'imgscroll2',
        width:'380px',
        direction:"left",
        height:'180px',
        addcss:true,
        showinfo:"scroll",
        infodirection:'top',
        speed:200
        },5000,1000)
    //渐变循环示例
    /*
    imgScroll.gradual({
        name:'imgscroll2',
        width:'380px',
        height:'180px',
        addcss:true,
        showinfo:"scroll",
        infodirection:'top',
        speed:200
        },5000,1000)*/
});
</script>

HTML代码（标准示例）

<div class="imgscroll2">
  <div class="pre"><</div>
    <div class="next">></div>
    <div class="imglist">
      <li><img src="http://www.xcsoft.cn/Public/images/img/1.jpg" /></li>
      <li><img src="http://www.xcsoft.cn/Public/images/img/2.jpg" /></li>
      <li><img src="http://www.xcsoft.cn/Public/images/img/3.jpg" /></li>
      <li><img src="http://www.xcsoft.cn/Public/images/img/4.jpg" /></li>
      <li><img src="http://www.xcsoft.cn/Public/images/img/5.jpg" /></li>
    </div>
    <div class="imgdesc">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </div>
    <div class="imginfo">
        <li>第一张图片文字说明</li>
        <li>第二张图片文字说明</li>
        <li>第三张图片文字说明</li>
        <li>第四张图片文字说明</li>
        <li>第五张图片文字说明</li>
    </div>
  </div>

       代码就写一个例子了，其他的应该可以现学现用吧。

按键盘左右方向键可快速浏览上一篇(←)、下一篇(→)