幻灯片

作者: Citrus柑橘味气息 | 来源:发表于2018-12-10 19:21 被阅读0次

无缝滚动
<pre id="line1"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style type="text/css"> body,ul,li{margin:0;padding:0}
ul{list-style:none;}
.slide{
width:500px;
height:100px;
border:1px solid #ddd;
margin:20px auto 0;
position:relative;
overflow:hidden;
}
.slide ul{
position:absolute;/相对于slide进行绝对定位/
width:1000px;/比slide宽度大一倍，做这种连续滚动效果的时候，要在后面把内容复制一份/
height:100px;
left:0;/可以改变该值让其动起来/
top:0;
}
.slide ul li{
width:90px;
height:90px;
margin:5px;
background-color:#ccc;
line-height:90px;
text-align: center;
font-size:30px;
float:left;
}
.btns{
width:500px;
height:50px;
margin:10px auto 0;
} </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> [图片上传失败...(image-2906a8-1544440848456)]

ul = $('#slide ul');
var left = 0;
var deraction = 2;//每次滚动的距离

     //内容为两套li
     $ul.html($ul.html() + $ul.html());

     //反复循环定时器，30ms动一下可以看起来比较平滑
     var timer = setInterval(move, 30);

     function move(){
         left -= deraction;
         //当第2套li完全显示出来的时候，整个移回原点重新移动，实现向左连续滚动
         if(left < -500){
             left = 0;
         }
         //瞬间跳回，实现向右连续滚动
         if(left > 0){
             left = -500;
         }

         $ul.css({left: left});
     }

     $('#btn1').click(function() {
         deraction = 2;
     });
     $('#btn2').click(function() {
         deraction = -2;
     });

     $('#slide').mouseover(function() {
         clearInterval(timer);
     });
     $('#slide').mouseout(function() {
         timer = setInterval(move,30);
     });
 }) </script>  </head>  <body>  <div class="btns">  <input type="button" name="" value="向左" id="btn1">  <input type="button" name="" value="向右" id="btn2">  </div>  <div class="slide" id="slide">  <ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  </ul>  </div>  </body>  </html></pre>

效果如图
[图片上传失败...(image-178d03-1535696474925)]

2)幻灯片
html代码

<!DOCTYPE>
<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="images/slide01.jpg" alt="幻灯片" /></a></li>
            <li><a href=""><img src="images/slide02.jpg" alt="幻灯片" /></a></li>
            <li><a href=""><img src="images/slide03.jpg" alt="幻灯片" /></a></li>
            <li><a href=""><img src="images/slide04.jpg" alt="幻灯片" /></a></li>
        </ul>
        <div class="prev"></div>
        <div class="next"></div>
        <ul class="points">
            <!-- 动态创建小圆点
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ul>
    </div>

</div>

</body>
</html>

css代码

body{
font-family: 'Microsoft Yahei';
color: #666;
font-size: 12px;
}

.center_con{
width: 600px;
height: 400px;
/background-color: cyan;/
margin: 50px auto 0;
}

/* ----------幻灯片样式---------- /
.slide{
width: 600px;
height: 400px;
position: relative;/ 父容器要设置定位，才能让子元素相对父容器定位 */
overflow:hidden;
}
.slide .slide_pics{
width: 600px;
height: 400px;
left:0;
top:0;
position:relative;
}
.slide .slide_pics li{
width: 600px;
height: 400px;
left:0;
top:0;
position:absolute;
}

/* 左右翻页箭头样式 /
.prev,.next{
width: 20px;
height: 24px;
position: absolute;/ 相对父容器进行绝对定位 /
left:10px;
top:188px;
cursor: pointer;/ 鼠标指针成手形 */
background: url(../images/icons.png) 0px -450px no-repeat;
}
.next{
left: 570px;
background: url(../images/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;
}

jQuery代码

[图片上传失败...(image-9a3802-1544440848458)]

li = [图片上传失败...(image-c44a8b-1544440848458)]

li.length;//4张
var [图片上传失败...(image-7d8534-1544440848458)]

('.prev');//左按钮
var [图片上传失败...(image-52efe-1544440848458)]

('.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;
}

})

幻灯片

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读