为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我的图片滚动不了呢?急求!!!

<!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">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>自动展开</title>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        * {

            margin: 0px;

            padding: 0px;

        }

        #contain {

            position: relative;

            width:500px;

            height: 356px;border:3px solid #ff0;overflow:hidden;

        }

        #list {

            width: 2500px;height:356px;z-index:1

        }

            #list img {

                float: left;

            }

        #pre {

            background: url(hover_left.png) no-repeat top left;width:73px;height:74px;position:absolute;z-index:2;top:150px;left:0px;

        }

        #next{

            background: url(hover_right.png) no-repeat top left;width:73px;height:74px;position:absolute;z-index:2;top:150px;right:0px;;

        }

        #buttons {

            position: absolute;

            left: 200px;

            bottom: 20px;

            z-index: 2;width:150px;

                height: 10px;

        }

            #buttons span {

width:10px;

                height: 10px;float:left;display:inline-block;

             -moz-border-radius:50%;

             border-radius:50%;

             -webkit-border-radius:50%;

                background: #000;

                margin-right:5px;

                border:1px solid #fff;

                cursor:pointer;

            }

    </style>

    <script type="text/javascript">

       

        window.onload = function () {

            var contain = document.getElementById("contain");

            var list = document.getElementById("list");

            var buttons = document.getElementById("buttons");

            var pre = document.getElementById("pre");

            var next = document.getElementById("next");

            /*    pre.onclick = function () {

    

                    list.style.left = parseInt(list.style.left) - 500 + "px";

                }

                next.onclick = function () {

                    list.style.left = parseInt(list.style.left) + 500 + "px"

                }

            };*/

            function animate(offset) {

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

            }

            next.onclick = function () {

                animate(-500);//点击时向左移动600像素

            }

            pre.onclick = function () {

                animate(500);//点击时向右移动600像素

            }



        }

    </script>

</head>

<body>

    <div id="contain">

        <div id="list" style="left:500px;">

        <img src="1.jpg" />

        <img src="2.jpg" />

        <img src="3.jpg" />

        <img src="4.jpg" />

        <img src="5.jpg" />

</div>

<div id="buttons">

    <span index="1"></span>

    <span index="2"></span>


    <span index="3"></span>

      <span index="4"></span>

      <span index="5"></span>


</div>

    

    <div>

        <a href="#" id="pre"></a>

        <a href="#" id="next"></a>

    </div></div>

</body>

</html>


正在回答

代码语言

1 回答

#list设置position:absolute

0 回复 有任何疑惑可以回复我~
#1

ladytsh 提问者

谢谢你~~!
2015-09-05 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
焦点图轮播特效
  • 参与学习       65286    人
  • 解答问题       611    个

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

进入课程

为什么我的图片滚动不了呢?急求!!!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信