H5 幻灯片简单制作（以DHCbanner为例）

代码如下：

<div class="bannerbox">
        <div id="SKITTER clearfix" class="SKITTER">
            <div class="banner-in clearfix"> 
                <ul class="clearfix imgList"> 
                    <li ><a href="#" target="_blank"></a></li>
                    <li ><a href="#" target="_blank"></a></li>
                    <li ><a href="#" target="_blank"></a></li>
                    <li ><a href="#" target="_blank"></a></li>
                    <li ><a href="#" target="_blank"></a></li>
                </ul>
            </div>   
            <ol class="buttons">
                <!-- <li class="current"><a href="#"></a></li>
                <li class=""><a href="#"></a></li>
                <li class=""><a href="#"></a></li>
                <li class=""><a href="#"></a></li>
                <li class=""><a href="#"></a></li> 此处需要动态添加所以注释掉-->
            </ol>
            <div class="margin-box">
                <div class="bannerBTN east "></div>
                <div class="bannerBTN west"></div>
            </div>
        </div>
    </div>

css:

.bannerbox{
    /*margin: 100px 0px;*/
    height:620px;
}
.SKITTER {
    position: relative;
    overflow: hidden;
}
.banner-in {
    height: 620px;
    overflow: hidden;
}
.imgList{
    position: relative;
}
.imgList li{
    width: 100%;
    left:0;
    top:0;
    position:absolute;
    height: 620px;

}
.imgList li:nth-child(1){
    background: url(../img/bannerlist/banner1.jpg) no-repeat scroll center center / cover;

}
.imgList li:nth-child(2){
    background: url(../img/bannerlist/banner2.jpg) no-repeat scroll center center / cover;

}
.imgList li:nth-child(3){
    background: url(../img/bannerlist/banner3.jpg) no-repeat scroll center center / cover;

}
.imgList li:nth-child(4){
    background: url(../img/bannerlist/banner4.jpg) no-repeat scroll center center / cover;

}
.imgList li:nth-child(5){
    background: url(../img/bannerlist/banner5.jpg) no-repeat scroll center center / cover;

}
.buttons {
    height: 10px;
    position: absolute;
    left: 50%;
    top:575px;
    border-bottom: 35px;
    margin-left: -220px;
    z-index: 1;
}
.buttons li{
    cursor: pointer;
}
.SKITTER .buttons li {
    display: inline-block;
    width: 70px;
    height: 5px;
    float: left;
    margin-right: 5px;
    background: white;
    opacity: 0.5;
    z-index: 1;
}
.SKITTER .buttons li.current{
    filter: alpha(opacity=50);
    opacity: 1;
}
.margin-box{
    width: 94%;
    position: absolute;
    left: 4%;
    top: 50px;
}
.bannerBTN {
    width: 32px;
    height: 50px;
    margin-top: 210px;
}
.east {
    float: left;
    background: url(../img/to_froward.png) no-repeat;
    cursor: pointer;
}
.west {
    float: right;
    background: url(../img/to_next.png) no-repeat;
    cursor: pointer;
}

jquery:

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
        // 首页置顶菜单
        $(function(){
            var $li = $('.imgList li');
            var len = $li.length;//5张
            var $prev = $('.east');//左按钮
            var $next = $('.west');//右按钮
            var nextli = 0;//将要运动过来的li
            var nowli = 0;//当前要离开的li
            var timer = null;
            var hei=$(window).width() //获取当前文档宽度
            //除第一个li，都定位到右侧
            $li.not(':first').css({left:hei});
            //动态创建切换条
            $li.each(function(index){
                //创建li
                var $sli = $('<li></li>');
                //第一个li添加选中样式
                if(index == 0){
                    $sli.addClass('current');
                }
                //将切换条的li添加到ul中
                $sli.appendTo('.buttons');
            })

            $buttons = $('.buttons li');
            // alert($buttons.length);//5个切换条

            //切换条的点击事件
            $buttons.click(function() {
                nextli = $(this).index();
                //当点击当前张的切换条时，不做任何操作，防止跳变的Bug
                if(nextli == nowli){
                    return;
                }
                move();
                $(this).addClass('current').siblings().removeClass('current');
            });

            //左按钮的点击事件
            $prev.click(function() {
                nextli--;
                move();
                //改变切换条样式
                $buttons.eq(nextli).addClass('current').siblings().removeClass('current');
            });

            //右按钮的点击事件
            $next.click(function() {
                nextli++;
                move();
                //改变切换条样式
                $buttons.eq(nextli).addClass('current').siblings().removeClass('current');
            });

            //针对外层的bannerbox做鼠标进入和离开事件，因为鼠标指针有可能进入到左右翻页和切换条的范围
            //mouseenter使鼠标进入子元素也能清除定时器
            $('.bannerbox').mouseenter(function() {
                clearInterval(timer);
            });
            $('.bannerbox').mouseleave(function() {
                timer = setInterval(autoplay, 3000);
            });

            //定时器循环自动播放
            timer = setInterval(autoplay, 3000);

            //自动播放的逻辑与点击下一张是相同的
            function autoplay(){
                nextli++;
                move();
                //改变切换条样式
                $buttons.eq(nextli).addClass('current').siblings().removeClass('current');
            }

            function move(){
                //向右走到第一张，再继续走时
                if(nextli < 0){
                    nextli = len - 1;//将要来的是最后一张
                    nowli = 0;//要离开的是第一张
                    $li.eq(nextli).css({left:-$(document).width()});//把最后一张定位到左侧，准备进入
                    $li.eq(nowli).stop().animate({left: $(document).width()});//离开的第一张走到右侧
                    $li.eq(nextli).stop().animate({left: 0});//马上要进来的最后一张走进来
                    nowli = nextli;//要离开的赋值为刚进入的最后一张
                    return;//下边是正常情况的，不执行，直接返回
                }
                //向左走到最后一张，再继续走时
                if(nextli > len - 1){
                    nextli = 0;//将要来的是第一张
                    nowli = len - 1;//要离开的是最后一张
                    $li.eq(nextli).css({left:$(document).width()});//把第一张定位到右侧，准备进入
                    $li.eq(nowli).stop().animate({left: -$(document).width()});//离开的最后一张走到左侧
                    $li.eq(nextli).stop().animate({left: 0});//马上要进来的第一张走进来
                    nowli = nextli;//要离开的赋值为刚进入的第一张
                    return;//下边是正常情况的，不执行，直接返回
                }
                
                if(nextli > nowli){
                    //马上要进来的这张瞬间移动到右边
                    $li.eq(nextli).css({left:$(document).width()});
                    //当前这张离开
                    $li.eq(nowli).stop().animate({left: -$(document).width()});
                }else{
                    //马上要进来的这张瞬间移动到左边
                    $li.eq(nextli).css({left:-$(document).width()});
                    //当前这张离开
                    $li.eq(nowli).stop().animate({left: $(document).width()});
                }
                //马上要进来的这张走到0的位置
                $li.eq(nextli).stop().animate({left: 0});
                nowli = nextli;
            }
        })

效果如下：


DHC中国官方网站 100 日本原装进口化妆品品牌.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容