项目学习

最新推荐文章于 2024-05-20 15:17:08 发布

hjingtao

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量395

点赞数

文章标签： image url javascript filter function class

本文链接：https://blog.csdn.net/hjingtao/article/details/6922603

版权

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

css部分

js部分

<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>

效果;

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

总得来说，继续努力

hjingtao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
项目学习

通过一个星期的项目，学会了一个html+js的特效，学会了一个简单的广告图片幻灯切换效果。css部分 .picshow{z-index:444;position:relative;background-color:#e4f2fa;width:100%;height:200px}.picshow_main{position:relative;width:700px;height:20
复制链接

扫一扫