Skip to content

Commit 408687e

Browse files
yangxi0126yangxi0126
committed
一些前端特效
1 parent 907c4eb commit 408687e

File tree

17 files changed

+795
-0
lines changed

17 files changed

+795
-0
lines changed

‎.idea/.name

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/encodings.xml

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/javaScript.iml

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/misc.xml

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/modules.xml

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/vcs.xml

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/workspace.xml

Lines changed: 226 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎slider1.2/css/slider1.2.css

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
.slider-box{
2+
position:relative;
3+
}
4+
.slider_cube,.slider_inner_a,.slider_inner_b{
5+
position:absolute;
6+
width:100%;
7+
height:100%;
8+
overflow:hidden;
9+
}
10+
.slider_nav_box{
11+
position:absolute;
12+
right:0;
13+
bottom:25%;
14+
}
15+
.slider_nav_title{
16+
background:url(http://i1.tietuku.com/87ec913b390798fa.png) repeat center right;
17+
min-width:150px;
18+
height:100px
19+
}
20+
.slider_nav{
21+
background:url(http://i1.tietuku.com/87ec913b390798fa.png) no-repeat;
22+
height:18px;
23+
min-width:100px;
24+
}
25+
.slider_bar{
26+
position:absolute;
27+
width:100%;
28+
text-align:center;
29+
bottom:10px;
30+
height:20px;
31+
}
32+
.slider_bar span{
33+
display:inline-block;
34+
margin:0 10px;
35+
width:14px;
36+
height:14px;
37+
background:#B7B7B7;
38+
cursor:pointer;
39+
border-radius:20px;
40+
box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
41+
-webkit-transition:.3s;
42+
-moz-transition:.3s;
43+
-ms-transition:.3s;
44+
-o-transition:.3s;
45+
transition:.3s;
46+
}
47+
.slider_bar span:hover{
48+
background:#333;
49+
background:rgba(0,0,0,0.7);
50+
}
51+
.slider_bar span.active{
52+
background:#F40;
53+
background:rgba(255,68,0,0.9);
54+
cursor:default;
55+
}

‎slider1.2/img/1.jpg

147 KB
Loading

‎slider1.2/img/2.jpg

123 KB
Loading

‎slider1.2/img/3.jpg

89 KB
Loading

‎slider1.2/img/4.png

347 KB
Loading

‎slider1.2/img/5.png

446 KB
Loading

‎slider1.2/img/6.png

359 KB
Loading

‎slider1.2/index.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<link rel="stylesheet" href="css/slider1.2.css">
7+
<style>
8+
*{
9+
margin: 0;
10+
padding: 0;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<div id="modelSlider" style="margin: auto;width: 1280px;"></div>
16+
</body>
17+
<script src="js/jquery-1.9.1.min.js"></script>
18+
<script src="js/slider1.2.js"></script>
19+
<script>
20+
$("#modelSlider").slider({
21+
imgs: [ //图片的地址
22+
"img/1.jpg",
23+
"img/2.jpg",
24+
"img/3.jpg",
25+
"img/4.png",
26+
"img/5.png",
27+
"img/6.png"
28+
],
29+
// urls: [ //点击图片跳转到的地址，也可以如下放一段js
30+
// 'javascript:makeDialog("轮显提示或者地址","第1个图",function(){},3)',
31+
// 'javascript:makeDialog("轮显提示或者地址","第2个图",function(){},3)',
32+
// 'javascript:makeDialog("轮显提示或者地址","第3个图",function(){},3)',
33+
// 'javascript:makeDialog("轮显提示或者地址","第4个图",function(){},3)',
34+
// 'javascript:makeDialog("轮显提示或者地址","第5个图",function(){},3)',
35+
// 'javascript:makeDialog("轮显提示或者地址","第6个图",function(){},3)'
36+
// ],
37+
scale: 128 / 36, //图片宽高比 卧槽这里是定义整个box的宽高的，所以#modelSlider只需要给一个宽度就行了
38+
border: true, //是否显示分界线
39+
showBar: true, //是否可以人工切换 如果只保留一种切换方式，目前只找到一种方法，把源码中的effects数组里面的不需要的方法注释掉。。。应该有其他方法
40+
x: 10, //横向格子数
41+
y: 3, //纵向格子数
42+
interval:3000
43+
});
44+
</script>
45+
</html>

‎slider1.2/js/jquery-1.9.1.min.js

Lines changed: 62 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)