幻灯片
2018-07-31 本文已影响0人
WANGLIN_HZ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>幻灯片</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/slide.css">
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../js/slide.js"></script>
</head>
<body>
<div class="center_con">
<div class="slide fl">
<ul class="slide_pics">
<li><a href=""><img src="../img/slide01.jpg" alt="幻灯片" /></a></li>
<li><a href=""><img src="../img/slide02.jpg" alt="幻灯片" /></a></li>
<li><a href=""><img src="../img/slide03.jpg" alt="幻灯片" /></a></li>
<li><a href=""><img src="../img/slide04.jpg" alt="幻灯片" /></a></li>
</ul>
<div class="prev"></div>
<div class="next"></div>
<ul class="points">
动态创建小圆点
</ul>
</div>
</div>
</body>
</html>
js
$(function(){
var $li = $('.slide_pics li');
var len = $li.length;//4张
var $prev = $('.prev');//左按钮
var $next = $('.next');//右按钮
var nextli = 0;//将要运动过来的li
var nowli = 0;//当前要离开的li
var timer = null;
//除第一个li，都定位到右侧
$li.not(':first').css({left:600});
//动态创建小圆点
$li.each(function(index){
//创建li
var $sli = $('<li></li>');
//第一个li添加选中样式
if(index == 0){
$sli.addClass('active');
}
//将小圆点的li添加到ul中
$sli.appendTo('.points');
})
$points = $('.points li');
// alert($points.length);//4个小圆点
//小圆点的点击事件
$points.click(function() {
nextli = $(this).index();
//当点击当前张的小圆点时，不做任何操作，防止跳变的Bug
if(nextli == nowli){
return;
}
move();
$(this).addClass('active').siblings().removeClass('active');
});
//左按钮的点击事件
$prev.click(function() {
nextli--;
move();
//改变圆点样式
$points.eq(nextli).addClass('active').siblings().removeClass('active');
});
//右按钮的点击事件
$next.click(function() {
nextli++;
move();
//改变圆点样式
$points.eq(nextli).addClass('active').siblings().removeClass('active');
});
//针对外层的slide做鼠标进入和离开事件，因为鼠标指针有可能进入到左右翻页和小圆点的范围
//mouseenter使鼠标进入子元素也能清除定时器
$('.slide').mouseenter(function() {
clearInterval(timer);
});
$('.slide').mouseleave(function() {
timer = setInterval(autoplay, 3000);
});
//定时器循环自动播放
timer = setInterval(autoplay, 3000);
//自动播放的逻辑与点击下一张是相同的
function autoplay(){
nextli++;
move();
//改变圆点样式
$points.eq(nextli).addClass('active').siblings().removeClass('active');
}
function move(){
//向右走到第一张，再继续走时
if(nextli < 0){
nextli = len - 1;//将要来的是最后一张
nowli = 0;//要离开的是第一张
$li.eq(nextli).css({left:-600});//把最后一张定位到左侧，准备进入
$li.eq(nowli).stop().animate({left: 600});//离开的第一张走到右侧
$li.eq(nextli).stop().animate({left: 0});//马上要进来的最后一张走进来
nowli = nextli;//要离开的赋值为刚进入的最后一张
return;//下边是正常情况的，不执行，直接返回
}
//向左走到最后一张，再继续走时
if(nextli > len - 1){
nextli = 0;//将要来的是第一张
nowli = len - 1;//要离开的是最后一张
$li.eq(nextli).css({left:600});//把第一张定位到右侧，准备进入
$li.eq(nowli).stop().animate({left: -600});//离开的最后一张走到左侧
$li.eq(nextli).stop().animate({left: 0});//马上要进来的第一张走进来
nowli = nextli;//要离开的赋值为刚进入的第一张
return;//下边是正常情况的，不执行，直接返回
}
if(nextli > nowli){
//马上要进来的这张瞬间移动到右边
$li.eq(nextli).css({left:600});
//当前这张离开
$li.eq(nowli).stop().animate({left: -600});
}else{
//马上要进来的这张瞬间移动到左边
$li.eq(nextli).css({left:-600});
//当前这张离开
$li.eq(nowli).stop().animate({left: 600});
}
//马上要进来的这张走到0的位置
$li.eq(nextli).stop().animate({left: 0});
nowli = nextli;
}
})
css
/* 将标签默认的间距设为0 */
body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,input,select,form{
margin: 0;
padding: 0;
}
/* 让h标签继承body内设置的字体大小 */
h1,h2,h3,h4,h5,h6{
font-size: 100%;
}
/* 去掉默认的项目图标 */
ul{
list-style: none;
}
/* 强调文字去掉倾斜 */
em{
font-style: normal;
}
/* 去掉超链接的下划线 */
a{
text-decoration: none;
}
/* 去掉IE下图片做链接的时候产生的边框 */
img{
border: none;
}
/* 清除margin-top塌陷、清除浮动 */
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
/* 兼容IE下清除浮动 */
.clearfix{
zoom: 1;
}
/* 浮动 */
.fl{
float: left;
}
.fr{
float: right;
}
body{
font-family: 'Microsoft Yahei';
color: #666;
font-size: 12px;
}
.center_con{
width: 1300px;
height: 450px;
/*background-color: cyan;*/
margin: 50px auto 0;
}
/* ----------幻灯片样式---------- */
.slide{
width: 1300px;
height: 450px;
position: relative;/* 父容器要设置定位，才能让子元素相对父容器定位 */
overflow:hidden;
}
.slide .slide_pics{
width: 1300px;
height: 450px;
left:0;
top:0;
position:relative;
}
.slide .slide_pics li{
width: 1300px;
height: 450px;
left:0;
top:0;
position:absolute;
}
/* 左右翻页箭头样式 */
.prev,.next{
width: 20px;
height: 24px;
position: absolute;/* 相对父容器进行绝对定位 */
left:10px;
top:188px;
cursor: pointer;/* 鼠标指针成手形 */
background: url(../img/icons.png) 0px -450px no-repeat;
}
.next{
left: 1260px;
background: url(../img/icons.png) 0px -500px no-repeat;
}
/* 小圆点样式 */
.points{
position: absolute;/* 块元素默认宽度为父宽度的100%，定位之后就变成行内块了，它不能继承父的宽度，如果没有设置宽高，就由内容决定，所以也必须给它一个宽度 */
width: 100%;
height: 11px;
/*background-color: red;*/
left: 0;
bottom: 9px;
text-align: center;/* 行内块的居中方式 */
font-size: 0px;/* 去掉行内块间隙，它引起小圆点没有挨紧，并且向下超出高度范围 */
}
.points li{
width: 11px;
height: 11px;
display: inline-block;
background-color: #9f9f9f;
margin: 0 5px;
border-radius: 50%;/* 设置圆角，优雅降级，更好效果请升级浏览器，不兼容IE */
}
.points .active{
background-color: #cecece;
}
