Skip to content

Commit 932cb27

Browse files
author
dreamofei
committed
2015.12.10_2
1 parent f96db6d commit 932cb27

9 files changed

Lines changed: 158 additions & 15 deletions

File tree

‎Libs/Css/Custom/forSlideImg.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
#box_yingxinslide {
2+
position:relative;
3+
/*width:492px;*/
4+
/*height:172px;*/
5+
height:100%;
6+
background:#fff;
7+
border-radius:5px;
8+
border:8px solid #fff;
9+
margin:10px auto;
10+
cursor:pointer;
11+
}
12+
#box_yingxinslide .list {
13+
position:relative;
14+
/*width:490px;*/
15+
height:100%;
16+
overflow:hidden;
17+
}
18+
#box_yingxinslide .list ul {
19+
list-style-type:none;
20+
position:absolute;
21+
top:0;
22+
left:0;
23+
width:100000px;
24+
}
25+
#box_yingxinslide .list li {
26+
width:490px;
27+
height:170px;
28+
overflow:hidden;
29+
float:left;
30+
}
31+
#box_yingxinslide .count {
32+
position:absolute;
33+
right:0;
34+
bottom:5px;
35+
}
36+
#box_yingxinslide .count li {
37+
color:#fff;
38+
float:left;
39+
width:20px;
40+
height:20px;
41+
cursor:pointer;
42+
margin-right:5px;
43+
overflow:hidden;
44+
background:#F90;
45+
opacity:0.7;
46+
filter:alpha(opacity=70);
47+
border-radius:20px;
48+
text-align:center;
49+
}
50+
#box_yingxinslide .count li.current {
51+
color:#fff;
52+
opacity:1;
53+
filter:alpha(opacity=100);
54+
font-weight:700;
55+
background:#f60;
56+
text-align:center;
57+
}
58+
#tmp {
59+
width:100px;
60+
height:100px;
61+
background:red;
62+
position:absolute;
63+
}

‎Libs/Js/ctrls/mainCtrl.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,87 @@
11
mainMoudle.controller('slideImgCtrl', ['$scope', function ($scope) {
22

3+
$scope.slideImgs = [
4+
{ img: "/Sources/imgs/slideImg/01.jpg" },
5+
{ img: "/Sources/imgs/slideImg/02.jpg" },
6+
{ img: "/Sources/imgs/slideImg/03.jpg" },
7+
{ img: "/Sources/imgs/slideImg/04.jpg" },
8+
{ img: "/Sources/imgs/slideImg/05.jpg" }
9+
];
10+
11+
//slideImg
12+
var $ = function (id) { return typeof id === "string" ? document.getElementById(id) : id };
13+
var $$ = function (tagName, oParent) { return (oParent || document).getElementsByTagName(tagName) };
14+
//自动播放对象
15+
var AutoPlay = function (id) { this.initialize(id) };
16+
AutoPlay.prototype = {
17+
initialize: function (id) {
18+
var oThis = this;
19+
this.oBox = $(id);
20+
this.oUl = $$("ul", this.oBox)[0];
21+
this.aImg = $$("img", this.oBox);
22+
this.timer = null;
23+
this.autoTimer = null;
24+
this.iNow = 0;
25+
this.creatBtn();
26+
this.aBtn = $$("li", this.oCount);
27+
this.toggle();
28+
this.autoTimer = setInterval(function () {
29+
oThis.next()
30+
}, 3000);
31+
this.oBox.onmouseover = function () {
32+
clearInterval(oThis.autoTimer)
33+
};
34+
this.oBox.onmouseout = function () {
35+
oThis.autoTimer = setInterval(function () {
36+
oThis.next()
37+
}, 3000)
38+
};
39+
for (var i = 0; i < this.aBtn.length; i++) {
40+
this.aBtn[i].index = i;
41+
this.aBtn[i].onmouseover = function () {
42+
oThis.iNow = this.index;
43+
oThis.toggle()
44+
}
45+
}
46+
},
47+
creatBtn: function () {
48+
this.oCount = document.createElement("ul");
49+
this.oFrag = document.createDocumentFragment();
50+
this.oCount.className = "count";
51+
for (var i = 0; i < this.aImg.length; i++) {
52+
var oLi = document.createElement("li");
53+
oLi.innerHTML = i + 1;
54+
this.oFrag.appendChild(oLi)
55+
}
56+
this.oCount.appendChild(this.oFrag);
57+
this.oBox.appendChild(this.oCount)
58+
},
59+
toggle: function () {
60+
for (var i = 0; i < this.aBtn.length; i++) this.aBtn[i].className = "";
61+
this.aBtn[this.iNow].className = "current";
62+
//this.doMove(-(this.iNow * this.aImg[0].offsetHeight))
63+
this.doMove(-(this.iNow * this.aImg[0].offsetWidth))
64+
},
65+
next: function () {
66+
this.iNow++;
67+
this.iNow == this.aBtn.length && (this.iNow = 0);
68+
this.toggle()
69+
},
70+
doMove: function (iTarget) {
71+
var oThis = this;
72+
clearInterval(oThis.timer);
73+
oThis.timer = setInterval(function () {
74+
var iSpeed = (iTarget - oThis.oUl.offsetLeft) / 5;
75+
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
76+
oThis.oUl.offsetLeft == iTarget ? clearInterval(oThis.timer) : (oThis.oUl.style.left = oThis.oUl.offsetLeft + iSpeed + "px")
77+
}, 30)
78+
}
79+
};
80+
$scope.setScroll = function () {
81+
new AutoPlay("box_yingxinslide");
82+
};
83+
//end slideImg
84+
385
}])
486
.controller('sideMenuCtrl', function ($scope) {
587
$scope.sideMenu = [

‎Sources/imgs/slideImg/01.jpg‎

25.1 KB
Loading

‎Sources/imgs/slideImg/02.jpg‎

32.3 KB
Loading

‎Sources/imgs/slideImg/03.jpg‎

32.6 KB
Loading

‎Sources/imgs/slideImg/04.jpg‎

32.8 KB
Loading

‎Sources/imgs/slideImg/05.jpg‎

20.1 KB
Loading

‎Views/main.html‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<style type="text/css">
22

33
</style>
4+
<link href="../Libs/Css/Custom/forSlideImg.css" rel="stylesheet" />
45
<script type="text/javascript">
56
$(document).ready(function () {
67
alert("ready");
@@ -35,14 +36,20 @@ <h3><i class="fa fa-list-ul fa-margin" style="color: #d7000f;padding-left:10px;"
3536
</div>
3637
<div class="col-md-9 sideMenuAndSlideImg" ng-controller="slideImgCtrl">
3738

38-
<div id="myCarousel" class="carousel slide">
39-
<!-- Indicators -->
39+
<div id="box_yingxinslide" class="row">
40+
<div class="list">
41+
<ul>
42+
<li ng-repeat="img in slideImgs" on-finish-render="setScroll()"><img ng-src="{{img.img}}" width="490" height="170" /></li>
43+
</ul>
44+
</div>
45+
</div>
46+
47+
<!--<div id="myCarousel" class="carousel slide">
4048
<ol class="carousel-indicators">
4149
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
4250
<li data-target="#myCarousel" data-slide-to="1"></li>
4351
</ol>
4452
45-
<!-- Wrapper for slides -->
4653
<div class="carousel-inner">
4754
<div class="item active">
4855
<img src="/Sources/imgs/slide3.png" alt="slide3">
@@ -57,17 +64,8 @@ <h3><i class="fa fa-list-ul fa-margin" style="color: #d7000f;padding-left:10px;"
5764
</div>
5865
</div>
5966
</div>
60-
61-
<!-- Controls -->
62-
<!--<a class="left carousel-control" href="#myCarousel" data-slide="prev">
63-
<span class="fa fa-chevron-left" aria-hidden="true"></span>
64-
<span class="sr-only">Previous</span>
65-
</a>
66-
<a class="right carousel-control" href="#myCarousel" data-slide="next">
67-
<span class="fa fa-chevron-right" aria-hidden="true"></span>
68-
<span class="sr-only">Next</span>
69-
</a>-->
70-
</div>
67+
68+
</div>-->
7169

7270
</div>
7371
</div>

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
<img src="/Sources/imgs/R1.png" style="height:100px;" />
3131
</div>
3232
<div class="col-md-2">
33-
<div style="margin-top:40px;">
33+
<div style="margin-top:16%;">
3434
<i class="fa fa-phone fa-2x fa-margin"></i>联系电话：000-11111111
3535
</div>
3636
</div>

0 commit comments

Comments
 (0)