zoukankan      html  css  js  c++  java
  • 超级简单的jquery轮播图demo

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>轮播图demo</title>
            <script type="text/javascript" src="js/jquery-3.2.1.slim.js" ></script>
            <link rel="stylesheet" href="css/demo.css" />
            <script type="text/javascript">
                var t = n = i = 0, count;
                $(function(){
                    count=$(".scroll_pic a").length;//求出图片数量
                    $(".scroll_pic a:not(:first)").hide();//隐藏第一张以外的所有图片
                    $("#scroll_button li").click(function(){
                        i = n = $(this).index();//index() 方法返回指定元素相对于其他指定元素的 index 位置。
                        $(".scroll_pic a").eq(i).show().siblings().hide();//siblings()选择除自身以外的所有同胞元素
                        $(this).addClass("scroll_in").siblings().removeClass("scroll_in");
                        //鼠标经过图片区域停止setInterval()调用函数,移开恢复
                    });
                    t = setInterval("picShowAuto()", 3500);//setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭
                    $(".scroll").hover(function(){clearInterval(t)}, function(){t = setInterval("picShowAuto()", 3500);});
                });
                
                function picShowAuto(){
                    n = n >=(count -1) ?0 : ++n;
                    $("#scroll_button li").eq(n).trigger("click");//trigger() 方法触发被选元素的指定事件类型
                }
            </script>
        </head>
        <body>
            <div class="scroll">
                <div class="scroll_pic">
                    <a href="#"><img src="img/pic1.jpg" alt=""/></a>
                    <a href="#"><img src="img/pic2.jpg" alt=""/></a>
                    <a href="#"><img src="img/pic3.jpg" alt=""/></a>
                    <a href="#"><img src="img/pic.jpg" alt=""/></a>
                </div>
                <ul id="scroll_button">
                    <li class="scroll_in"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            
        </body>
    </html>
    .scroll {
        width: 720px;
        height: 410px;
        margin: 0 auto;
        margin-top: 100px;
        overflow: hidden;
        position: relative;
    }
    
    .scroll ul {
        padding: 5px 5px;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        position: absolute;
        bottom: 10px;
        left: 50%;
        background:rgba(455,455,455,0.4);
        border-radius: 28px;
    }
    
    .scroll ul li {
        float: left;
        margin: 0px 5px;
        width: 16px;
        height: 16px;
        border-radius: 16px;
        border:1px #73B613 solid;
        background: #FCBE47;
        cursor: pointer;
            
    }
    
    .scroll ul li.scroll_in{
        background:#FF6600;
    }
  • 相关阅读:
    WPF在XAML的资源中定义空字符串String.Empty
    WPF中定义TabItem的可选区域(特别是当使用Label来呈现Header时)
    反转ListBox的ListBoxItem(控件级别,不是数据的反转)
    WPF获取相对位置、坐标的方法
    WPF为ItemsControl设置ItemsPanelTemplate
    WPF中List的Add()与Insert()方法的区别
    返回表达式列表中最小值least(exp1,exp2,exp3,……,expn)
    oracle_基本SQL语言
    JS 实现的浏览器系统通知 iNotify.js
    RHCE认证考前辅导
  • 原文地址:https://www.cnblogs.com/Strom-HYL/p/6904438.html
Copyright © 2011-2022 走看看