<!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. 【PostgreSQL】PostgreSQL的安装

    到了新公司,新公司的数据库是使用PostgreSQL,第一次学习,第一次安装. 开始安装:

  2. How Long Does It Take

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

  3. Unity3D上可以发布到IOS使用的SQLite数据库

    地址:https://github.com/codecoding/SQLite4Unity3d Unity5.1.1f 发布,在IOS 8.3上亲测可用,Android好像有点问题. 也可用参考下这个 ...

  4. 编译可在Nexus5上运行的CyanogenMod13.0 ROM(基于Android6.0)

    编译可在Nexus5上运行的CyanogenMod13.0 ROM (基于Android6.0) 作者:寻禹@阿里聚安全 前言 下文中无特殊说明时CM代表CyanogenMod的缩写. 下文中说的“设 ...

  5. 一步一步学ROP之linux_x86篇

    一步一步学ROP之linux_x86篇 作者:蒸米@阿里聚安全 ​ 一.序 ROP的全称为Return-oriented programming(返回导向编程),这是一种高级的内存攻击技术可以用来绕过 ...

  6. ABP理论学习之Abp Session

    返回总目录 本篇目录 介绍 注入Session 使用Session属性 介绍 当应用程序要求用户登录时,那么应用程序也需要知道当前用户正在执行的操作.虽然ASP.NET本身在展现层提供了Session ...

  7. ABP理论学习之仓储

    返回总目录 本篇目录 IRepository接口 查询 插入 更新 删除 其他 关于异步方法 仓储实现 管理数据库连接 仓储的生命周期 仓储最佳实践 Martin Fowler对仓储的定义 位于领域层 ...

  8. HTML和CSS经典布局2

    如下图: 需求: 1. 如图 2. 可以从body标签开始. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xht ...

  9. Tomcat无故自动退出的问题

    我在这篇文章<写一个脚本,自动启动Tomcat>中提到Tomcat会无缘无故退出,而且在日志中找不到原因.后来终于知道为什么了: 由于内存不足,被OOM Killer杀死的!由于是直接被系 ...

  10. FTP文件服务搭建与同步传输

    需求       搭建一台FTP服务器,用于文件的上传与下载:同时将FTP服务器目录中的文件同步到多个服务器中,实现同步更新,同时文件需要控制用户访问对应的文件夹权限. 需要用到的软件有:bestsy ...