<!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. mac 终端 常用命令

    基本命令1.列出文件ls 参数 目录名        例: 看看驱动目录下有什么:ls /System/Library/Extensions参数 -w 显示中文,-l 详细信息, -a 包括隐藏文件2 ...

  2. node-webkit安装及简单实现

    遇到一个客户说不要登录网页访问系统,说是不安全,要做成像是QQ这样的客户端. 这让我很为难啊,项目都快做好了,不可能让我重新做吧,再说C++什么的我也不会啊, 于是我接触了node-webkit,并觉 ...

  3. 紫書_例5-10 UVa207

    細節較多,自己寫的第一份半殘品,未能AC,后參考了劉老師的代碼,寫出了第二份的代碼,經過多次修改后總算AC,然而後果也很嚴重,導致代碼和劉老師極其相似,這也是我不喜歡看了參考代碼后再自己寫的緣故. 祇 ...

  4. 解决：View调用invalidate()后不刷新onDraw()

    近来学android图片处理,按照例子来,自定义一个View,之后在Activity里面手动调用该View的invalidate()后,一直无法刷新onDraw() 上网搜了一下,有两种解决办法: 一 ...

  5. pythonchallenge 解谜 Level 6

    第六关地址 http://www.pythonchallenge.com/pc/def/channel.html 和前几关一样,首先看网页源码吧.反正不看也没办法... <html>< ...

  6. 1051. Pop Sequence

    原题连接:https://www.patest.cn/contests/pat-a-practise/1051 题目: Given a stack which can keep M numbers a ...

  7. fasicon.js （无二维码版，如需要js创建二维码版本可联系我：770959294@qq.com）

    /*** Created by 张云山 on 2016/12/9.*/(function(wins,doct){wins.fasicon = function(){this.name = " ...

  8. 推荐学习使用cocoapods和phoneGap安装的链接

    phoneGap安装:http://blog.csdn.net/cwb1128/article/details/18019751 cocoaPods使用:http://blog.csdn.net/wz ...

  9. Delphi XE5 支持的Android 版本

    Delphi XE5 已经支持Android应用开发.  那XE5支持Android的哪些版本呢?Delphi编译的APP能部署到Gingerbread (2.3.3-2.3.7), Ice Crea ...

  10. PHP文件相关的操作函数——目录操作

    1.有关文件类型的函数 PHP是以UNIX的文件系统为模型的,因此在Windows系统中我们只能获得“file”.“dir”或者“unknown”三种文件类型.而在UNIX系统中,我们可以获得“blo ...