幻灯片
原理：如果要显示的图片在当前图片的后面就将其放在显示框盒子的右边再让其往左滑动，同理，如果是在当前图片的前面，就将其放在盒子左边，再让其往右滑动。
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/幻灯片.css">
<script type="text/javascript" src="/js/jquery-1.9.0.js"></script>
<script>
$(function(){
var $box = $('#box');
var $ul_list = $('ul');
var $li_list = $('ul li');
var $len = $li_list.length;
var $left = $('.left_move');
var $right = $('.right_move');
$point_list = $('.point');
var $nowli = 0;
var $preli = 0;
var $clickmore = false;//设置一个布尔量，通过切换布尔量防止暴力切换图片操作
var timer = null;
var move_num = 400;
//添加小点
$sTr = '<span>';
for(var i=0;i<$len;i++){
$point_list.append($sTr);
}
var $points = $('.point span');
$points.eq(0).addClass('active');
//小点点击事件
$points.click(function(){
$nowli = $(this).index();
if($nowli == $preli){
return;
}
add_active($(this));
if($clickmore){
return;
}
move();
})
//向左点击事件
$left.click(function(){
document.title = $clickmore;
if($clickmore){
return;
}
$clickmore = true;
$nowli++;
move();
add_active($points.eq($nowli));
})
//向右点击事件
$right.click(function(){
if($clickmore){
return;
}
$clickmore = true;
$nowli--;
move();
add_active($points.eq($nowli));
})
//循环切图播放
timer = setInterval(autoplay,1000);//注意导入的函数不要加括号，否则会立马执行。
//鼠标移到图上、圆点上或方向标上，停止自动播放
$box.mouseover(function(){
clearInterval(timer);
});
//鼠标移出图上、圆点上或方向标，开始自动播放
$box.mouseout(function(){
timer = setInterval(autoplay,1000);
})
//圆点被选中时执行的函数
function add_active(event){
event.addClass('active').siblings().removeClass('active');
}
//图片切换时的移动函数
function move(){
if($nowli>$len-1){
$nowli = 0;
$preli = $len-1;
move_sytle(move_num,-move_num);
return;
}
else if($nowli<0){
$nowli =$len-1 ;
$preli = 0;
move_sytle(-move_num,move_num);
return;
}
if($nowli<$preli ){
//由于点击的点的索引值小于之前的，则先将点击索引值对应的照片快速拉到左边再运行动画
move_sytle(-move_num,move_num);
}
else{
move_sytle(move_num,-move_num);
}
}
//移动设置方式函数
function move_sytle(num1,num2){
$li_list.eq($nowli).css({'left':num1});
$li_list.eq($nowli).animate({'left':0});
$li_list.eq($preli).animate({'left':num2},function(){
$clickmore = false;
});
$preli = $nowli;
}
//自动播放设置
function autoplay(){
$nowli++;
move();
add_active($points.eq($nowli));
}
})
</script>
</head>
<body>
<h1>最美女神jisoo</h1>
<div id="box">
<ul>
<li><a href="javascript:;"><img src="./img/img1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/img2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/img3.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/img4.jpg" alt=""></a></li>
</ul>
<div class="point">
</div>
<span class="iconfont icon-xiangzuo1 left_move"></span>
<span class="iconfont icon-xiangyou1 right_move"></span>
</div>
</body>
</html>
CSS代码
@import '//at.alicdn.com/t/font_3233091_vbj8k8jhtk.css';
h1{
text-align: center;
color: pink;
}
#box{
position: fixed;
overflow: hidden;
width: 400px;
height: 500px;
box-sizing: content-box;
border: 20px solid pink;
border-radius: 5px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.iconfont{
color: pink;
font-size: 50px;
font-weight: bold;
}
.icon-xiangyou1{
display: inline-block;
position: fixed;
top: 290px;
right: 430px;
}
.icon-xiangzuo1{
position: fixed;
top: 290px;
left: 430px;
}
ul{
list-style: none;
position: absolute;
height: 500px;
padding: 0;
margin: 0;
}
li{
position: absolute;
left: 0;
}
li:nth-child(n+2){
left: 400px;
}
li img{
width: 400px;
}
.point{
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
}
.point span{
display: inline-block;
width: 16px;
height: 16px;
margin:0 5px;
background-color: transparent;
border: 1px solid #ddd;
border-radius: 50%;
}
.point .active{
background-color: #ccc;
}
效果演示
总结
1. 重点是要弄明白一个项目的原理，才好着手写代码。
2. var $clickmore = false;//设置一个布尔量，通过切换布尔量防止暴力切换图片操作，这是一部关键操作，用于解决快速点击切换图片导致的bug
3. timer = setInterval(autoplay,1000);//注意导入的函数不要加括号，否则会立马执行。
4. 移动方式的设置是着手于原理所设置的巧妙方式，可以细细斟酌。
5. 最后，感谢智秀对我学习事业所作出的贡献，哈哈哈哈哈！