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

<style>

p.now{ display:block; border:1px solid #ccc}

li.now{ color:red}

li{ list-style:none;float:left; padding:0 10px; border:1px solid #ccc}

#fd{position:absolute; left:100px; top:100px;height:20px; width:600px; background:#ccc}

</style>

</head>

<body>

<div id="fd">

<p class="now">1</p>

<p style="display:none">2</p>

<p style="display:none">3</p>

<p style="display:none">4</p>

<ul>

<li class="now">1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

</div>

<script>

function $(id){return document.getElementById(id)}//获取ID节点的简介方法

var tags=$("fd").getElementsByTagName("li");//获取切换按钮节点

var cats=$("fd").getElementsByTagName("p");//获取切换内容节点

var current;//设置当前帧的变量容器

var timer=3000;//

function disAll(){//初始所有标签样式

 for(var i=0; i<tags.length; i++){

       tags[i].className="";

       cats[i].className="";

    cats[i].style.display="none";

     }

  }

function setNow(){//获取当前帧的索引值

  for(var i=0; i<tags.length; i++){

    if(tags[i].className=="now"){

          current=i;

         }

   }

}

for(var j=0; j<tags.length; j++){//设置手动切换

    tags[j].onmouseover=function(){

    clearInterval(h);

     disAll();

      this.className="now";

    setNow();

     cats[current].style.display="block";

     cats[current].className="now";

      }

   tags[j].onmouseout=function(){

         setNow();

          h=setInterval("goNext()",3000);

      }

    }

function goNext(){//自动切换

   setNow();//获取当前帧索引

   current+=1;//帧自增1

  if(current>=parseInt(tags.length)){//判断：如果当前帧索引值是否大于切换按钮总数，如果大于按钮总数则回到初始状态

    current=0;

      disAll();

       cats[0].style.display="block";

        tags[0].className="now";

         cats[0].className="now";

        }

    else{

       disAll();

       cats[current].style.display="block";

       cats[current].className="now";

       tags[current].className="now";

   }

}

var h=setInterval("goNext()",timer)//开始自动切换

</script>

</body>

</html>

JQ简单图片轮播的更多相关文章

  1. html学习之路--简单图片轮播

    一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg.2.jpg.3.jpg.4.jpg. <!DOCTYPE html& ...

  2. jq实现图片轮播:圆形焦点+左右控制+自动轮播

    来源:http://www.ido321.com/862.html html代码: 1: <!DOCTYPE html> 2: <html lang="en"&g ...

  3. Jquery实现简单图片轮播

    html代码: <div class="show"> <div class="left"> <div class="sh ...

  4. html+jq实现简单的图片轮播

    今天上班没事,就自己琢磨着写一下图片轮播,可是没想到,哈哈竟然写出来啦,下面就贴出来代码,作为纪念保存下下哈: <body style="text-align: center;&quo ...

  5. JQ图片轮播

    <script src="{staticurl action="jquery.js" type="js"}"></scri ...

  6. Swift 使用CollectionView 实现图片轮播封装就是这样简单

    前言: 这篇你可以学会自定义视图,创建collectionView,协议的使用,定时器; 自制图片 先上Demo:Github上封装好的下载即用, 好用请Star Thanks首先新建一个继承于UIV ...

  7. swiper插件的简单使用，实现图片轮播

    移动端和p c端经常会遇到写轮播图的情况,这里只是简单的说一下swiper插件的简单用法(移动端为例). <!DOCTYPE html> <html lang="en&qu ...

  8. 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播

    1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...

  9. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

随机推荐

  1. nodejs调试

    1.通过debug命令进行调试 node debug app.js 运行的结果: 在debug状态下输入"repl"命令可以评估变量和表达式的值 按下'CTRL+C'可以退出rep ...

  2. 按钮点击效果jquery

    <html><head> <meta charset="UTF-8"> <title>QQ</title> <me ...

  3. 生产环境搭建MySQL复制的教程（转）

    [导读] 网络上有很多关于MySQL复制搭建的步骤和范例,以及手册上有一章完整的篇幅,讲述MySQL复制的原理.搭建步骤.优化等,但依然存在很多刚开始学习MySQL知识或者刚进入DBA行业的朋友咨询, ...

  4. 避免Block的循环引用

    避免Block的循环引用 什么是循环引用,什么时候发生循环引用 1 循环引用就是当self 拥有一个block的时候,在block 又调用self的方法.形成你中有我,我中有你,谁都无法将谁释放的困局 ...

  5. 转：A10/A20 Bootloader加载过程分析

    来自:http://blog.csdn.net/allen6268198/article/details/12905425 A10/A20 Bootloader加载过程分析 注:由于全志A10和A20 ...

  6. c++封装性

    C++ code到运行程序 作为一个c++程序员这个应该是最应该知道的细节,简言之:编译----链接----可执行的程序.这里所说的细节主要是第一步的细节,编译器如何把c++代码编译成目标代码.概括的 ...

  7. B450配置

    电脑型号 联想 B450 笔记本电脑  (扫描时间:2015?5?7?操作系统 Windows 7 旗舰版 32位 SP1 ( DirectX 11 ) 处理器 英特尔 酷睿2 双核 T9800 @ ...

  8. 【转】中断处理函数中不用disable_irq而用disable_irq_nosync原因

    原文网址:http://blog.csdn.net/skyflying2012/article/details/8265869 今天在写触摸屏驱动时在中断处理函数中使用disable_irq关中断发现 ...

  9. 提升效率的Linux终端快捷操作汇总

    很多普通 Linux 桌面用户都对使用终端感到排斥和恐惧,其实它没大家想的那么复杂,很多常见操作都可以直接在终端中进行,如:安装软件.升级系统等. 无论你是新手还是 Linux 终端使用的老鸟,系统极 ...

  10. mongodb的应用场景

    这篇文章总结的比较到位:http://www.tuicool.com/articles/YnmaAj