jquery轮播效果简单示例

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


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


阅读更多
文章标签: jquery
个人分类: 前端
上一篇精通 JS正则表达式
下一篇AngularJS操作DOM——angular.element
想对作者说点什么? 我来说一句

简单jquery轮播效果

2015年08月12日 482KB 下载

jQuery首页轮播-淡入淡出效果

2016年11月21日 325KB 下载

jQuery首页轮播效果

2012年01月18日 11.15MB 下载

简单轮播效果

2016年06月03日 2MB 下载

没有更多推荐了,返回首页

关闭
关闭