Skip to content

Commit 9759079

Browse files
amydevyaamydevya
committed
new
1 parent fc6cb3c commit 9759079

76 files changed

Lines changed: 13189 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎10期JS正式课/正式课第四周/第三天/1.渐隐渐现的轮播图.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
*{
8+
margin:0;
9+
padding:0;
10+
list-style: none;
11+
}
12+
.box{
13+
width: 1000px;
14+
height: 300px;
15+
position: relative;
16+
margin:50px auto;
17+
background: url("img/default.gif") no-repeat center #e1e1e1;
18+
}
19+
.box .boxInner{
20+
width: 100%;
21+
height: 100%;
22+
}
23+
.box .boxInner img{
24+
position: absolute;
25+
left:0;
26+
top:0;
27+
width: 100%;
28+
height: 100%;
29+
30+
/*opacity: 0;
31+
filter:alpha(opacity=0);*/
32+
display: none;
33+
z-index: 0;
34+
}
35+
.box .boxInner img.zIndex{
36+
z-index: 1;
37+
opacity: 1;
38+
filter:alpha(opacity=100);
39+
}
40+
.box ul{
41+
position: absolute;
42+
bottom:30px;
43+
right: 30px;
44+
z-index: 10;
45+
}
46+
.box ul li{
47+
width: 20px;
48+
height:20px;
49+
border-radius: 50%;
50+
background: #aaaaaa;
51+
float: left;
52+
margin-left:10px;
53+
}
54+
.box ul li.on{
55+
background: blue;
56+
}
57+
.box a{
58+
z-index: 10;
59+
width: 30px;
60+
height: 45px;
61+
position: absolute;
62+
top:127.5px;
63+
background-image: url("img/pre.png");
64+
background-repeat: no-repeat;
65+
opacity:0.5;
66+
filter:alpha(opacity=50);
67+
display: none;
68+
}
69+
.box a:hover{
70+
opacity:1;
71+
filter:alpha(opacity=100);
72+
}
73+
.box a.left{
74+
left:30px;
75+
background-position: 0 0;
76+
}
77+
.box a.right{
78+
right:30px;
79+
background-position:-52px 0;
80+
}
81+
82+
</style>
83+
</head>
84+
<body>
85+
<div id="box" class="box">
86+
<div class="boxInner">
87+
<!--<img src="img/banner1.jpg" alt="" class="zIndex">
88+
<img src="img/banner2.jpg" alt="">
89+
<img src="img/banner3.jpg" alt="">
90+
<img src="img/banner4.jpg" alt="">-->
91+
</div>
92+
<ul>
93+
<!--<li class="on"></li>
94+
<li></li>
95+
<li></li>
96+
<li></li>-->
97+
</ul>
98+
<a href="javascript:;" class="left"></a>
99+
<a href="javascript:;" class="right"></a>
100+
</div>
101+
<script src="js/jquery-1.11.3.js"></script>
102+
<script src="js/BannerOpacity.js"></script>
103+
<script>
104+
//创建实例
105+
var banner1=new Banner({
106+
id:'#box',
107+
url:'json/data2.txt',
108+
duration:500
109+
});
110+
</script>
111+
</body>
112+
</html>

‎10期JS正式课/正式课第四周/第三天/2.jq运动的问题.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
*{
8+
margin:0;
9+
padding:0;
10+
}
11+
div{
12+
width: 200px;
13+
margin:50px auto;
14+
}
15+
div input{
16+
width: 100%;
17+
height: 40px;
18+
}
19+
div p{
20+
width: 100%;
21+
height: 200px;
22+
background: red;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<div>
28+
<input type="button" value="点击">
29+
<p></p>
30+
</div>
31+
<script src="js/jquery-1.11.3.js"></script>
32+
<script>
33+
$('input').click(function(){
34+
// $('p').slideToggle();
35+
$('p').stop().fadeToggle();
36+
})
37+
</script>
38+
</body>
39+
</html>

‎10期JS正式课/正式课第四周/第三天/img/banner1.jpg‎

192 KB
Loading

‎10期JS正式课/正式课第四周/第三天/img/banner2.jpg‎

216 KB
Loading

‎10期JS正式课/正式课第四周/第三天/img/banner3.jpg‎

194 KB
Loading

‎10期JS正式课/正式课第四周/第三天/img/banner4.jpg‎

60.7 KB
Loading

‎10期JS正式课/正式课第四周/第三天/img/default.gif‎

2.48 KB
Loading

‎10期JS正式课/正式课第四周/第三天/img/error.gif‎

16.5 KB
Loading

‎10期JS正式课/正式课第四周/第三天/img/pre.png‎

2.96 KB
Loading

‎10期JS正式课/正式课第四周/第三天/js/BannerOpacity.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/**
2+
* Created by 39753 on 2016/9/29.
3+
*/
4+
/**
5+
*
6+
* @param opt:
7+
* id:传id元素 或 class元素 或 者标签
8+
* url:可传可不传,不传的时候，按照默认的'json/data.txt'
9+
* @constructor
10+
*/
11+
function Banner(opt){//构造函数
12+
//要定义的全局变量，都作为私有属性放在构造函数里；
13+
opt=opt||{};
14+
this.$box=$(opt.id);
15+
this.url=opt.url||'json/data.txt';
16+
this.duration=opt.duration||1000;
17+
this.$boxInnner=this.$box.find('.boxInner');
18+
this.$aImg=null;
19+
this.$ul=this.$box.find('ul');
20+
this.$aLi=null;
21+
this.$btnLeft=this.$box.find('.left');
22+
this.$btnRight=this.$box.find('.right');
23+
this.data=null;
24+
this.timer=null;
25+
this.n=0;
26+
this.init();//init的调用，必须放在构造函数的最下面；
27+
}
28+
Banner.prototype={//原型
29+
constructor:Banner,
30+
init:function(){//书写核心思路；
31+
var _this=this;
32+
//1.获取并解析数据
33+
this.getData();
34+
//2.绑定数据
35+
this.bind();
36+
//3.延迟加载
37+
this.lazyImg();
38+
//4.渐隐渐现的轮播图
39+
clearInterval(this.timer);
40+
this.timer=setInterval(function(){
41+
_this.autoMove();
42+
},2000)
43+
44+
},
45+
getData:function(){
46+
var _this=this;
47+
$.ajax({
48+
url:_this.url,
49+
type:'GET',
50+
async:false,
51+
cache:false,
52+
dataType:'json',
53+
success:function(val){
54+
_this.data=val;
55+
}
56+
})
57+
},
58+
bind:function(){
59+
var strImg="";
60+
var strLi="";
61+
$.each(this.data,function(index,item){
62+
strImg+='<img src="" realImg="'+item.imgSrc+'" alt="">';
63+
strLi+=index==0?'<li class="on"></li>':'<li></li>';
64+
});
65+
this.$boxInnner.html(strImg);
66+
this.$ul.html(strLi)
67+
},
68+
lazyImg:function(){
69+
var _this=this;
70+
//重新获取img集合，因为JQ中没有DOM映射
71+
this.$aImg=this.$boxInnner.children('img');
72+
$.each(this.$aImg,function(index,item){
73+
var tmpImg=new Image;
74+
tmpImg.src=item.getAttribute('realImg');
75+
tmpImg.onload=function(){
76+
item.src=this.src;
77+
tmpImg=null;
78+
_this.$aImg.eq(0).css('zIndex',1).stop().fadeIn(_this.duration);
79+
}
80+
})
81+
},
82+
autoMove:function(){
83+
if(this.n>=this.$aImg.length-1){
84+
this.n=-1;
85+
}
86+
this.n++;
87+
this.setBanner();
88+
},
89+
setBanner:function(){
90+
var _this=this;
91+
$.each(this.$aImg,function(index,item){
92+
if(index==_this.n){
93+
$(item).css('zIndex',1).siblings().css('zIndex',0);
94+
$(item).stop().fadeIn(_this.duration,function(){
95+
$(this).siblings().stop().hide();
96+
})
97+
}
98+
});
99+
this.bannerTip();
100+
},
101+
bannerTip:function(){
102+
var _this=this;
103+
this.$aLi=this.$ul.find('li');
104+
$.each(this.$aLi,function(index,item){
105+
item.className=index==_this.n?'on':null;
106+
})
107+
}
108+
109+
}

0 commit comments

Comments
 (0)