jquery轮播效果简单示例

来源：互联网发布：谓之知机什么意思编辑：程序博客网时间：2024/06/09 20:23

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

<!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