<!DOCTYPE>

<html>

<head>

    <meta http-equiv="content-type" content="text/html" charset="utf-8">

    <title>Image play</title>

    <style>

        body{

            width:430px;

            margin:20px auto;

        }

        p.now{

            display:block;

            width:400px;

            height:200px;

            overflow:hidden;

            border:1px solid #ccc;

        }

        li.now{

            color:#ccc;

        }

        li{

            list-style:none;

            float:left;

            padding:0 10px;

            margin-bottom:5px;

            border:1px solid #ccc;

            background:#eee;

        }

        #fd{

            list-style:none;

            float:left;

            padding:0 10px;

            border:1px solid #ccc;

            margin:0 auto;

            background:#eee;

        }

        img{

            width:400px;

            height:200px;

            padding:1px;

            /*padding-top:18px;*/

        }

    </style>

</head>

<body>

<div id="fd">

    <p class="now"><img src="./images/pic1.jpg"></p>

    <p style="display:none;"><img src="./images/pic2.jpg"></p>

    <p style="display:none;"><img src="./images/pic3.jpg"></p>

    <p style="display:none;"><img src="./images/pic4.jpg"></p>

    <ul>

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

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

</div>

<script>

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

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

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

    var timer=2000; // 设置2秒循环一次

    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;

        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);

    function $(obj){

        return document.getElementById(obj);

    }

</script>

</body>

</html>

php广告图片循环播放 幻灯片效果的更多相关文章

  1. JS可控制的图片自动循环播放查看效果

    JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</t ...

  2. setTimeout应用 && 自动播放——幻灯片效果&& 自动改变方向——幻灯片效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Android实现Banner界面广告图片循环轮播（包括实现手动滑动循环）

    前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环.本以为单纯的ViewPager就可以实现这些功能.但是蛋疼的事情来了,ViewPager并不支持循环翻页.所以 ...

  4. Android广告页循环播放

    摘要:项目要求做一个广告页,实现几秒更换一次广告页,下方还有指示第几张广告页,同样也支持手动左滑或右滑. 1.准备好粘贴5个有关广告页的类. ①BaseViewPager==>自定义高度的Vie ...

  5. JavaScript实现的图片循环播放

    直接上干货 <html> <head> <title>Banner Cycler</title> <script> var banners ...

  6. js实现网页上图片循环播放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...

  7. iOS 用Swipe手势和动画实现循环播放图片

    主要想法 添加3个ImageView展示图片,实现图片的无限循环. 使用Swipe手势识别用户向右或向左滑动图片. 使用CATransition给ImageView.layer添加动画,展示图片更换的 ...

  8. winfrom 循环播放图片

    没啥新东西了,就是遍历和匹配文件名然后获取对象,放到picturebox里面 选中listview中想要查看的图片,然后点击查看按钮,进行↓代码. if (listView1.SelectedItem ...

  9. 【jquery】幻灯片效果

    闲着无聊,用Jquery写了一个幻灯片效果. 我这人喜欢造轮子,除了jquery这种有强大开发团队的框架级别JS,其实的一些小程序都是尽量自己写. 一是因为怕出问题了没人问,二是自己写的改起来也方便. ...

随机推荐

  1. js判断undefined类型

    js判断undefined类型 if (reValue== undefined){    alert("undefined");    }  发现判断不出来,最后查了下资料要用ty ...

  2. Win10 下安装 NodeJS

    1,右键点击底部导航栏win(开始)弹出,使用  命令提示符(管理员A) 2,输入命令,进入安装文件目录,输入  msiexec/package node-v4.4.4-x64.msi ----弹出安 ...

  3. bootstrap按钮样式

    <a class='btn' href='javascript:;'>常规按钮</a> <a class='btn btn-small' href='javascript ...

  4. How Long Does It Take

    好长时间没写博客了,真心惭愧啊! 废话少说,原题链接:https://pta.patest.cn/pta/test/1342/exam/4/question/24939 题目如下: Given the ...

  5. Usaco*Brownie Slicing

    Description Bessie烘焙了一块巧克力蛋糕.这块蛋糕是由R*C(1 <= R,C <= 500)个小的巧克力蛋糕组成的. 第i行,第j列的蛋糕有N_ij(1 <= N_ ...

  6. 开源免费的HTML5游戏引擎

    青瓷引擎的成长 青瓷引擎自2015年4月项目启动开始,7月首次亮相2015年ChinaJoy,便得到业界的极大关注,随后开启限量测试,收到数百个开发者团队的试用申请及反馈,期间经历了18个内测版本,完 ...

  7. MySQL查询和删除重复数据

    删除表中重复记录,只保留一条: delete from 表名 where 字段ID in (select * from (select max(字段ID) from 表名 group by 重复的字段 ...

  8. 20145337 GDB调试汇编堆栈过程分析

    20145337 GDB调试汇编堆栈过程分析 测试代码 #include<stdio.h> short addend1 = 1; static int addend2 = 2; const ...

  9. python 根据现有文件树创建文件树

    # -*- coding: utf-8 -*- import os, errno def fileName(path):#获取文件夹 str = '' for i in range(1,len(pat ...

  10. STL容器分类