<!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. PHP：Xdebug配置

    在配置Xdebug时,之前经历了无数次失败,终于配置成功! 以下是配置失败的原因: 1.下载时,选用Xdebug的版本不正确: 2.配置时,Xdebug文件名或文件的路径不正确: 在参考 http:/ ...

  2. Call to undefined function Think\mb_strlen()

    在php.ini 中开启php_mbstring.dll 模块后重启 apache

  3. H5文件操作api--持续完善中

    Drop Here <input type="file" onchange="upload(this)" /></p> <div ...

  4. ntfs-3g

    CentOS默认源里没有ntfs3g,想要添加ntfs支持,无非是自己下载编译安装或者加源yum安装. 昨天重新安装了一个CentOS7,用的是添加aliyun的epel源来yum安装的方式,简单易行 ...

  5. Zend Studio XDebug调试配置

    最近在配置zend studio时找了些资料,发现了这个,说的比较详细 搭建Zend Studio 10.5 和XDebug 环境,试图进行 Drupal的调试, 经历了一些困难,但是最终解决了问题, ...

  6. Android-Parcelable

    Parcelable和Serializable的区别: android自定义对象可序列化有两个选择一个是Serializable和Parcelable 一.对象为什么需要序列化        1.永久 ...

  7. 走向面试之数据库基础：二、SQL进阶之case、子查询、分页、join与视图

    一.CASE的两种用法 1.1 等值判断->相当于switch case (1)具体用法模板: CASE expression WHEN value1 THEN returnvalue1 WHE ...

  8. [nRF51822] 10、基础实验代码解析大全 · 实验15 - RTC

    一.实验内容: 配置NRF51822 的RTC0 的TICK 频率为8Hz,COMPARE0 匹配事件触发周期为3 秒,并使能了TICK 和COMPARE0 中断. TICK 中断中驱动指示灯D1 翻 ...

  9. [备忘]检索 COM 类工厂中 CLSID 为 {91493441-5A91-11CF-8700-00AA0060263B} 的组件时失败解决方法

    检索 COM 类工厂中 CLSID 为 {91493441-5A91-11CF-8700-00AA0060263B} 的组件时失败,原因是出现以下错误: 80070005 在CSDN上总是有网友问这个 ...

  10. JS实战 · 表格行颜色间隔显示，并在鼠标指定行上高亮显示

    思路: 1.获取所有行对象,将需要间隔颜色显示的行对象进行动态的className属性指定:      前提是:先定义好类选择器,就是说给行对象赋予name. 2.高亮用到两个事件:onmouseov ...