效果图

效果图.png

ACTION

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

        ModelAndView mv = null;
        try {
            List<String> imgList = new ArrayList<String>();
            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

<div id="banner">
    <div id="banner_list">
        <#if imgList??&&((imgList?size)>0)>
            <#list imgList as imgs>
                <a href="javascript:void();" target="_blank">![](${imgs})</a>
            </#list>
        </#if>
    </div>
    <ul id="ul">
        <#if imgList??&&((imgList?size)>0)>
            <#list imgList as imgs>
                <#if imgs_index==0>
                    <li class="on"></li>
                <#else>
                    <li></li>
                </#if>
            </#list>
        </#if>
    </ul>
</div>

JS

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

<script type="text/javascript">
    var t = n = 0,
        count;
    
    $(document).ready(function() {
        // 获取图片标签长度
        count = $("#banner_list a").length;
    
        // 不是当前显示的图片隐藏
        $("#banner_list a:not(:first-child)").hide();
        
        // 点击切换图片
        $("#banner li").click(function(e) {
            
            var target = e.target;    //获取对应目标元素
            var children = $("#ul").children();    //获取ul里面的所有li元素集合
            var index = 0;
            for(i = 0;i<children.length;i++){

                if(target == children[i]) { //对比目标元素和li集合元素
                    index = i;   //输出目标元素的下标
                    break;
                }
            }
            
            n = index;
            if (index >= count) return;
            
            moveNext(index);
        });
        
        // 轮播间隔时间
        t = setInterval("showAuto()", 10000);
        
        // 切换图片
        function moveNext(val){
            // 淡入淡出效果
            $("#banner_list a").filter(":visible").fadeOut(0).parent().children().eq(val).fadeIn(500);
            // 响应点击
            $("#ul").children().eq(val).toggleClass("on");
            // 切换按钮的时候让上一个按钮回归原来的样式
            $("#ul").children().eq(val).siblings().removeAttr("class");
        }
        
        //手机触摸效果  
        var startX,endX,moveX; 
        
        function touchStart(event){  
            var touch = event.touches[0];  
            startX = touch.pageX;  
        }  
        function touchMove(event){  
            var touch = event.touches[0];  
            endX = touch.pageX;  
        }  
        function touchEnd(event){  
            moveX = startX - endX;  
            if(moveX>50){  
                if (n >= (count-1)){
                    n = 0;
                    moveNext(n);  
                }else{
                    ++n;
                    moveNext(n);  
                }
            }else if(moveX<-50){  
                if (n <= 0){
                    n = count-1;
                    moveNext(n);  
                }else{
                    --n;
                    moveNext(n);  
                }
            } 
        }
        document.getElementById("banner_list").addEventListener("touchstart",touchStart,false); 
        document.getElementById("banner_list").addEventListener("touchmove",touchMove,false);  
        document.getElementById("banner_list").addEventListener("touchend",touchEnd,false); 
    });
    
    $("#banner").hover(
        function() {
            clearInterval(t)
        },
        function() {
            t = setInterval("showAuto()", 10000);
        }
    );
    
    // 自动轮播
    function showAuto() {
        n = n >= count ? 0 : ++n;
        $("#banner li").eq(n).trigger('click');
    }
</script>

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;
}