jquery异形轮播

最新推荐文章于 2024-08-14 16:39:24 发布

原创最新推荐文章于 2024-08-14 16:39:24 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #异形轮播

jquery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何利用jQuery创建异形轮播功能，包括设置左右按钮，通过引入jQuery库实现轮播图的切换操作。最终展示了一种独特的轮播图视觉效果。

jquery异形轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin: 0px auto;padding: 0px;}
        ul{list-style: none;}
        .box{width: 670px;height: 221px;margin-top:100px;position:relative;background:url(images/fangchan.gif);overflow: hidden;}
        .box ul li{position: absolute;}
        img{width: 100%;height: 100%;}
        .no1{width: 60px;height: 40px;top: 90px;left: -60px}
        .no7{width: 60px;height: 40px;top: 90px;right: -60px}

        .no2{width: 80px;height: 60px;top: 70px;left: 20px}
        .no6{width: 80px;height: 60px;top: 70px;right: 20px}

        .no3{width: 100px;height: 80px;top: 50px;left: 120px}
        .no5{width: 100px;height: 80px;top: 50px;right: 120px}

        .no4{width: 160px;height: 120px;top: 10px;left: 246px}

        .btn{width:619px;height: 41px;position: absolute;top: 151px;left: 25px;}
        .btn a{width: 41px;height: 41px;}
        .btn .leftBtn{float: left; }
        .btn .rightBtn{float: right;}

    </style>   
</head>
<body>
    <div class="box">
        <ul id="box-in">
            <li class="no1"><img src="images/1.jpg"></li>
            <li class="no2"><img src="images/2.jpg"></li>
            <li class="no3"><img src="images/3.jpg"></li>
            <li class="no4"><img src="images/4.jpg"></li>
            <li class="no5"><img src="images/5.jpg"></li>
            <li class="no6"><img src="images/6.jpg"></li>
            <li class="no7"><img src="images/7.png"></li>
        </ul>
        <div class="btn">
            <a href="javascript:;" class="leftBtn"></a>
            <a href="javascript:;" class="rightBtn"></a>
        </div>
    </div>
    <script type="text/javascript" src="jquery-3.1.1.min.js">   
    </script> 
    <script type="text/javascript">

            var li=document.getElementById("box-in").getElementsByTagName("li")
            var lis=li.length
            alert(lis)

            var arr=["no1","no2","no3","no4","no5","no6","no7"]
            $(".rightBtn").click(function(){
                // 删除数组的最后一项保存成变量last  然后追加到数组前面
                //把所有的li用for循环出来，然后改变类名 让第i个li的类名等于数组里的第i项
                var last=arr.pop()
                arr.unshift(last)
                for(var i=0;i<lis;i++){
                    li[i].className=arr[i]
                }
            });
            $(".leftBtn").click(function(event) {
                var first=arr.shift()
                arr.push(first)
                for(var i=0;i<lis;i++){
                    li[i].className=arr[i]
                }
            });

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