<!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. 常用CSS代码片断

    单行文本截字 .nowrap { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: normal; ...

  2. 不在界面上用控件 动态创建idhttp,IdAntiFreeze来用

    不在界面上用控件 动态创建idhttp,IdAntiFreeze来用 var IdHTTP: Tidhttp; IdAntiFreeze: TidAntiFreeze; begin IdAntiFre ...

  3. C#数字图像处理的3种方法

    本文主要通过彩色图象灰度化来介绍C#处理数字图像的3种方法,Bitmap类.BitmapData类和Graphics类是C#处理图像的的3个重要的类. Bitmap只要用于处理由像素数据定义的图像的对 ...

  4. Spark 资源调度及任务调度

    1.  资源分配 通过SparkSubmit进行提交应用后,首先会创建Client将应用程序(字节码文件.class)包装成Driver,并将其注册到Master.Master收到Client的注册请 ...

  5. Ubuntu12.04 下搭建Java开发环境

    1:下载 jdk-7u40-linux-i586.tar.gz. 2:解压安装. (1)创建jvm目录:sudo mkdir -p /usr/lib/jvm (2)sudo tar zxvf ./ j ...

  6. Android菜单详解（一）——理解android中的Menu

    前言 今天看了pro android 3中menu这一章,对Android的整个menu体系有了进一步的了解,故整理下笔记与大家分享. PS:强烈推荐<Pro Android 3>,是我至 ...

  7. Cracking the coding interview--Q1.6

    原文: Given an image represented by an NxN matrix, where each pixel in the image is 4 bytes, write a m ...

  8. FE: CSS固定图片显示大小及GitHub Pages在线演示

    CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...

  9. UVA 11636 - Hello World! 水

    水题,贪心,dp都随意 /* author:jxy lang:C/C++ university:China,Xidian University **If you need to reprint,ple ...

  10. Java设计模式之简单工厂、工厂方法和抽象工厂

    在前面的学习中(参见前面的博客),我们学到了很多OO原则: 封装变化 多用组合,少用继承 针对接口/超类编程,不针对实现编程 松耦合 开闭原则 让我们从一个简单的类开始,看看如何将之改造成符合OO原则 ...