---
# System prepended metadata

title: 前端

---

# 前端
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slide</title>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

    <style>
        #container{
            width: 800px;
            height: 400px;
            background: black;
            /*左右0 上下auto*/
            margin: 0 auto;
            /*溢出 隱藏*/
            /* overflow: hidden; */
            position: relative;
        }
        /* ul */
        .slider-img{
            margin:0;
            padding:0;
            position: absolute;
            /*  */
            display:flex ;
            width: 3200px;
        }
        .slider-img li{
            width: 800px;
            height: 400px;
            list-style: none;
        }
        .slider-img li img{
            width: 100%;
            height:100%;
            /*控制置換元素內容填入大小*/
            object-fit: cover;
        }
        /* 換頁 */
        .pages{
            position: absolute;
            display: flex;
            left:0;
            bottom: 10px;
            width: 100%;
            /* 居中排列 */
            justify-content: center;
            list-style: none;
        }
        .pages li{
            border: 1px solid #fff;
            width:24px;
            height: 10px;
            margin: 0 3px;
            border-radius: 30px;
        }
        /* 左右箭頭 */
        .slide-arror{
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 100%;
            /*  */
            cursor: pointer;
            z-index: 10;
            color: white;
        }
        .right{
            right: 0;
        }
    </style>
</head>
<body>
    <div></div>
    <div id="container">
        <a class="slide-arror" id="sliderPrev"><i class="fas fa-arrow-left"></i></a>
        <a class="slide-arror right" id="sliderNext"><i class="fas fa-arrow-right"></i></a>
        <ul class="slider-img" id="sliderImg">
        <li><img src="../lab11/Images/1.jpg"></li>
        <li><img src="../lab11/Images/2.jpg"></li>
        <li><img src="../lab11/Images/3.jpg"></li>
        <li><img src="../lab11/Images/4.jpg"></li> 
        </ul>
        <ul class="pages" id="pages">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function(){
            let SlideIndex=0;
            let SlideMove=0;
            // $('#sliderImg').css('left','-500px')
            $('#pages li').on('mouseenter',function(){
                //console.log('123')
                //$('#sliderImg').css('left','-800px')
                //.index()
                //let index = $(this).index()
                //console.log(index)
                SlideIndex=$(this).index()
                //let slideMove=0-index*800
                SlideMove=0-SlideIndex*800
                $('#sliderImg').css('left',slideMove)
                //.siblings()
                $(this).css('background','white')
                .siblings().css('background','transparent')
            })
                let slideCount=$('#sliderImg li').length
                $('#sliderNext').on('click',function(){
                //console.log("123")
                //區域變全域
                SlideIndex++;
                if(SlideIndex>=slideCount){
                    SlideIndex=0;
                }
                slideMove=0-SlideIndex*800
                $('#sliderImg').css('left',slideMove)
                })

                $('#sliderPrev').on('click',function(){
                    SlideIndex--;
                if(SlideIndex<=-1){
                    SlideIndex=slideCount-1
                }
                    slideMove=0-SlideIndex*800
                    $('#sliderImg').css('left',slideMove)
                })

                
        })



    </script>
</body>
</html>

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- google search: font awesome cdn -> copy  -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<style>
    #container{
        width: 800px;
        height: 700px;
        background-color: black;
        /* margin 左右為0 上下auto */
        margin: 0 auto;
        /* 溢出 隱藏 */
        /* overflow: hidden; */
        position: relative;
    }
    /* ul */
    .slider-img{
        margin: 0;
        padding: 0;
        position: absolute;
        display: flex;
        width: 3200px;
        list-style: none;
    }
    .slider-img li{
        width: 800px;
        height: 700px;
    }
    .slider-img li img{
        width: 100%;
        height: 100%;
        /* 控制置換元素內容元素大小 */
        object-fit: cover;
    }
    /* 換頁 */
    .pages{
        position: absolute;
        display: flex;
        left: 0;
        bottom: 10px;
        width: 100%;
        /* 置中排列 */
        justify-content: center;
        list-style: none;
    }
    .pages li{
        border:  1px solid blue;
        width: 24px;
        height: 10px;
        margin: 0 3px;
    }
    .slider-arrow{
        position: absolute;
        display: flex;
        /* 排列置中 */
        justify-content: center;
        /*  */
        align-items: center;
        width: 40px;
        height: 100%;
        /* 鼠標移入後會改變的鼠標樣式 */
        cursor: pointer;
        z-index: 10;
    }
    #arrow{
        color: red;
    }
    .right{
        right: 0;
    }
</style>
<body>
    <div id="container">
        <a href="" class="slider-arrow" id="sliderPrev"><i id="arrow" class="fas fa-arrow-alt-left"></i></a>
        <a href="" class="slider-arrow right" id="sliderNext"><i id="arrow" class="fas fa-arrow-alt-right"></i></a>
          <ul class="slider-img" id="Slider-Img">
            <li><img src="../images/1.jpg" ></li>
            <li><img src="../images/2.jpg" ></li>
            <li><img src="../images/3.jpg" ></li>
            <li><img src="../images/4.jpg" ></li>
        </ul>
        <ul class="pages" id="pages">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){

            let slideIndex = 0;
            let slideMove = 0;
            $('#pages li').on('mouseenter',function(){
                // console.log('123')
                // $('#Slider-Img').css('left','-800px')
                // let index = $(this).index()
                slideIndex = $(this).index()
                // let slideMove = 0-index*800
                slideMove = 0-slideIndex*800
                $('#Slider-Img').css('left',slideMove)

                // .siblings()
                $(this).css('background','white').siblings().css('background','transparent')           
                
            })


            let slideCount = $('#Slider-Img li').length
            console.log(slideCount)
            console.log(slideIndex)
            // $('#sliderNext').on('click',function(){
            //     console.log('123')
            // })
            
            
            $('#sliderNext').on('click',function(){
                console.log('123')
                // 區域變全域
                slideIndex++;
                console.log(slideIndex)
                if(slideIndex >= slideCount){
                    slideIndex = 0;
                }
                slideMove = 0-slideIndex*800;
                $('#Slider-Img').css('left',slideMove)
            })
            

            
            // $('#sliderPrev').on('click',function(){
                
            // })



        })
    </script>
</body>
</html>
```

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slide</title>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <style>
        #container{
            width: 800px;
            height: 400px;
            background: black;
            /*左右0 上下auto*/
            margin: 0 auto;
            /*溢出 隱藏*/
            overflow: hidden;
            position: relative;
        }
        .slider-img{
            margin: 0;
            padding: 0;
            position: absolute;
            display: flex;
            width: 3200px;
            list-style: none;
        }
        .slider-img li{
            width: 800px;
            height: 400px;
        }
        .slider-img li img{
            width: 100%;
            height: 100%;
            /*控制置換元素內容填入大小*/
            object-fit: cover;
        }
        /*換頁*/
        .pages{
            position: absolute;
            display: flex;
            left: 0;
            bottom: 10px;
            widows: 100%;
            /*居中排列*/
            justify-content: center;
            list-style: none;
        }
        .pages li{
            border: 1px solid #fff;
            width: 24px;
            height: 10px;
            margin: 0 3px;
            /* border-radius: 50%; */
        }
        /*左右箭頭*/
        .slider-arrow{
            position:absolute;
            display: flex;
            justify-content:center;
            /*高度置中*/
            align-items:center;
            width: 40px;
            height: 100%;
            /*改變滑鼠游標的型狀*/
            cursor: pointer;
            z-index: 10;
            color: #fff;
        }
        .right{
            right: 0;
        }
    </style>
</head>
<body>
    <div id="container">
        <a class="slider-arrow" id="sliderPrev"><i class="fas fa-arrow-left"></i></a>
        <a class="slider-arrow right" id="sliderNext"><i class="fas fa-arrow-right"></i></a>
        <ul class="slider-img" id="sliderImg">
            <li><img src="../image/cat3.jpg"></li>
            <li><img src="../image/cat1.jpg"></li>
            <li><img src="../image/cat2.jpg"></li>
            <li><img src="../image/cat.jpg"></li>
        </ul>
        <ul class="pages" id="pages">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function(){
            let slideIndex=0;
            $('#pages li').on('mouseenter',function(){
                // console.log('123')
                // let index = $(this).index()
                // console.log(index)
                // let slideMove = 0-index*800
                slideIndex = $(this).index()
                slideMove = 0-slideIndex*800
                $('#sliderImg').css('left',slideMove)
                // .siblings() 變透明
                $(this).css('background','white').siblings().css('background','transparent')
            })
            let sldieCount=$('#sliderImg li').length
            $('#sliderNext').on('click',function(){
                // console.log('123')
                //區域變全域
                slideIndex++;
                if(slideIndex>=sldieCount){
                    slideIndex=0;
                }
                slideMove=0-slideIndex*800;
                $('#sliderImg').css('left',slideMove)
            })
            let sldieCcount=$('#sliderImg li').length
            $('#sliderPrev').on('click',function(){
                slideIndex--;
                if(slideIndex<0){
                    slideIndex=3;
                }
                slideMove=0-slideIndex*800;
                $('#sliderImg').css('left',slideMove)
            })
     
        })
    </script>
</body>
</html>
```