zoukankan      html  css  js  c++  java
  • 图片、切换js实现图片轮换效果by小雨

    本篇文章是一篇关于图片、切换-的帖子

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

        <html xmlns="http://www.w3.org/1999/xhtml">

        <head>

        <title></title>

        <script type="text/javascript">

            var numb = 0;

            var imgnumb = 1;

            

            function showimg() {

             //两张图片切换法方1   /*numb++;

                if (numb % 2 == 0) {

                    document.getElementById('img1').setAttribute('src', 'images/1.jpg');

                }

                else {

                    document.getElementById('img1').setAttribute('src', 'images/2.jpg');

                }*/

            

                      

             //两张图片切换法方2   /*if (numb == 0) {

                    document.getElementById('img1').setAttribute('src', 'images/2.jpg');

                    numb = 1;

                }

                else {

                    document.getElementById('img1').setAttribute('src', 'images/1.jpg');

                    numb = 0;

                }*/

            }

           /图片轮换/多张 function imgfor() {            

                imgnumb++;

                document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg');

                if (imgnumb == 9) {

                    imgnumb = 0;

                }

            }

            var clearid;

            function clearfun() {

                clearInterval(clearid);

            }

            clearid=setInterval(imgfor, 1000);

        </script>

        </head>

        <body>

        <img alt="" id="img1" class="style1" src="images/1.jpg" width="500px" height="500px" />

        <input type="button" value="两张图片切换" onclick="showimg();" />

        <br />

        <input type="button" value="多张图片轮换" onclick="imgfor();;" />

        <br />

        <input type="button" value="结束执行" onclick="clearfun();" />

        </body>

        </html>

    文章结束给大家分享下程序员的一些笑话语录: 某程序员对书法十分感兴趣,退休后决定在这方面有所建树。花重金购买了上等的文房四宝。一日突生雅兴,一番磨墨拟纸,并点上了上好的檀香,颇有王羲之风 范,又具颜真卿气势,定神片刻,泼墨挥毫,郑重地写下一行字:hello world.

  • 相关阅读:
    PHP实现4种排序算法
    PHP反射获取当前函数的内容
    PHP递归目录的5种方法
    生成随机数组
    empty、isset、is_null的比较
    PHP哈希表碰撞攻击
    XMLHttpRequest的跨域请求
    CI框架SESSION重写
    PHP开发第一个扩展
    PHP面试题集之基础题
  • 原文地址:https://www.cnblogs.com/jiangu66/p/3024885.html
Copyright © 2011-2022 走看看