# 前端
<!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>
```
Sign in with Wallet
Connect another wallet