HTML5 轮播图

效果图

效果图.png

ACTION

/**
     * 轮播图
     */
    @RequestMapping(value = "toShopping", method = RequestMethod.GET)
    public Object toShopping(String meid) {

        ModelAndView mv = null;
        try {
            List imgList = new ArrayList();
            imgList.add("http://g.hiphotos.baidu.com/baike/c0%3Dbaike60%2C5%2C5%2C60%2C20%3Bt%3Dgif/sign=413a474a35fae6cd18b9a3336eda6441/b17eca8065380cd747320490a144ad345982819b.jpg");
            imgList.add("http://imgsrc.baidu.com/imgad/pic/item/83025aafa40f4bfb6ad1fc5c094f78f0f73618b0.jpg");
            imgList.add("http://f8.topitme.com/8/1a/3f/1110239301cf63f1a8o.jpg");
            imgList.add("http://imgsrc.baidu.com/imgad/pic/item/241f95cad1c8a786de2be62a6d09c93d70cf5094.jpg");
            mv = new ModelAndView("/shopping/commodityDetails");
            mv.addObject("imgList", imgList);
        } catch (Exception e) {
        }
        return mv;
    }

HTML

    

        <#if imgList??&&((imgList?size)>0)>
            <#list imgList as imgs>
                ![](${imgs})
            
        
    
    

        <#if imgList??&&((imgList?size)>0)>
            <#list imgList as imgs>
                <#if imgs_index==0>
                    

                <#else>
                    

                
            
        
    

JS

addEventListener用法：
http://www.runoob.com/jsref/met-element-addeventlistener.html

CSS

body {
    background: rgba(165, 165, 165, 0.16);
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
}

#banner {
    position: relative;
}

#banner_list {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

img {
    width: 100%;
    height: 400px;
    padding: 0;
    margin: 0 auto;
}

ul {
    width: 33%;
    margin-top: 0;
    margin-bottom: 10px;
    position: absolute;
    bottom: 10px;
    margin: auto 33%;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

li {
    margin-right: 20px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: rgba(255, 255, 255, .38);
    border: 1px solid rgba(0, 0, 255, .1);
    cursor: pointer;
}

.on {
    background: #FFF;
}