小奋斗 - 轻松学习从此开始!
IT小奋斗群 QQ群:62017228

Javascript实现的图片轮番播放

之前页面需要图片轮播的时候,都是直接在网上找一个插件,然后自己动手改一下,把图片的路径改成自己图片的路径,然后万事大吉。后来觉得这样并不能提高自己的前端水平,于是乎,自己动手写了一个图片轮播的小demo,用的是jquery,小弟前端小白一个,各位前端大神看了之后,望批评指正。 

--------------------------------------------------------------------------------------------------------------------------------------

我的思路是这样的,定义两个变量,一个用来保存当前页码$index,一个用来保存上一页的页码$exdex,首先判断$index和$exdex的大小,如果$index大于$exdex,说明是朝左翻页,反之,就是朝右翻页。如果是朝左翻页,就把当前页朝左偏移100%的宽度,让下一页同样朝左偏移100%宽度。以下是代码部分:

--------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .banner{
            width:300px;
            height:250px;
            position: relative;
            z-index: 100;
            background: skyblue;
            margin:100px auto;
            overflow:hidden ;
        }

        .banner .first{
            left:0;
        }
        .banner a{
            width: 100%;
            height: 100%;
            position: absolute;
            display:block;
            top:0;
            left:100%;
        }
        .banner a img{
            width: 100%;
            height: 100%;
        }
        .banner .pre{
            position: absolute;
            left:0;
            top:120px;
            background: gray;
            width:30px;
            height:30px;
            border-radius: 30px;
            line-height: 30px;
            text-align: center;
            opacity: 0.4;
            z-index: 1000;
            cursor: pointer;
        }
        .banner .next{
            position: absolute;
            right:0;
            top:120px;
            background: gray;
            width:30px;
            height:30px;
            border-radius: 30px;
            line-height: 30px;
            text-align: center;
            opacity: 0.4;
            z-index: 1000;
            cursor: pointer;
        }
       .choose{
            position: absolute;
            width:100px;
            height:20px;
            bottom:10px;
            left:90px;
            z-index: 1000;
        }
        .choose span{
            display: block;
            float: left;
            margin-left:15px;
            width:10px;
            height:10px;
            border-radius: 10px;
            background: blue;
            cursor: pointer;
        }
        .choose .red{
            background: red;
        }
    </style>
</head>
<body>
    <div class="banner">
        <span class="pre"><=</span>
        <span class="next">=></span>
        <a href="#" class="first"><img src="./1.jpg" alt=""/></a>
        <a href="#"><img src="./2.jpg" alt=""/></a>
        <a href="#"><img src="./3.jpg" alt=""/></a>
        <a href="#"><img src="./4.jpg" alt=""/></a>
        <div class="choose">
            <span class="red"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
<script src="./jquery.min.js"></script>
<script>
    var $index = 0;
    var $exdex = 0;
    $('.choose span').mouseover(function(){
        $index = $(this).index();
        $('.choose span').eq($index).addClass("red").siblings().removeClass("red");
        if($index > $exdex) {
            next();
        } else {
            pre();
        }
        return $exdex = $index;
    });

    function next() {
        $('.banner a').eq($index).stop(true,true).css('left',"100%").animate({"left":0});
        $('.banner a').eq($exdex).stop(true,true).css('left',"0").animate({"left":"-100%"});
    }

    function pre() {
        $('.banner a').eq($index).stop(true,true).css('left',"-100%").animate({"left":"0"});
        $('.banner a').eq($exdex).stop(true,true).css('left',"0").animate({"left":"100%"});
    }
</script>
</html>

--------------------------------------------------------------------------------------------------------------------------------------

小奋斗文章

--------------------------------------------------------------------------------------------------------------------------------------

我来评几句
登录后评论

已发表评论数(0)