<!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. 2.2 文件 I/O 的基石：Path

    Path通常代表文件系统中的位置,能浏览任何类型的文件系统,包括zip归档文件系统: 文件系统中的几个概念:目录树.根目录.绝对路径.相对路径: NIO.2中的Path是一个抽象构造,你所创建和处理的 ...

  2. phpstorm 2016.1注册码

    phper 享受生产PHP Web开发phpStorm.利用深代码理解,一流的编码的援助,并支持所有主要的工具和框架. 先看看 phpstorm 2016.1 带来那些新变化呢? 1,更好的PHP语言 ...

  3. Css 八卦

    <div class="box"> <div class="right_d"></div> <span class=& ...

  4. JSP九大隐式对象

    JSP九大隐式对象 request HttpServletRequest response HttpServletResponse session HttpSession application Se ...

  5. 列表框List Box

    List Box/Check List Box ListBox窗口用来列出一系列的文本,每条文本占一行.创建一个列表窗口可以使用成员函数: BOOL CListBox::Create( LPCTSTR ...

  6. HTML5最佳实践

    首先先给大家推荐个不错的 前端 网站:http://www.tystudio.net HTML5正迅速称为web前端开发技术标准,作为一名前段开发人员,了解并正确的使用HTML5制作网站变得越来越重要 ...

  7. NSSet和NSMutableSet 确保数据的唯一性--备

    NSSet和NSMutableSet是无序的, 但是它保证数据的唯一性.当插入相同的数据时,不会有任何效果.从内部实现来说是hash表,所以可以常数时间内查找一个数据. 1.NSSet的使用 [NSS ...

  8. 将Altium中的原理图与PCB导出为PDF的步骤与方法

    1.通过File-Smart PDF(文件-智能PDF),快捷键F-M打开. 2.选择打印的范围:Current Project还是Current Document,还有生成的PDF的存放位置. 3. ...

  9. Linux标准输入、输出和错误和文件重定向(转) --- good

    标准输入.输出和错误 当我们在shell中执行命令的时候,每个进程都和三个打开的文件相联系,并使用文件描述符来引用这些文件.由于文件描述符不容易记忆,shell同时也给出了相应的文件名.下面就是这些文 ...

  10. 2015第29周五AOP

    AOP使用场景 AOP用来封装横切关注点,具体可以在下面的场景中使用: Authentication 权限 Caching 缓存 Context passing 内容传递 Error handling ...