layerGlide标题和图片焦点轮播图插件

layerGlide是一款自定义功能强大的图片轮播插件，支持是否自动滚动、滚动速度、和滚动方向等。

分类：图片代码 > 图片轮播难易：初级

查看演示下载资源下载积分： 20 积分

焦点图份三块：图片、数字按钮和标题

<div id="slideBox">
    <ul id="show_pic" style="left:0px">
        <li><a href='http://www.sucaihuo.com/js/509.html' target='_blank'> <img  alt="jQuery手机字体和图片自适应" height="300" width="475" src="images/1.jpg" /> </a></li>
        <li><a href='http://www.sucaihuo.com/js/510.html' target='_blank'> <img  alt="Thinkphp更改配置文件config.php" height="300" width="475" src="images/2.jpg" /> </a></li>
        <li><a href='http://www.sucaihuo.com/js/511.html' target='_blank'> <img  alt="手机版通用响应式顶部" height="300" width="475" src="images/3.jpg" /> </a></li>
        <li><a href='http://www.sucaihuo.com/js/512.html' target='_blank'> <img  alt="PHP素材火签到演示与下载" height="300" width="475" src="images/4.jpg" /> </a></li>
        <li><a href='http://www.sucaihuo.com/js/513.html' target='_blank'> <img  alt="PHP+jQuery+Ajax仿淘宝多上传按钮单文件上传" height="300" width="475" src="images/5.jpg" /> </a></li>
        <li><a href='http://www.sucaihuo.com/js/514.html' target='_blank'> <img  alt="mobiscroll破解版手机日期时间插件" height="300" width="475" src="images/6.jpg" /> </a></li>

    </ul>
    <div id="slideText"></div>
    <ul id="iconBall">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <ul id="textBall">
        <li class="active"><a href='http://www.sucaihuo.com/js/766.html' target='_blank'> jquery鼠标悬浮翻转缩略图</a></li>
        <li><a href='http://www.sucaihuo.com/js/767.html' target='_blank'> bubbleup.js图标冒泡插件</a></li>
        <li><a href='http://www.sucaihuo.com/js/768.html' target='_blank'> jquery.tree.js树形导航菜单插件</a></li>
        <li><a href='http://www.sucaihuo.com/js/769.html' target='_blank'> hScrollPane美化滚动条插件并带焦点图切换</a></li>
        <li><a href='http://www.sucaihuo.com/js/770.html' target='_blank'> jQuery鼠标不停滑动手风琴bug修复</a></li>
        <li><a href='http://www.sucaihuo.com/js/771.html' target='_blank'> jQuery悬浮菜单动画提示</a></li>
    </ul>
</div>

调用layerGlide图片轮播插件

glide.layerGlide(
        true, //设置是否自动滚动
        'iconBall', //对应索引按钮
        'textBall', //标题内容文本
        'show_pic', //焦点图片容器
        475, //设置滚动图片位移像素
        2, //设置滚动时间2秒 
        0.1, //设置过渡滚动速度
        'left'		  //设置滚动方向“向左”
        );