箭头切换问题。。-慕课网

首页课程实战体系课手记专栏慕课教程

箭头切换问题。。

来源：3-1 箭头切换

橙子lovesun

2015-12-06 18:01

想实现按下箭头图片切换。代码如下，实际却未实现。请大神看看问题出在哪？

<div>有关图片的定义：

</div>

在<div>中定义一对左右箭头代码如下:

</div>

</div>

在CSS中设置样式代码如下：

.arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}

.arrow:hover { background-color: RGBA(0,0,0,.7);}

#container:hover .arrow { display: block;}

#prev { left: 20px;}

#next { right: 20px;}

在<script>中定义当按下箭头切换到下张图片：

next.onclick=function(){

animate(-600);

}

prev.onclick=function(){

animate(600);

}

function animate(offset){

list.style.left=parseInt(list.style.left)+offset+'px';

}

写回答关注

1回答

李晓健: 2015-12-06 19:07:49

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
        .arrow {
            cursor: pointer;
            display: inline-block;
            line-height: 39px;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            width: 40px;
            height: 40px;
            position: absolute;
            z-index: 2;
            top: 180px;
            background-color: RGBA(0, 0, 0, .3);
            color: #fff;
        }

        .arrow:hover {
            background-color: RGBA(0, 0, 0, .7);
        }

        #container:hover .arrow {
            display: block;
        }

        #prev {
            left: 20px;
        }

        #next {
            right: 20px;
        }
        #list{
            height: 400px;
            position: absolute;
            top:0;
            left: 0;
        }
        #list img{
            width: 600px;
            height: 400px;
            float: left;
        }
        #container{
            width: 600px;
            height: 400px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="list" style="left: 0">
            <img src="img/5.jpg" alt="5"/>
            <img src="img/1.jpg" alt="1"/>
        </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>
    <script type="text/javascript">
        var next = document.getElementById('next');
        var list = document.getElementById('list');
        var imgs = list.getElementsByTagName('img');
        next.onclick = function () {
            if(parseInt(list.style.left)<= (-600 * (imgs.length-1))){
                return ;
            }
            animate(-600);
        }
        var prev = document.getElementById('prev');
        prev.onclick = function () {
            if(parseInt(list.style.left)>= 0){
                return ;
            }
            animate(600);
        }
        function animate(offset) {
            list.style.left = parseInt(list.style.left) + offset + 'px';
        }
    </script>

</body>
</html>

也不知道你的完整代码是什么样的，就尽量按照你的来写的

2 0

李晓健回复橙子love...

就是如果到了最后一张，再点击下一张就不去执行了呀。下面的一个也是如果到了第一张，再点前一张就不去执行。

2015-12-07 09:29:49

共 2 条回复 >

焦点图轮播特效

通过本教程学习您将能掌握非常实用的焦点图轮播特效的制作过程

65234 学习 · 611 问题

查看课程

相似问题

箭头切换问题