图片动态切换展示
-涉及知识:
- css
- javascript
- jQuery
- html
这是对之前一个文章项目的改进,使用了jQuery(一个js类库),其实不用jquery也是行的,就如同前一篇文章纯粹的js和css写的。
主要的改进是实现了图片的轮播。这里用到了DOM中window下的一个方法:setInterval();
举个栗子,window.setInterval(“function(){alert(“hello”)}”,3000);
该区别与setTimeout方法,会循环着执行下去,而setTimeout()执行了一次就不执行了。
两种方法各自有各自的用处,视情况而定。
- 学习心得:
- jquery的动画animate和css的动画animation是有区别的,jq的动了就不会回来了,css的做完了动画会立即恢复原状。(观察得到的,实际机理不清楚)
- jq的.click()方法触发对象点击事件,貌似是触发了(极短时间内的)很多下点击,而不是一下点击???
- -
下面是代码(有很多新手和调试的痕迹,勿喷):
注意:需要引入jquery库的js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#imgleft,#imgmiddle,#imgright{
position: absolute;
}
#imgleft{
width: 486px;height: 218px;
top: 10px;left: 0px;
z-index: 1;
opacity: 0.5;
}
#imgmiddle{
width: 486px;height: 228px;
top: 0px;left: 110px;
z-index: 5;
opacity: 1;
}
#imgright{
width: 486px;height: 218px;
top: 10px;left: 220px;
z-index: 3;
opacity: 0.5;
}
</style>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
// setTimeout(function(){
// alert("你好");
// },2000); //执行一次就不执行了
// setInterval(function(){
// alert("你好");
// },2000); //循环执行
setInterval(function(){
imgMove();
},4000);
function imgMove(){
// alert("232")
$("#imgleft").animate({
top:'10px',
left:'220px',
height:'218px',
zIndex:'1',
opacity:'0.5'
},"1000",function(){$("#imgleft").attr('id','imgright');});
$("#imgmiddle").animate({
top:'10px',
left:'0px',
height:'218px',
zIndex:'1',
opacity:'0.5'
},"1000",function(){$("#imgmiddle").attr('id','imgleft');});
$("#imgright").animate({
top:'0px',
left:'110px',
height:'228px',
zIndex:'3',
opacity:'1'
},"1000",function(){
$(".img_right").attr('id','imgmiddle');$("#imgright").attr('class','img_right');
$("#imgleft").attr('class','img_left');
$("#imgmiddle").attr('class','img_middle');
// $(".div_left").delay(3000);//没有
// var t = setTimeout($(".div_left").click(),5000);//不行
// $(".div_left").click();
});//此时不用id选择是因为前面过程导致出现了同名id
// $("#temp").attr('id','ok');//取自己id再改自己id。。。。
}
$(".div_left").click(function a(){
// alert("clicked");
imgMove();
});
});
</script>
</head>
<body>
<div style="position: relative;margin: 0 auto;width: 706px;height: 228px;">
<img id="imgleft" class="img_left" src="img/11.jpg" />
<img id="imgmiddle" class="img_middle" src="img/1.jpg"/>
<img id="imgright" class="img_right" src="img/6.jpg"/>
<div class="div_left" style="width: 30%;height:100%;position: absolute;z-index: 100;"></div>
<div ondblclick="" onmouseover="" style="width: 40%;height:100%;position: absolute;left: 30%; z-index: 98"></div>
<div class="div_right" style="width: 30%;height:100%;position: absolute;left: 70%; z-index: 99;"></div>
</div>
</body>
</html>