web前端入門到實戰：簡單的圖片輪播

效果：

功能：
1、左右箭頭切換
2、狀態控制點切換
3、滑鼠懸念
4、自動輪播

HTML：

<div class="zh-carousel">
    <div class="zh-img-list">
        <ul>
            <li>
                <a href="###">
                    <img src="images/img-demo02.jpg" alt="">
                    <span class="zh-desc">廣西南寧低價供應各種地被、綠化苗木等</span>
                </a>
            </li>
            <li>
                <a href="###">
                    <img src="images/img-demo02-1.jpg" alt="">
                    <span class="zh-desc">廣西南寧低價供應各種地被、綠化苗木等</span>
                </a>
            </li>
            <li>
                <a href="###">
                    <img src="images/img-demo02-2.jpg" alt="">
                    <span class="zh-desc">廣西南寧低價供應各種地被、綠化苗木等</span>
                </a>
            </li>
        </ul>
    </div>
</div>
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端專案實戰教學視訊，PDF）

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;}
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端專案實戰教學視訊，PDF）

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 = '<ul class="zh-status-list">';
        for(var i=0; i<liNum; i++) {
            if(i == 0) {
                statusList += '<li class="active"></li>';
            } else {
                statusList += '<li></li>';
            }
        }
        statusList += '</ul>';
        $(conf.box).append(statusList);
        // 新增左右按鈕
        var btns = '<span class="zh-prev" type="button"><</span><span class="zh-next" type="button">></span>';
        $(conf.box).append(btns);
        // 索引
        var index = 0;
        // 切換函式
        function switchFunc(curIndex) {
            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');
        }
        // 自動播放
        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();

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2673210/，如需轉載，請註明出處，否則將追究法律責任。