林阿三

用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 Google Chrome 72.0.3610.2 Windows 10 中国 甘肃 平凉

    wao

  2. cfanlost Google Chrome 72.0.3610.2 Windows 10 中国 甘肃 平凉

    主页风格有变啦。

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

    1. 林阿三 Google Chrome 70.0.3538.102 Windows 10 中国 湖南 长沙
      @cfanlost

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

  3. 沉默是金 Google Chrome 63.0.3239.132 Windows 10 中国 江苏 苏州

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

    1. 林阿三 Google Chrome 70.0.3538.102 Windows 10 中国 湖南 长沙
      @沉默是金

      jquery阿 还没有呢 要明年去了

  4. 老王a Google Chrome 70.0.3538.110 Windows 10 中国 北京 北京

    iframe来个demo撒~~

  5. 南屿北岛 Google Chrome 70.0.3538.77 Windows 10 中国 陕西 西安

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

发表评论