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;
}
