项目学习

通过一个星期的项目,学会了一个html+js的特效,学会了一个简单的广告图片幻灯切换效果。

css部分

<style type="text/css">
.picshow{z-index:444;position:relative;background-color:#e4f2fa;width:100%;height:200px}
.picshow_main{position:relative;width:700px;height:200px}
.picshow_main .imgbig{filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4,motion=forward);width:700px;height:200px}
.picshow_change{position:absolute;text-align:left;bottom:0px;height:30px;right:0px;left:160px}
.picshow_change img{width:15px;height:15px}
.picshow_change a{border:1px solid;display:block;float:left;margin-right:5px;-display:inline}
a.axx{border-color:#555}
a.axx:hover{border-color:#000}
a.axx img{filter:alpha(opacity=40);opacity:0.4;-moz-opacity:0.4}
a.axx:hover img{filter:alpha(opacity=100);opacity:1.0;-moz-opacity:1.0}
a.bxx{border-color:#000}
a.bxx:hover{border-color:#000}
img{border:0px}
</style>

js部分

<!--把下面代码加到<body>与</body>之间-->
<script language="javascript">
 //图片滚动展示Start
 var counts = 3;
 img1 = new Image();
 img1.src = '广告1.jpg';
 img2 = new Image();
 img2.src = '广告2.jpg';
 img3 = new Image();
 img3.src = '广告3.jpg';
 var smallImg = new Array();
 //小图
 smallImg[0] = 'http://www.CsrCode.cn/html/txdm_2/images/20100829/index_adb1.gif';
 smallImg[1] = 'http://www.CsrCode.cn/html/txdm_2/images/20100829/index_adb2.gif';
 smallImg[2] = 'http://www.CsrCode.cn/html/txdm_2/images/20100829/index_adb3.gif';
 //alt值
 alt1 = new Image();
 alt1.alt = '1';
 alt2 = new Image();
 alt2.alt = '2';
 alt3 = new Image();
 alt3.alt = '3';
 //链接地址
 url1 = new Image();
 url1.src = '广告1.jpg';
 url2 = new Image();
 url2.src = '广告2.jpg';
 url3 = new Image();
 url3.src = '广告3.jpg';
 var nn = 1;
 var key = 0;
 function change_img() {
  if (key == 0) {
   key = 1;
  } else if (document.all) {
   document.getElementById("pic").filters[0].Apply();//表示获取页面上id="filterFrom"的元素。.filters表示刚那个元素下面有一个名字为filters的元素,item(0)表示filters元素中的第一个项目,最后是执行它的Apply()方法。
   document.getElementById("pic").filters[0].Play(duration = 2);
  }
  eval('document.getElementById("pic").src=img' + nn + '.src');
  eval('document.getElementById("url").href=url' + nn + '.src');
  eval('document.getElementById("pic").alt=alt' + nn + '.alt');
  if (nn == 1) {
   document.getElementById("url").target = "_blank";
   document.getElementById("url").style.cursor = "pointer";//改变标签样式
  } else {
   document.getElementById("url").target = "_blank"
   document.getElementById("url").style.cursor = "pointer"
  }
  for ( var i = 1; i <= counts; i++) {
   document.getElementById("xxjdjj" + i).className = 'axx';
  }
  document.getElementById("xxjdjj" + nn).className = 'bxx';
  nn++;
  if (nn > counts) {
   nn = 1;
  }
  tt = setTimeout('change_img()', 7000);
 }
 function changeimg(n) {
  nn = n;
  window.clearInterval(tt);
  change_img();
 }
 function ImageShow() {
  document.write('<div class="picshow_main">');
  document.write('<div><a id="url"><img id="pic" class="imgbig" /></a></div>');
  document.write('<div class="picshow_change">');
  for ( var i = 0; i < counts; i++) {
   document.write('<a href="javascript:changeimg(' + (i + 1)
     + ');" id="xxjdjj' + (i + 1)
     + '" class="axx" target="_self"><img src="' + smallImg[i]
     + '"></a>');
  }
  document.write('</div></div>');
  change_img();
 }
 //图片滚动展示End
</script>
<script language="javascript" type="text/javascript">
 ImageShow();
</script>

效果;

项目学习_第1张图片

这次项目,还是发现了一些自己的缺陷,发现了自己的一些不足吧,知道一些知识点,但是却很陌生,不知道如何的去应用,所以还是要多加的练习的。

总得来说,继续努力

你可能感兴趣的:(项目学习)