最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery淡入淡出带缩略图的轮播插件

来源:http://www.erdangjiade.com/ 沐浴春风 2015-12-29 18:46浏览(1502)

eislideshow是一款带缩略图带文字和描述的手机响应式焦点轮播插件,本文演示了左右切换和定时切换两种效果。eislideshow还支持自定义设置时间、滑动效果等、自动播放、缩略图尺寸。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery淡入淡出带缩略图的轮播插件
分类:图片代码 > 缩略图 难易:高级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

轮播图片和分页html代码

<div id="ei-slider" class="ei-slider"> 
    <ul class="ei-slider-large"> 
        <li>
            <img src="images/large/4.jpg" alt="image04" />
            <div class="ei-title">
                <h2>
                    <a href='http://www.erdangjiade.com/js/250.html' target='_blank'>手风琴菜单</a>
                </h2>
                <h3>
                    手风琴
                </h3>
            </div>
        </li>
        <li>
            <img src="images/large/1.jpg" alt="image01" />
            <div class="ei-title">
                <h2>
                    <a href='http://www.erdangjiade.com/js/251.html' target='_blank'>时间轴</a>
                </h2>
                <h3>
                    jqtimelin
                </h3>
            </div>
        </li>
        <li>
            <img src="images/large/5.jpg" alt="image05" />
            <div class="ei-title">
                <h2>
                    <a href='http://www.erdangjiade.com/js/252.html' target='_blank'>Combo Select</a>
                </h2>
                <h3>
                    SELECT搜索插件
                </h3>
            </div>
        </li>

    </ul> 
    <ul class="ei-slider-thumbs"> 
        <li class="ei-slider-element">Current</li> 
        <li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li> 
        <li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li> 
        <li><a href="#">Slide 3</a><img src="images/thumbs/3.jpg" alt="thumb03" /></li> 
    </ul> 
</div>

引入eislideshow响应式轮播插件

<script type="text/javascript" src="js/jquery.eislideshow.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
    $(function() {
        $('#ei-slider').eislideshow({
            easing: 'easeOutExpo',
            titleeasing: 'easeOutExpo',
            titlespeed: 1200
        });
    });
</script>
参数 描述 默认值

eislideshowAPI参数

animation 动画效果。sides || center sides
autoplay 自动播放 false
slideshow_interval 轮播间隔时间,单位毫秒 3000
speed 焦点图滑动动画时间 800
titlespeed 标题滑动动画时间 800
thumbMaxWidth 缩略图最大尺寸 150
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/625.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    01-05 08:38
    ngu137
    不错 学习下啦 !!!@@@#
1 2