轮播图

作者: 进击的前端 | 来源:发表于2016-10-05 14:49 被阅读37次

无标题文章
轮播图
现金红包
day7_作业
[iOS]定制性强的广告轮播图--SCAdView
普通奖品
轮播图心得
第五周学习内容
三种样式的轮播图
多轮播图的设计

做了一个简易版的轮播图，html结构拿了网上的一个人的例子，然后重新写css和js部分。
大概实现的功能如下

能够实现图片按照时间轮流播放
自动生成页脚的数字标示，并且鼠标点击就可以生成新的轮播图
只要更改.banner_list里面的链接数量，就能生成新的轮播图

对原来的代码的改进之处，话说原来的代码的几个槽点

无一例外用id，id的使用这样样式不能重现，最外侧用id做标示，内部用class复用率高
用setTimeout来做动画，透明度其实用transition就好了

还可以的改进之处

图片懒加载
做成组件

代码清单，有机会做成组件吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #banner{
            height: 286px;
            width:478px;
            overflow:hidden;
            position: relative;
        }
        .banner_list .active{
            z-index: 1;!important;
            opacity: 1;
        }
        .banner_list a{
            position: absolute;
            top:0;
            z-index: 0;
            opacity: 0;
            transition: opacity 1s;
        }
        .list{
            position: absolute;
            z-index: 99;
            display: flex;
            list-style-type: none;
            justify-content: space-between;
            bottom: 10px;
            right: 20px;

        }
        .list li {
            width: 15px;
            height: 15px;
            background-color: beige;
            border-radius: 50%;
            padding-left: 6px;
            padding-bottom: 6px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div id="banner">
    <div class="banner_bg"></div>  <!--标题背景-->
    <a href="#" class="banner_info"></a> <!--标题-->
    <ul class="list"></ul>
    <div class="banner_list">
        <a href="#" target="_blank"><img src="imgs/p1.jpg" title="橡树小屋的blog1" alt="橡树小屋的blog" /></a>
        <a href="#" target="_blank"><img src="imgs/p5.jpg" title="橡树小屋的blog2" alt="橡树小屋的blog" /></a>
        <a href="#" target="_blank"><img src="imgs/p3.jpg" title="橡树小屋的blog3" alt="橡树小屋的blog" /></a>
        <a href="#" target="_blank"><img src="imgs/p4.jpg" title="橡树小屋的blog4" alt="橡树小屋的blog" /></a>
    </div>
</div>
<script>
    var sliceBox = (function(){
        var list_dom = null;    //链接的container
        var container = null;   //轮播图的主题
        var list = null;    //这个dom标示图片的按钮
        var img_list = [];
        var c_list = [];

        var cur_num = 0;
        var pic_num = 0;

        var timer = null;
        var duration = 1000;

        function changePic(){
            img_list[cur_num].classList.remove("active");
            cur_num = (cur_num+1)%pic_num;
            img_list[cur_num].classList.add("active");
            timer = setTimeout(changePic,duration);
        }

        function init(selector,duration_time){
            duration = duration_time;
            container = document.querySelector(selector);
            list_dom = container.querySelector(selector+" .banner_list");
            pic_num = list_dom.childElementCount;
            img_list = Array.prototype.slice.call(list_dom.children);
            img_list[0].classList.add("active");
            timer = setTimeout(changePic,duration);
            addButton(selector);
        }

        function addButton(selector){

            list = document.querySelector(selector+" .list");
            for(var i=0;i<pic_num;i++){
                var li = document.createElement("li");
                c_list.push(li);
                li.textContent = i+1;
                li.onclick = function(e){
                    clearTimeout(timer);
                    img_list[cur_num].classList.remove("active");
                    cur_num = parseInt(e.target.textContent)-1;
                    img_list[cur_num].classList.add("active");
                    timer = setTimeout(changePic,duration);
                };
                list.appendChild(li);
            }
        }

        return {
            init:init
        }
    })();
    sliceBox.init("#banner",2000);

</script>
</body>
</html>