1.例子：幻燈片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PPT</title>
<script type="text/javascript" src="../jQuery庫/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS3/PPT.css">
<script type="text/javascript">
$(function(){
var $stop = $('.ppt_con') /*鼠標移動停止或運動變量*/
var $li = $('.pages li'); /*獲取ul的li*/
var $len = $li.length; /*li個數*/
/*alert($len);*/
var $points = $('.points'); /*小圓點ul*/
var nowli = 0; /*當前頁面數*/
var leaveli = 0; /*離開頁面數*/
var $prev = $('.prev'); /*獲取向前按鈕*/
var $next = $('.next'); /*獲取向後按鈕*/
var timer = null; /*定時器變量*/
var ismove = false; /*阻止暴力操作變量*/
/*動態添加li,根據圖片數量添加小圓點*/
for(var i=0;i<$len;i++){
var $newli = $('<li>');
if(i==0){
$newli.addClass('active');
}
$newli.appendTo($points);
}
/*not: 除了...,除了第一張其他靠右*/
$li.not(':first').css({'left':1366})
/*獲取小圓點li*/
var $pli = $('.points li');
/*點擊小圓點函數，*/
$pli.click(function(){
/*定位當前圖片*/
nowli = $(this).index();
/*點擊當前小圓點，返回函數*/
if(nowli == leaveli){
return;
}
/*調用move函數*/
move();
/*給點擊的小圓點樣式，同輩的去除樣式*/
$(this).addClass('active').siblings().removeClass('active');
})
/*向前按鈕函數*/
$prev.click(function(){
/*防止暴力操作，開始是false跳過，賦予true卡住*/
if(ismove){
return;
}
ismove = true;
/*同上*/
nowli--;
move();
$pli.eq(nowli).addClass('active').siblings().removeClass('active');
})
/*向後按鈕函數*/
$next.click(function(){
if(ismove){
return;
}
ismove = true;
nowli++;
move();
$pli.eq(nowli).addClass('active').siblings().removeClass('active');
})
/*定時器，限時操作*/
timer = setInterval(autoplay,3000)
/*鼠標移進停止*/
$stop.mouseenter(function(){
clearInterval(timer);
})
/*鼠標移出繼續*/
$stop.mouseleave(function(){
timer = setInterval(autoplay,3000);
})
/*播放函數*/
function autoplay(){
nowli++;
move();
$pli.eq(nowli).addClass('active').siblings().removeClass('active');
}
/*移動函數*/
function move(){
/*極端情況一：第一與第四的循環*/
if(nowli<0){
nowli = $len-1;
leaveli = 0;
$li.eq(nowli).css({'left':-1366});
$li.eq(nowli).animate({'left':0});
$li.eq(leaveli).animate({'left':1366},function(){
/*移動後，防暴力變量置false*/
ismove = false;
});
leaveli = nowli;
return;
}
/*極端情況二：第四與第一的循環*/
if(nowli>$len-1){
nowli = 0;
leaveli = $len-1;
$li.eq(nowli).css({'left':1366});
$li.eq(nowli).animate({'left':0});
$li.eq(leaveli).animate({'left':-1366},function(){
ismove = false;
});
leaveli = nowli;
return;
}
/*向前點擊小圓點*/
if(nowli>leaveli){
$li.eq(nowli).css({'left':1366});
$li.eq(leaveli).animate({'left':-1366});
}
/*向後點擊小圓點*/
else{
$li.eq(nowli).css({'left':-1366});
$li.eq(leaveli).animate({'left':1366});
}
$li.eq(nowli).animate({'left':0},function(){
ismove = false;
});
leaveli = nowli;
}
})
</script></head>
<body>
<div class="ppt_con">
<ul class="pages">
<li><a href="#"><img src="../images/12.png" alt="微笑"></a></li>
<li><a href="#"><img src="../images/9.png" alt="驚訝"></a></li>
<li><a href="#"><img src="../images/10.png" alt="回眸"></a></li>
<li><a href="#"><img src="../images/11.png" alt="小提琴"></a></li>
</ul>
<div class="prev">←</div>
<div class="next">→</div>
<ul class="points"></ul>
</div></body>
</html>
CSS文件：
/ CSS Document /
body,ul{
margin: 0;
padding: 0;}
/父級div/
.ppt_con{
width: 1366px;
height: 768px;
position: relative;
overflow: hidden;
}
/圖片ul/
.pages{
width: 1366px;
list-style: none;
}
/圖片li/
.pages li{
position: absolute;
left: 0;
top: 0;
}
/向前div/
.prev{
width: 30px;
height: 50px;
background-color: #9C9B9B;;
/float: left;/
position: fixed;
left: 20px;
top: 50%;
margin-top: -25px;
opacity: 0.3;
filter: alpha(opacity=30);
font-size: 30px;
text-align: left;
line-height: 50px;
color: #000000;
cursor: pointer;}
.prev:hover{
opacity: 0.8;
}
/向後div/
.next{
width: 30px;
height: 50px;
background-color: #9C9B9B;;
/float: left;/
position: fixed;
right: 20px;
top: 50%;
margin-top: -25px;
opacity: 0.3;
filter: alpha(opacity=30);
font-size: 30px;
text-align: left;
line-height: 50px;
color: #000000;
cursor: pointer;}
.next:hover{
opacity: 0.8;
}
/小圓點ul/
.points{
width: 100px;
height: 20px;
position: fixed;
bottom: 20px;
left: 50%;
margin-left: -50px;
list-style: none;
}
/小圓點li/
.points li{
width: 13px;
height: 13px;
border-radius: 50%;
border: 1px solid #666;
margin: 0 5px;
background-color: #555555;
float: left;
}
/jQuery操作小圓點樣式/
.active{
opacity: 0.3;
}
