<!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. C#调用exe文件，IIS发布后无法掉用本地exe程序的解决方法

    http://blog.csdn.net/junjieking/article/details/6277836?reload这位楼主的问题,我也遇到了,但是我按照他那样操作并没有解决问题,弄了好久终于 ...

  2. MVC框架

    MVC (Modal View Controler)本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用 ...

  3. #iOS问题记录#动态Html加载本地CSS和JS文件

    所谓动态Html,指代码中组合生成的html字符串: 若需要加载本地CSS,图片,JS文件,则, 1,需要文件的全路径: 2,需要"file:///"标志: 例如: //获取文件全 ...

  4. eclipse maven java1.8支持

    下载Java 8并确保你的Eclipse版本是Kepler SR2. 选择菜单:"Help > Eclipse Marketplace-". 在搜索框中输入"Jav ...

  5. 关于[super dealloc]

    销毁一个对象时,需要重写系统的dealloc方法来释放当前类所拥有的对象,在dealloc方法中需要先释放当前类中所有的对象,然后再调用[super dealloc]释放父类中所拥有的对象.如先调用[ ...

  6. Visual Studio 2015 各版本对比及下载地址

    2015年7月20日23时30分,微软举行了Visual Studio 2015的发布会,跟随者Visual Studio 2015 而来的是,.net 开源,C#支持wp,ios,android三大 ...

  7. Google云平台对于2014世界杯半决赛的预测，德国阿根廷胜！

    由于本人是个足球迷,前段日子Google利用自己云平台预测世界杯八进四的比赛并取得了75%的正确率的事情让我振动不小.虽然这些年一直听说大数据的预测和看趋势能力如何如何强大,但这次的感受更加震撼,因为 ...

  8. Eclipse自动补全设置

    如果你用过Visual Studio的自动补全功能后,再来用eclipse的自动补全功能,相信大家会有些许失望. 但是eclipse其实是非常强大的,eclipse的自动补全没有VS那么好是因为ecl ...

  9. 基于ajax与msmq技术的消息推送功能实现

    周末在家捣鼓了一下消息推送的简单例子,其实也没什么技术含量,欢迎大伙拍砖.我设计的这个推送demo是基于ajax长轮询+msmq消息队列来实现的,具体交互过程如下图: 先说说这个ajax长轮询,多长时 ...

  10. ABP理论学习之启动配置

    返回总目录 本篇目录 配置ABP 配置模块 为模块创建配置 为了在应用启动时配置ABP和模块,ABP提供了一个基础设施. 配置ABP 配置ABP是在模块的PreInitialize事件中完成的.下面的 ...