<!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. hdu 4284 状态压缩

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4284 #include<cstdio> #include<cstring> # ...

  2. poj 1050 To the Max (简单dp)

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

  3. Geometric Shapes - POJ 3449（多边形相交）

    题目大意:给一些几何图形的编号,求出来这些图形都和那些相交.   分析:输入的正方形对角线上的两个点,所以需要求出来另外两个点,公式是: x2:=(x1+x3+y3-y1)/2; y2:=(y1+y3 ...

  4. Line Painting

    题目大意;说是可以吧一段区间变成白色或者黑色, 区间(0-10^9)初始都是白色,问经过n次操作以后最大的连续白色区间 Problem Description The segment of numer ...

  5. VM虚拟机下在LINUX上安装ORACLE 11G单实例数据库

    1.环境及安装前规划:虚拟机及OS如下 环境:VMware Wordstation ACE版 6.0.2 操作系统:OracleLinux-R5-U8-Server-i386-dvd    3.2G ...

  6. 得到创建人Id

    等到创建人id,也就是登录人id arg1 .getCtx().fetchMemberId(); 其中arg1是 LServerEnv 的对象

  7. android 15 activity跳转

    从一个屏幕跳到另一个屏幕,一个activity跳转到另一个activity,Intent类用于组件之间传递数据和跳转,组件包括不仅activity. package com.sxt.day04_01; ...

  8. 如何进去bios设置

    1.BIOS是英文"Basic Input Output System"的缩略语,直译过来后中文名称就是"基本输入输出系统".其实,它是一组固化到计算机内主板上 ...

  9. 我的第一个C语言程序 （A+B Problem）（cheney-yang）

    第一个接触的C语言程序,是一个简单的A+B问题! 题目出处:http://acm.nyist.net/JudgeOnline/problem.php?pid=1 题目描述: 计算a+b的值 输入:   ...

  10. Marketplace Client- Download

    Marketplace是Java平台被广泛使用的IDE(集成开发环境)Eclipse的软件商店.上面有个有种牛X的插件,可根据自己需要下载. Eclipse Marketplace官网地址:http: ...