林阿三

用jquery写的轮播图
<!DOCTYPE html> <html> <head> <...
扫描右侧二维码阅读全文
02
2018/12

用jquery写的轮播图

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 1000px;
            height: 400px;
            margin: 0 auto;
            position: relative;
            background-color: #999999;
            ;
        }

        .slist {
            height: 400px;
        }

        .slist img {
            width: 100%;
            height: 400px;
        }

        .shang {
            position: absolute;
            left: 0;
            top: 40%;
            width: 30px;
            height: 60px;
            background-color: #33FF33;
        }

        .xia {
            position: absolute;
            right: 0;
            top: 40%;
            width: 30px;
            height: 60px;
            background-color: #33FF33;
        }

        .fenye {
            position: absolute;
            left: 0px;
            bottom: 20px;
            text-align: center;
            width: 100%;
            z-index: 99;
        }

        .fenye span {
            width: 10px;
            height: 10px;
            background-color: #F16700;
            border-radius: 100%;
            display: inline-block;
            margin: 0 5px;
        }

        .fenye span img {
            display: none;
            margin: -2px;
            width: 10px;
            position: absolute;
            height: 20px;
            bottom: 0;
            top: -15px;
        }

        /*.fenye span:hover img{display: block;}*/
    </style>

</head>

<body>

    <div class="wrap">
        <div class="slist">
            <div class="sitem"><img src="img/1.jpg" /></div>
            <div class="sitem"><img src="img/2.jpg" /></div>
            <div class="sitem"><img src="img/3.jpg" /></div>
        </div>
        <div class="shang"></div>
        <div class="xia"></div>
        <div class="fenye"></div>
    </div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function  () {
            $(".sitem ").hide().first().show() //隐藏全部图片,只显示第一张
            var $c=0;//定义下标
            $(".sitem").each(function  (i,o) {
                $(".fenye").append("<span><img src='"+ $(o).children().attr("src") +"'/></span>")
            }) //循环.sitem 图片有多少张 分页按钮就有多少个
            $(".fenye span").eq($c).css("background-color","#FFFFFF") //分页的第一个颜色为白色
            $(".shang").click(function  () {
                $c-- //0-1
                if ($c<0) {
                    $c=$(".sitem").length-1 //3-1  0 1 2
                }
                $(".sitem").hide().eq($c).show()
                $(".sitem span").css("background-color","#F16700").eq($c).css("background-color","#FFFFFF")
            })
                $(".xia").click(function  () {
                    $c++;
                    if ($c>$(".sitem").length-1) {
                    $c=0;
                    }
                    $(".sitem ").hide().eq($c).css("display","none").fadeIn(300).show()
                    $(".fenye span").css("background-color", "#F16700").eq($c).css("background-color", "#F1F1F1")
                })
                $(".fenye span").click(function  () {
                    $c=$(this).index()
                    $(".fenye span").eq($c).css("background-color","#FFFFFF")
                    $(".sitem").hide().eq($c).show();
                    $(".fenye span").css("background-color", "#F16700").eq($c).css("background-color", "#F1F1F1")
                })
                //三秒执行下一张
//                window.setInterval(function  () {
//                    $c++;
//                    if ($c>$(".sitem").length-1) {
//                    $c=0;
//                    }
//                    $(".sitem ").hide().eq($c).show()
//                    $(".fenye span").css("background-color", "#F16700").eq($c).fadeIn().css("background-color", "#F1F1F1")
//                },3000)
        })
    </script>
    
    

</body>

</html>
最后修改:2019 年 04 月 04 日 05 : 08 PM
如果觉得我的文章对你有用,请随意赞赏

7 条评论

  1. cfanlost

    wao

  2. cfanlost

    主页风格有变啦。

    打字特效 是安装的js插件吗?
    能否分享下。

    1. 林阿三
      @cfanlost

      查看源代码 拉到最后面有一段很长的js 复制 然后弄道网页里面就可以了

  3. 沉默是金

    最近忙什么呢?有没有出去实习

    1. 林阿三
      @沉默是金

      jquery阿 还没有呢 要明年去了

  4. 老王a

    iframe来个demo撒~~

  5. 南屿北岛

    我对前端,特别是CSS一直不会哈哈哈哈

发表评论