JS之左右焦点图

需求:鼠标放上去显示按钮，鼠标移开隐藏按钮；

点击左边按钮图片向右移动，点击右边按钮图片向左移动

步骤:1.获取数据源和相关元素

2.绑定事件

鼠标放上去显示，鼠标移开隐藏

3.书写驱动程序

点击左侧按钮图片向右移动，利用计数器模拟index值

点击右侧按钮图片向左移动，利用计数器模拟index值

代码示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>滑动焦点图</title>
    <style type="text/css">
    *{
        padding: 0;
        margin:0;
    }
    .box{
        width: 490px;
        height: 170px;
        padding: 2px;
        border:1px solid #ccc;
        margin:200px auto;
    }
    .inner ul{
        list-style:none;
        width: 500%;
        position: absolute;
        left: 0px;
    }
    .inner{
        width: 490px;
        height: 170px;
        overflow: hidden;
        position: relative;
    }
    li{
        float: left;
    }
    .square {
        display: none;
    }

    .square span{
    width: 40px;
    height: 40px;
    background: #000;
    color: #fff;
    cursor: pointer;
    position: absolute;
    top: 40%;
    font: 900 35px/40px "黑体";
    font-weight: bold;
    text-align: center;
    opacity: 0.3;
}
    .square .right{
        right: 5px;
        left: auto;
    }
    </style>
</head>
<body>
<div class="box" id="box">
<div class="inner" id="inner">
    <ul id="ul">
    <li><img src="../images/01.jpg"></li>
    <li><img src="../images/02.jpg"></li>
    <li><img src="../images/03.jpg"></li>
    <li><img src="../images/04.jpg"></li>
    <li><img src="../images/05.jpg"></li>
    </ul>
<div class="square" id="square">
<span class="left"><</span>
<span class="right">></span>
</div><!-- square结束 -->
</div><!-- inner结束 -->
</div><!-- box结束 -->
<script type="text/javascript">
//获取数据源和相关元素
var box = document.getElementById("box");
var ul = document.getElementById("ul");
var inner = document.getElementById("inner");
var imgWidth = inner.offsetWidth;
var boxLeftRight = box.children[0].children[1];
var btnArr = boxLeftRight.children;
//第一步，先显示和隐藏左右盒子
box.onmouseover = function(){
    boxLeftRight.style.display = "block";
}
box.onmouseout = function(){
    boxLeftRight.style.display = "none";
}
//点击右侧按钮向左移动图片,并用计数器模拟index值
var index = 0;
btnArr[1].onclick = function(){
    index++;
    //要限制index值最大不能超过ul.children.length-1，最小不能小于0
    if (index>ul.children.length-1) {
        index = ul.children.length-1;
    }
    animate(ul,-index*imgWidth);

}
//点击左侧按钮向右移动图片,并用计数器模拟index值
btnArr[0].onclick = function(){
    index--;
    if (index<0) {index=0;}
    animate(ul,-index*imgWidth);

}
//动画效果函数(元素，目标值)
function animate(ele,target){
//用定时器先清定时器
    clearInterval(ele.timer);
//移动的步长
    var speed = target>ele.offsetLeft?10:-10;
//设置定时器
    ele.timer=setInterval(function(){
        var val = target - ele.offsetLeft;
            ele.style.left = ele.offsetLeft+speed+"px";
            //如果要停止盒子，就要清除定时器
            if(Math.abs(val)<=Math.abs(speed)){
                ele.style.left = target+"px";
                clearInterval(ele.timer);
        }
    },10);
}


</script>
</body>
</html>

posted @ 2017-12-26 09:32 乖乖乖码阅读(331) 评论(0) 收藏举报

凉白开的你

JS之左右焦点图

公告