请你用html写一个排序预览软件要求支持下一步上一步以及解释与生动动画。支持以下排序：冒泡排序Bubble Sort插入排序Insertion Sort希尔排序Shell Sort选择排序Selection Sort快速排序Quick Sort归并排序Merge Sort堆排序Heap Sort计数排序Counting Sort桶排序Bucket Sort基数排序Radix Sort

以下是一个简单的排序预览软件的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>排序预览软件</title>
    <style>
        #sort-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>排序预览软件</h1>
    <div id="sort-container"></div>
    <button onclick="previousStep()">上一步</button>
    <button onclick="nextStep()">下一步</button>
    <button onclick="explain()">解释</button>
    
    <script>
        // 排序算法的实现
        // 冒泡排序
        function bubbleSort(arr) {
            // TODO: 实现冒泡排序算法
        }
        
        // 插入排序
        function insertionSort(arr) {
            // TODO: 实现插入排序算法
        }
        
        // 希尔排序
        function shellSort(arr) {
            // TODO: 实现希尔排序算法
        }
        
        // 选择排序
        function selectionSort(arr) {
            // TODO: 实现选择排序算法
        }
        
        // 快速排序
        function quickSort(arr) {
            // TODO: 实现快速排序算法
        }
        
        // 归并排序
        function mergeSort(arr) {
            // TODO: 实现归并排序算法
        }
        
        // 堆排序
        function heapSort(arr) {
            // TODO: 实现堆排序算法
        }
        
        // 计数排序
        function countingSort(arr) {
            // TODO: 实现计数排序算法
        }
        
        // 桶排序
        function bucketSort(arr) {
            // TODO: 实现桶排序算法
        }
        
        // 基数排序
        function radixSort(arr) {
            // TODO: 实现基数排序算法
        }
        
        // 排序预览软件
        var sortPreview = {
            steps: [],
            currentStep: 0,
            container: null,
            
            // 初始化
            init: function() {
                this.container = document.getElementById('sort-container');
                // TODO: 初始化排序步骤
            },
            
            // 显示当前步骤
            showStep: function() {
                this.container.innerHTML = this.steps[this.currentStep];
            },
            
            // 下一步
            nextStep: function() {
                if (this.currentStep < this.steps.length - 1) {
                    this.currentStep++;
                    this.showStep();
                }
            },
            
            // 上一步
            previousStep: function() {
                if (this.currentStep > 0) {
                    this.currentStep--;
                    this.showStep();
                }
            },
            
            // 解释
            explain: function() {
                // TODO: 实现解释功能
            }
        };
        
        // 初始化排序预览软件
        sortPreview.init();
        
        // 下一步按钮的点击事件处理函数
        function nextStep() {
            sortPreview.nextStep();
        }
        
        // 上一步按钮的点击事件处理函数
        function previousStep() {
            sortPreview.previousStep();
        }
        
        // 解释按钮的点击事件处理函数
        function explain() {
            sortPreview.explain();
        }
    </script>
</body>
</html>

请注意，上面的代码中只是提供了一个框架，具体的排序算法的实现需要根据实际需求进行编写。在初始化排序预览软件时，需要将每个排序算法的步骤添加到sortPreview.steps数组中，并在showStep()方法中显示当前步骤的动画效果。在explain()方法中，可以根据需要添加对排序算法的解释说明

请你用html写一个排序预览软件要求支持下一步上一步以及解释与生动动画。支持以下排序：冒泡排序Bubble Sort插入排序Insertion Sort希尔排序Shell Sort选择排序Selection Sort快速排序Quick Sort归并排序Merge Sort堆排序Heap Sort计数排序Counting Sort桶排序Bucket Sort基数排序Radix Sort