superslide仿京东首页幻灯片效果

收藏

今天介绍用superslide简单完成京东首页幻灯片效果。

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

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

<div class="slider" id="banner">
    <ul class="slider-main" style="position: relative;" id="index-banner">
        <li class="slider-panel slider-panel-selected">
            <a href="http://www.erdangjiade.com/js" target="_blank">
                <img width="730" height="454" src="http://img20.360buyimg.com/da/jfs/t1291/276/611199442/66449/1f94042/55910b69N157d70d8.jpg"
                alt="" />
            </a>
        </li>
        <li class="slider-panel">
            <a href="http://www.erdangjiade.com/js" target="_blank">
                <img width="730" height="454" src="http://img11.360buyimg.com/da/jfs/t1384/142/417829869/95563/3d505b59/5582959dN74e0bf48.jpg"
                alt="" />
            </a>
        </li>
        <li class="slider-panel">
            <a href="http://www.erdangjiade.com/js" target="_blank">
                <img width="730" height="454" src="http://img12.360buyimg.com/da/jfs/t874/53/1211664391/94667/b7d11dad/558cf9ceNcf9699a9.jpg"
                alt="" />
            </a>
        </li>
 </ul>
</div>

引入jQuery.js和SuperSlide插件

<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>

调用SuperSlide插件

$(function() {
    $("#banner").slide({
        titCell: "#banner-page",
        mainCell: "#index-banner",
        effect: "left",
        scroll: 1,
        vis: 1,
        autoPlay: true,
        prevCell: "#banner-page-left",
        nextCell: "#banner-page-right",
        autoPage: "<li class='slider-item'> $ </li>",
        interTime: 5000
    });
    $("#banner").hover(function() {
        $(this).find(".slider-page").show();
    },
    function() {
        $(this).find(".slider-page").hide();
    })
})

superslide相关API，请点击查看SuperSlide焦点图_Tab切换_图片滚动_无缝滚动