zoukankan      html  css  js  c++  java
  • 图片轮换的一个例子,但是还不太好

    <script language="javascript" type="text/javascript">
    //定义数组存好图片
    var imgs = ['Imgs/1.jpg', 'Imgs/2.jpg', 'Imgs/3.jpg', 'Imgs/4.jpg', 'Imgs/5.jpg'];
    <!--var text = ['图片1说明文字', '图片2说明文字', '图片3说明文字', '图片4说明文字', '图片5说明文字'];-->
    var Imgs= new Array();
    var images="<%=ImagesStr %>";//后台得到一连串的图片路径,此外服务器控件和Html标签有不同,在图片的路径的设置上如

    Imgs=images.split(",");            //得到每张图的路径
    var o = document.getElementById('banner_img');
    var t = document.getElementById('text');
    var idx = 0;
    function ch() {
     o.style.backgroundImage = 'url('+Imgs[idx]+')';
     //设置html元素内的html文本
    // alert(Imgs[idx]);
     color(idx);
     idx++;
     if ( idx > Imgs.length - 1 ) {
      idx = 0; 
     }
    }
    function setImg( i ) {
     o.style.backgroundImage = 'url('+Imgs[i]+')';
       
     idx = i;
     color(i);
    }
    function color( i ) {
     for ( var j = 0; j < Imgs.length; j++ ) {
      var ele = document.getElementById('i-'+j);
      if ( j == i )
       ele.className = 'i-now';
      else
       ele.className = 'i-item';
     }
    }
    setInterval('ch()', 2000);
        </script>

          <div class="banner">
                    <div id="banner_img">
                        <div class="fill">
                        </div>
                    </div>
                    <div class="clearfloat">
                    </div>
                    <div class="h-box">
                        <a class="i-item" onclick="setImg(4)" id="i-4">5</a> <a class="i-item" onclick="setImg(3)"
                            id="i-3">4</a> <a class="i-item" onclick="setImg(2)" id="i-2">3</a> <a class="i-item"
                                onclick="setImg(1)" id="i-1">2</a> <a class="i-item" onclick="setImg(0)" id="i-0">1</a>
                        <a id="text">&nbsp;</a>
                    </div>
                </div>

  • 相关阅读:
    java中Condition类的详细介绍(详解)
    Semaphore原理以及使用总结
    RocketMQ消息存储原理总结(一)
    Es Bucket聚合(桶聚合)总结
    "元素隐式具有 “any” 类型,因为类型“Shared”没有索引签名"问题解决思路
    有关生产环境tomcat java应用报错Caused by: java.lang.OutOfMemoryError: Java heap space的调研
    docker 实践02
    正睿比赛总结day1
    【水】一个神秘玩意:如何分辨出差别很小的颜色?
    AtCoder Regular Contest 125 比赛记录(vp)
  • 原文地址:https://www.cnblogs.com/woshare/p/2763404.html
Copyright © 2011-2022 走看看