<!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. 编程Tips集锦

    以下是自己编程的一些小贴士,记录,总结提高自己. 1.python中集合类型的查找,尽量用dict or set类型. dict和set类型,在python内部的实现都是使用hash映射,查找的时间复 ...

  2. TTS异步+同步

    微软TTS使用说明 一.SAPI SDK的介绍 SAPI,全称是The Microsoft Speech API.就是微软的语音API.由Windows Speech SDK提供. Windows S ...

  3. WCF入门教程[WCF基本应用]

    一.概述 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NE ...

  4. 配置android开发环境eclipse获取ADT获取不到

    在安装完Android SDK后eclipse要获取ADT, 可是由于GFW的存在, eclipse经常无法从http://dl-ssl.google.com/android/eclipse 获取到任 ...

  5. 转：MFC网络编程学习

    要学习好网路编程,主要看以下几个方面: 1.掌握概念,诸如:同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)等. 2.在实际Windows网络通信软件开发中,异步非阻 ...

  6. PHP 之Mysql增删改查操作案例

    1:user表: CREATE TABLE `user` ( `id` ) NOT NULL AUTO_INCREMENT, `name` ) NOT NULL, PRIMARY KEY (`id`) ...

  7. Cracking the coding interview--Q1.4

    原文 Write a method to replace all spaces in a string with'%20'. You may assume that the string has su ...

  8. COJ 0036 数数happy有多少个？

    数数happy有多少个? 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 图图是个爱动脑子.观察能力很强的好学生.近期他正学英语 ...

  9. Linux企业级项目实践之网络爬虫（29）——遵守robots.txt

    Robots协议(也称为爬虫协议.机器人协议等)的全称是"网络爬虫排除标准"(Robots Exclusion Protocol),网站通过Robots协议告诉搜索引擎哪些页面可以 ...

  10. HDOJ(HDU) 1562 Guess the number(水题，枚举就行)

    Problem Description Happy new year to everybody! Now, I want you to guess a minimum number x betwwn ...