<!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. Java+protobuf 实例

    之前开发都是JSON格式, 据说用这种格式的 安全, 输入输出全是二进制文件,且 数据占用内存小. 主要永远移动端数据传送.以下是代码: controller: 请求的是实体: package cn. ...

  2. Android开发ImageView控件缩放图片

    首先还是最基础的ImageView控件如何显示图片: <ImageView                Android:id="@+id/imgView"          ...

  3. viewpager+fragment学习笔记

    有暇,总结一下viewpager+fragment的使用. 先来看看效果图: 有三个标题,三个fragment,滑动时标题的颜色会随着变化. MainActivity.java public clas ...

  4. css考核点整理（十）-响应式开发经验，响应式页面的三种核心技术是什么

    响应式开发经验,响应式页面的三种核心技术是什么

  5. 怎样使用svn开发项目

    那么首先什么是svn呢?官方有很好的解释,我说一下个人简单的理解,svn就是开源的版本控制软件, 那么什么是版本呢?简单的说版本就是标记,比如你买了一本书,同样的书名,但是版本不一定一样, 因为里面可 ...

  6. angularJS function

    angular.bootstrap 启动Angular angular.element 相当于轻量的JQuery 使用方法: angular.element('#qq'); angular.eleme ...

  7. JS escape()、encodeURI()和encodeURIComponent()的区别

    1.实例说明: var url='http://wx.jnqianle.com/content/images/冰皮月饼.jpg?name=张三丰&age=11'; console.info(w ...

  8. [原创] SQLite数据库使用清单（上）

    1. 介绍 1.1 安装 访问 SQLite 下载页面,从 Windows 区下载预编译的二进制文件. 您需要下载 sqlite-shell-win32-*.zip 和 sqlite-dll-win3 ...

  9. Length 和 Width在矩形中的定义.

    Length is the longer or longest dimension of a rectangle (or even an object). Ref:http://mathforum.o ...

  10. Android TV 模拟器启动

    模拟器启动错误 使用IntelCPU的模拟器 http://software.intel.com/en-us/android/articles/intel-hardware-accelerated-e ...