<!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. Redis同步(主从复制)

    目录1.Replication的工作原理2.如何配置Redis主从复制3.应用示例 1.Replication的工作原理在Slave启动并连接到Master之后,它将主动发送一条SYNC命令.此后Ma ...

  2. V9 二次开发技术篇之 模型数据库

    应V9粉丝的建议,本人今天讲一下 MVC中的M 数据库模型 首先 在 phpcms\model  建一个模型文件test_model.class.php <?phpdefined('IN_PHP ...

  3. php 防止SQL注入函数

    function inject_check($sql_str) { return eregi('select|insert|and|or|update|delete|\'|\/\*|\*|\.\.\/ ...

  4. -fembed-bitcode is not supported on versions of iOS prior to 6.0

    -fembed-bitcode is not supported on versions of iOS prior to 6.0   说法二 错误提示 -fembed-bitcode is not s ...

  5. 转：memcpy的用法总结

    1.memcpy 函数用于 把资源内存(src所指向的内存区域) 拷贝到目标内存(dest所指向的内存区域):拷贝多少个?有一个size变量控制拷贝的字节数:函数原型:void *memcpy(voi ...

  6. Linux学习——粘粘今天看的东西

    由二分割表就叧有64 bytes而已,最多叧能容纳四笔分割的记录, 这四个分割的记录被称为主要(Primary)戒延伸(Extended)分割槽.分割槽的最小单位为磁柱(cylinder)请注意, 延 ...

  7. empty()方法

    empty()可以用来检查一个变量是否被声明或者值为false,通常被用来检查一个表单变量是否被发送或者包含数据. 例如一个登录表单: <?php if(!empty($_POST['uname ...

  8. ural 1494 Monobilliards

    #include <cstdio> #include <cstring> #include <algorithm> using namespace std; ],b ...

  9. uva 714 Copying Books(二分法求最大值最小化）

    题目连接:714 - Copying Books 题目大意:将一个个数为n的序列分割成m份,要求这m份中的每份中值(该份中的元素和)最大值最小, 输出切割方式,有多种情况输出使得越前面越小的情况. 解 ...

  10. Netbeans 学习

    1.NetBeans快捷键: 1.完成代码:ctrl+\ //任何地方按下此组合键,均会提示相应的参考字段: 2.错误提示:alt + enter //顾名思义,当系统报错时,按下此组合可以查看系统提 ...