top
元旦节到了,元旦节快乐...

固定当前背景  反馈、咨询、建议、留言等,请点这里[Alt+G]

本栏相关
其他文章
JavaScriptJavaScript当前位置:首页 >>开发技巧>>JavaScript
Jquery焦点图循环切换效果 可控制向左、向右方向滚动
编辑yang 发布时间2014-11-08 浏览量8170 来源本站原创
摘要:imgScroll插件是本站依赖于jQuery所编写的图片循环切换插件,支持渐变及滚动等方式,带有可控制焦点切换、向左向右切换滚动、图片连续无缝循环滚动的效果,本实例将演示图片带焦点、左右控制及滚动/渐变切换效果,引用jquery.imgscroll.min.js后直接调用即可。
<
  • 古剑奇谭-百里屠苏
  • 古剑奇谭-风晴雪
  • 古剑奇谭-欧阳少恭
  • 古剑奇谭-襄玲
  • 古剑奇谭-红玉
  • <
  • 1
  • 2
  • 3
  • 4
  • 5
  • 古剑奇谭2场景
  • 古剑奇谭2-阿阮
  • 古剑奇谭2-夏夷则
  • 古剑奇谭2-闻人羽
  • 古剑奇谭2-乐无异
  • ^
  • 仙剑奇侠传5前传-夏侯瑾轩
  • 仙剑奇侠传5前传-瑕
  • 仙剑奇侠传5前传-姜承
  • 仙剑奇侠传5前传-暮菖兰
  • 仙剑奇侠传5前传-结萝
  • ^
  • 仙剑奇侠传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>

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

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

    
    反馈/咨询/建议/留言(GuestBook)
    您好,怎么称呼您!
    您的姓名:
    上一步:鼠标向上滚动/左方向键(←)
    下一步或完成:鼠标向下滚动/Tab键/右方向键(→)
    如果您有空的话,可以填一下您的相关信息!
    您的电话:
    您的邮箱:
    现在,请填写您想要了解的信息!
    信息内容:
    验证码: 看不清?点图片刷新