<!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. poj 1050 To the Max (简单dp)

    题目链接:http://poj.org/problem?id=1050 #include<cstdio> #include<cstring> #include<iostr ...

  2. nyoj 95 众数问题【水】

    众数问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 所谓众数,就是对于给定的含有N个元素的多重集合,每个元素在S中出现次数最多的成为该元素的重数, 多重集合S重 ...

  3. CF 121E Lucky Array 【树状数组】

    这个题目的数据感觉不能更水了.从复杂度上计算,肯定有极限数据可以卡掉暴力方法的么. 总之,暴力的做法就是树状数组了,对于区间更新,就挨个更新就是了.当然,判断是否是Lucky Number的话,可以用 ...

  4. linux创建用户，指定组

    本博客不再更新 该文章新链接移步:http://it.lovepet.vip/archives/7/ 一.创建用户: 1.使用命令 useradd 例:useradd test——创建用户test  ...

  5. 终端command总结

    Ctrl+Alt+Delete Ctrl+Shift+Esc Ctrl+D Alt+F4 Shift+F10 win+m Ctrl+Alt+. Ctrl+A Ctrl+S osk taskmgr cm ...

  6. HIVＥ自定义函数 UDF

    自定义my_md5hash 具体hive源码怎么调用看我另外一篇博客 package udf.hive.myudf; import org.apache.commons.codec.digest.Di ...

  7. javascript之文档碎片，文档碎片在理论上可以提高DOM操作的执行效率

    刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...

  8. Eclipse(Myeclipse)安装GoogleGWT

    1,下载gpe http://code.google.com/p/googleappengine/并安装. 2,下载gwt http://code.google.com/intl/zh-CN/webt ...

  9. SQL server数据库中的DateTime类型出现的问题

    我们知道这个SQL server数据库中的DateTime类型是数据库应用开发中经经常使用到的一种数据类型.而C#语言中也有DateTime类型,尽管二者都是用来描写叙述时间的,可是它们的默认值是不同 ...

  10. javascript实现无缝上下滚动(转)

    js实现上下无缝滚动的原理是这样的: 1.首先给容器设定高度或宽度,然后overflow:hidden: 2.容器高度设定后,内容超出则被隐藏.3.改变容器的scrollTop(上下滚动)属性的值,让 ...