jquery轮播效果简单示例

原创 2016年08月31日 10:12:12

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


<!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轮播效果

  • 2015年08月12日 09:24
  • 482KB
  • 下载

jquery图片自动轮播效果

HTML代码如下:

jQuery实现图片轮播效果

整理以前用jQuery实现的图片轮播效果。 1. 不做操作时,自动轮播 2. 鼠标悬浮在图片上时,停止自动轮播,隐藏在图片左右的箭头会显示出来 3. 手动轮播1:鼠标指向图片底部的小标按钮,可以...

简单的Jqury图片轮播效果

  • 2017年10月25日 12:17
  • 718KB
  • 下载

3维效果的jquery图片轮播特效

  • 2017年04月12日 11:43
  • 22KB
  • 下载

jQuery实现图片轮播效果(仿QQ商城首页、天猫首页)

jQuery实现图片轮播效果(仿QQ商城首页、天猫首页) 图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。相信很多同学都在各种类...

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

  • 2016年11月21日 14:42
  • 325KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery轮播效果简单示例
举报原因:
原因补充:

(最多只允许输入30个字)