superslide仿京东首页幻灯片效果_图片代码_图片轮播_焦点图_幻灯片

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

淘建站为您提供更多_图片代码_图片轮播_焦点图_幻灯片，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 58 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

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

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.sucaiq.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.sucaiq.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.sucaiq.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切换_图片滚动_无缝滚动