<!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. 600字读懂 Git

    译注:来自 Hacker School 的 Mary Rose Cook 实现了一个纯 JavaScript 写就的 Git:Gitlet,包含了最主要的一些命令.这个项目一是为了了解 Git 内部原 ...

  2. JDK JRE JVM

    使用java很久,但是一直不清楚JDK,JRE,JVM直接的关系,今天特地梳理一下. JDK:Java Development ToolKit(Java开发工具包),JDK是整个JAVA的核心,包括J ...

  3. Pattern()和Matcher() 用法

    1.简介: java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包.  它包括两个类:Pattern和Matcher . Pattern: 一个Pattern是一个 ...

  4. mysql中group_concat函数用法

    该函数返回带有来自一个组的连接的非NULL值的字符串结果.该函数是一个增强的Sybase SQL Anywhere支持的基本LIST()函数. 语法结构: GROUP_CONCAT([DISTINCT ...

  5. xml学习篇（一）

    转自:http://www.cnblogs.com/Jimmy009/archive/2012/06/18/2553722.html XML简介: 好了可以开始正式的学习了,在以前看一本计算机书籍,一 ...

  6. 对Verilog 初学者比较有用的整理(转自它处)

    *作者: Ian11122840    时间: 2010-9-27 09:04                                                              ...

  7. 高仿优酷Android客户端图片左右滑动（自动切换）

    本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和门户网站都有类似的实现: 具体思路: 1. 工程中需要添加android-support-v4.jar,才能 ...

  8. 动态设置布局LayoutInflater

    LayoutInflater作用是将layout的xml布局文件实例化为View类对象.LayoutInflater 的作用类似于 findViewById(),不同点是LayoutInflater是 ...

  9. 独立博客怎样申请谷歌Adsense

    谷歌Adsense广告是眼下个人站长的主要赚钱途径之中的一个,首先是它相对诱人的单位价格,尽管谷歌中文广告相比英文广告单位价格有所折扣,但我的经验是仅仅要你的网页内容和广告keyword有较高的匹配性 ...

  10. The BINARY and VARBINARY Types

    mysql> CREATE TABLE t (c BINARY()); Query OK, rows affected (0.21 sec) mysql> INSERT INTO t SE ...