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

收藏

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

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

查看演示

加我微信，拉你进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>