效果：

功能：

HTML：

    
    
     
        
      
            
       
                                                        广西南宁低价供应各种地被、绿化苗木等                            
            
       
                                                        广西南宁低价供应各种地被、绿化苗木等                            
            
       
                                                        广西南宁低价供应各种地被、绿化苗木等                            
        
      
    
     
    

CSS：

.zh-carousel{position: relative;width: 100%;height: 246px;}.zh-carousel .zh-img-list{position: relative;z-index: 2;width: 100%;height: 100%;overflow: hidden;}.zh-carousel .zh-img-list ul{height: 100%;}.zh-carousel .zh-img-list li{position: absolute;z-index: 0;left: 0;top: 0;width: 100%;height: 100%;}.zh-carousel .zh-img-list .active{z-index: 1;}.zh-carousel .zh-img-list li a{display: block;position: relative;height: 100%;}.zh-carousel .zh-img-list li img{display: block;width: 100%;height: 100%;opacity: 0;filter:Alpha(opacity=0);-webkit-transition: all .5s ease-out;transition: all .5s ease-out;}.zh-carousel .zh-img-list .active img{opacity: 1;filter:Alpha(opacity=100);}.zh-carousel .zh-img-list li .zh-desc{display: block;position: absolute;z-index: 3;left: 0;bottom: -36px;width: 100%;padding: 10px 15px;box-sizing: border-box;background-color: rgba(0,0,0,0.5);font-size: 14px;color: #fff;-webkit-transition: all .5s ease-out;transition: all .5s ease-out;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.zh-carousel .zh-img-list .active .zh-desc{bottom: 0;}.zh-carousel .zh-status-list{position: absolute;z-index: 4;left: 0;top: 0;width: 100%;padding: 10px 15px;box-sizing: border-box;text-align: right;}.zh-carousel .zh-status-list li{display: inline-block;width: 10px;height: 10px;margin-left: 5px;background-color: #fff;border: 1px solid #ddd;cursor: pointer;}.zh-carousel .zh-status-list .active{background-color: #FFD8C6;border: 1px solid #ED713D;}.zh-carousel .zh-prev,.zh-carousel .zh-next{display: inline-block;position: absolute;z-index: 4;top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);width: 20px;height: 30px;background-color: rgba(0,0,0,0.5);font-family: "SimSun";font-size: 18px;font-weight: bold;color: #fff;text-align: center;line-height: 30px;cursor: pointer;}.zh-carousel .zh-prev:hover,.zh-carousel .zh-next:hover {background-color: rgba(0,0,0,0.75);}.zh-carousel .zh-prev{left: 0;}.zh-carousel .zh-next{right: 0;}

JS：

$.extend({    /*        图片轮播        @param options object (配置项)    */    carousel: function(options) {        var defaults = {            box: '.zh-carousel',               // 盒子            listBox: '.zh-img-list',      // 列表框            stateBox: '.zh-status-list',    // 状态框            prev: '.zh-prev',         // 上一个            next: '.zh-next',         // 下一个            time: 2000                   // 动画时间        }        var conf = $.extend({}, defaults, options);        // 给第一个添加状态        $(conf.box).find(conf.listBox).find('li:first').addClass('active');        // 获取图片的数量        var liNum = $(conf.box).find(conf.listBox).find('li').size();        // 添加状态列表        var statusList = '
    
     ';        for(var i=0; i
     
       liNum - 1) {                index = 0;            }            $(conf.box).find(conf.stateBox).find('li').eq(index).addClass('active').siblings().removeClass('active');            $(conf.box).find(conf.listBox).find('li').eq(index).addClass('active').siblings().removeClass('active');        }        // 自动播放        var autoPlay = setInterval(function() {            switchFunc(index);        }, conf.time);        // 鼠标悬停        $(conf.box).find(conf.listBox).mouseover(function() {            clearInterval(autoPlay);        }).mouseout(function() {            autoPlay = setInterval(function() {                switchFunc(index);            }, conf.time);        });        // 控制点        $(conf.box).find(conf.stateBox).find('li').mouseover(function() {            clearInterval(autoPlay);        }).mouseout(function() {            autoPlay = setInterval(function() {                switchFunc(index);            }, conf.time);        }).click(function() {            $(this).addClass('active').siblings().removeClass('active');            $(conf.box).find(conf.listBox).find('li').eq($(this).index()).addClass('active').siblings().removeClass('active');            index = $(this).index();        });        // 点击左箭头        $(conf.box).find(conf.prev).mouseover(function() {            clearInterval(autoPlay);        }).mouseout(function() {            autoPlay = setInterval(function() {                switchFunc(index);            }, conf.time);        }).click(function() {            index--;            if(index < 0) {                index = liNum - 1;            }            $(conf.box).find(conf.stateBox).find('li').eq(index).addClass('active').siblings().removeClass('active');            $(conf.box).find(conf.listBox).find('li').eq(index).addClass('active').siblings().removeClass('active');        });        // 点击右箭头        $(conf.box).find(conf.next).mouseover(function() {            clearInterval(autoPlay);        }).mouseout(function() {            autoPlay = setInterval(function() {                switchFunc(index);            }, conf.time);        }).click(function() {            index++;            if(index > liNum-1) {                index = 0;            }            $(conf.box).find(conf.stateBox).find('li').eq(index).addClass('active').siblings().removeClass('active');            $(conf.box).find(conf.listBox).find('li').eq(index).addClass('active').siblings().removeClass('active');        });    }});// 调用$.carousel();