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>

  • 相关阅读:
    hdu 1260 Tickets
    hdu 4738 Caocao's Bridges(桥的最小权值+去重)
    找规律
    C语言快速排序
    数组的初始化方法
    C语言选择排序
    副本机制
    安装完Kali的后续操作
    Bool盲注
    Python中的列表
  • 原文地址:https://www.cnblogs.com/woshare/p/2763404.html
Copyright © 2011-2022 走看看