superslide仿京东首页幻灯片效果

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

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

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.sucaihuo.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.sucaihuo.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.sucaihuo.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，请点击查看<a href='http://www.sucaihuo.com/js/7.html'>SuperSlide焦点图_Tab切换_图片滚动_无缝滚动 </a>