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

最终效果：

 

以下是素材：

jQuery简单的轮播特效的更多相关文章

  1. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  2. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  3. jquery虎牙TV3D轮播特效

    css部分: *{ margin: 0px; padding: 0px; } body{ margin: 0px; padding: 0px; text-align: center; } #banne ...

  4. 用纯css、JavaScript、jQuery简单的轮播图

    完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

  5. jquery简单的轮播效果！

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. 基于jQuery游戏网站焦点图轮播特效

    基于jQuery的一款游戏网站焦点图轮播特效.这是一款带进度条定时切换,带缩略图切换的jQuery网站焦点图代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <cente ...

  7. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  8. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  9. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

随机推荐

  1. jquery 使用方式记录

    1.监听键盘事件 $("#id").keyup(function(event){ if(event.keyCode == 13){ $("#btn_addgoods_su ...

  2. 数据分析：Weka，Matlab，R，SPSS，SAS等分析软件的入门

    1 功能角度 weka是机器学习方面的工具(开源).spss是数学工具(商业工具). 具体的说,weka的主要功能是模式分类,或者模式识别或者回归.包括特征的降维(PCA),特征选择,训练模型以及对测 ...

  3. SSH服务及花生壳域名解析

    一.安装说明以CentOS 5为例 1.安装必要的开发包 [root@localhost ~]# yum install gcc gcc-c++ autoconf automake 2.下载phddn ...

  4. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（6）-Unity 2.x依赖注入by运行时注入[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(6)-Unity 2.x依赖注入by运行时注入[附源码] Unity 2.x依赖注入(控制反转)IOC,对 ...

  5. Linux内核之mmc子系统-sdio

    现在的Linux内核中,mmc不仅是一个驱动,而是一个子系统.这里通过分析Linux3.2.0内核,结合TI的arm335x平台及omap_hsmmcd host分析下mmc子系统,重点关注sdio及 ...

  6. 关于开发环境 git 重新部署

    apps  开发机器 多次因为升级出现无法登陆 下面就重新部署 流程做笔记 1   备份 根目录下的 那一堆shell 和 Cache/data 下的系统配置 2  shell : su www   ...

  7. BootStrap table 传递搜索参数

    看bootStrap table文档不难发现它有一个queryparams属性,是向后台传递参数的,默认参数已有pageSize.pageIndex等,那么怎么传递自定义的参数呢?在网上找了好多也没有 ...

  8. GRADLE 构建最佳实践

    随着谷歌对Eclipse的无情抛弃和对Android Studio的日趋完善,使用gradle构建Android项目已经成为开发者的一项必会良技.那么,问题来了,采用什么样的姿势才能让项目开发构建过程 ...

  9. Thread Runnable 多线程

    1. 实现多线程的两种方法         a) 让这个类继承java.lang.Thread,然后重写run方法         b) 让这个类实现 java.lang.Runnable接口,实现r ...

  10. sql 语句总结

    sql 语句的总结: 下面是个统计  from_userid 字段相同的数数量有多少在用num参数来接收,这个数值: select *,count(*)  as num from invitation ...