zoukankan      html  css  js  c++  java
  • jQuery简单的轮播特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    </head>
    
    <body>
    <style type="text/css">
        *{padding:0; margin:0;}
        ul{list-style-type:none;}
        ol li{list-style-type:none;}
        #box{width:700px; height:300px; border:1px solid #ccc; padding:5px; overflow:hidden; margin:0 auto; margin-top:300px; position:relative;}
        #box ol{ position:absolute; right:10px; top:250px;}
        #box ol li{float:left;width:20px; height:20px; margin-left:2px; cursor:pointer; text-align:center; line-height:20px; background-color:#fff; border:1px solid red; }
        #box ol li.bzf{background-color:#abcdef;}
    </style>
        <script type="text/javascript">
            $(document).ready(function(){
            var $NowIndex = 0;
            var $imgcount = $("#box ul li").length;
                $("#box ol li").mouseover(function(event){
                    var $index = $(this).index();
                    $("#box ul li").eq($index).fadeIn().siblings().fadeOut();
                    $(this).addClass("bzf").siblings().removeClass("bzf");
                });
                setInterval(function(){
                    if($NowIndex < $imgcount){
                        $("#box ul li").eq($NowIndex).fadeIn().siblings().fadeOut();
                        $("#box ol li").eq($NowIndex).addClass("bzf").siblings().removeClass("bzf");
                        $NowIndex++;
                    }else{
                        $NowIndex = 0;
                    }
                    
                },1000);
            });
        </script>
        
        <div id="box">
            <ul>
                <li><img src="2.jpg"/></li>
                <li><img src="3.jpg"/></li>
                <li><img src="4.jpg"/></li>
                <li><img src="5.jpg"/></li>
                <li><img src="6.jpg"/></li>
                <li><img src="7.jpg"/></li>
            </ul>
            <ol>
                <li class="bzf">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ol>
        </div>
    
    </body>
    </html>

    最终效果:


     

    以下是素材:

  • 相关阅读:
    手把手教你用Python模拟登录淘宝
    数据库链接方式ORM
    ubuntu命令
    django项目不能运行解决方法
    区别比较 match和search
    redis持久化RDB与AOF
    python基础数据类型
    python基础二
    Python中将一个对象倒序输出的4种方法
    python基础数据类型补充以及编码的进阶
  • 原文地址:https://www.cnblogs.com/flay/p/3849395.html
Copyright © 2011-2022 走看看