关闭

jquery轮播效果简单示例

标签: jquery
153人阅读 评论(0) 收藏 举报
分类:

图片轮播是很常见常用的一个功能。以下是一个简单的轮播效果示例。


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery.min.js" ></script>
    <style>
        ul,ol{
            font-size:30px;
            with:1000px;
            margin: 0 auto;
            text-align: center;
        }
        ol{
            height:100px;
        }
        li{
            color:blue;
            display: inline-block;
            width:50px;
            text-align: center;
            border:1px dashed yellowgreen;
            background-color: #aaa;
        }
        ol li{
            display:none;

        }
        .show{
            display:inline-block;
            width:100px;
            height:100px;
            line-height: 100px;
            font-size:50px;
            color:white;
        }
    </style>
    <title>Slideshow</title>
</head>
<body>


<ol>
    <li class="show">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ol>
<br />
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    $(function(){



        setInterval(show,1000);
         var length=$("ol li").length;
        var cur=0;
         function show(){
                 $("ol li").eq(cur-1).removeClass("show");
                 $("ol li").eq(cur).addClass("show");
             cur=cur+1;
             if(cur>4) cur=0;
         }

        $('ul li').click(function(){
            var num=$(this).index();
            $("ol li").eq(cur-1).removeClass("show");
            $("ol li").eq(num).addClass("show");
            cur=num+1;
            if(cur>4) cur=0;
        });

    });
</script>
</body>
</html>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:60223次
    • 积分:1136
    • 等级:
    • 排名:千里之外
    • 原创:51篇
    • 转载:21篇
    • 译文:0篇
    • 评论:5条