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>

    最终效果:


     

    以下是素材:

  • 相关阅读:
    IOS 动画的各种实现方法
    多视图控制器--自动布局 3.5 4.0英寸的应用程序
    IOS 多线程编程之Grand Central Dispatch(GCD)介绍和使用 多线程基础和练习
    TableView--通讯录--开篇
    UI 网络程序
    XML JSON解析--基本功能
    通讯录CoreData数据库实现版
    CoreData的使用入门到精通
    sqlite 数据类型详解
    189. Rotate Array
  • 原文地址:https://www.cnblogs.com/flay/p/3849395.html
Copyright © 2011-2022 走看看