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

关于轮播问题 主体做好了想加个小轮播始终做不好,谁呢那个帮忙解决下,提供下思路

关于轮播问题 主体做好了想加个小轮播始终做不好,谁呢那个帮忙解决下,提供下思路

眼前 2016-04-25 19:46:54
查看完整描述

1 回答

?
一种文化

TA贡献13条经验 获得超3个赞

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{margin:0; padding:0;}


        #box{width:500px; overflow:hidden;}

        #imgs{width:100000px;}

        #imgs img{float:left;}

    </style>

    <script src="../../js11-jq02/jquery-1.7.2.min.js"></script>

</head>

<body>

    <div id="box">

        <div id="imgs">

            <img src="imgs/1.jpg" width="500" alt="" />

            <img src="imgs/2.jpg" width="500" alt="" />

            <img src="imgs/3.jpg" width="500" alt="" />

            <img src="imgs/4.jpg" width="500" alt="" />

            <img src="imgs/5.jpg" width="500" alt="" />

        </div>

    </div>

</body>

<script>

    var current = 1;

    var width = $('#imgs img').width();


    function start(){

        setInterval(function(){

            //判断是否超出图片数

            if(current >= $('#imgs img').length) current = 0;

            var left = current * -width;


            $('#imgs').animate({'marginLeft':left + 'px'}, 300);

            current++;

        }, 500)

    }


    start();


    //鼠标移动上去停止

    //增加一些数字按钮,同样有鼠标事件

</script>

</html>


查看完整回答
反对 回复 2016-04-27
  • 1 回答
  • 0 关注
  • 976 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信