圖片輪播
圖片輪播，考慮到動態插入要輪播的圖片以及生成相應的圓點圖標。實現無縫輪播切換。將jquery簡單的封裝了一下，能夠做爲一整個模塊任意使用，class命名不一樣的時候只須要在初始化的時候，改動一下便可。前端剛剛入門，但願你們看到代碼若是以爲有改進的，能夠寫的更簡潔更方便的話，請指教。javascript
html代碼css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<!
DOCTYPE
html>
<
html
lang="en">
<
head
>
<
meta
charset="UTF-8">
<
title
>動態輪播</
title
>
<
link
rel="stylesheet" href="css/base.css">
<
link
rel="stylesheet" href="css/viewpager.css">
</
head
>
<
body
>
<
div
class="wrapper">
<
ul
class="clearfix banner" id="showArea"></
ul
>
<
a
href="javascript:;" class="btnCom btnPrev"><</
a
>
<
a
href="javascript:;" class="btnCom btnNext">></
a
>
<
ul
class="num" id="iconnum"></
ul
>
<
script
type="text/javascript">
var imgsrc=[
{
src:"images/b1.jpg",
url:"#",
picInfo:""
},
{
src:"images/b2.jpg",
url:"#",
picInfo:""
},
{
src:"images/b3.jpg",
url:"#",
picInfo:""
},
{
src:"images/b4.jpg",
url:"#",
picInfo:""
},
{
src:"images/b5.jpg",
url:"#",
picInfo:""
},
{
src:"images/b6.jpg",
url:"#",
picInfo:""
},
];
var showArea=document.getElementById("showArea");
var iconNum=document.getElementById("iconnum");
var picLength=imgsrc.length;
var picDom="";
var iconDom="";
var picwidth=picLength*760;
for(var i=0;i<
picLength
;i++){
var picSrc;
picsrc=imgsrc[i].src;
picDom+='<li><
a
target="_blank" href="'+imgsrc[i].url+'"><
img
alt="'+imgsrc[i].imgInfo+'" src="'+picsrc+'"/></
a
></
li
>';
iconDom+='<
li
></
li
>';
}
showArea.innerHTML=picDom;
showArea.style.width=(picwidth+760)+"px";
iconNum.innerHTML=iconDom;
</
script
>
</
div
>
<
script
src="js/jquery-1.12.0.js"></
script
>
<
script
src="js/viewpager.js"></
script
>
</
body
>
</
html
>
|
CSS代碼：html
|
1
2
3
4
5
6
7
8
9
10
11
|
.wrapper{
position
:
relative
;
margin
:
90px
auto
;
width
:
760px
;
height
:
280px
;
overflow
:
hidden
;
border
:
1px
solid
#333
;}
.wrapper ul.banner{
position
:
absolute
;
top
:
0
;
left
:
0
;
z-index
:
1
;}
.wrapper ul.banner li{
float
:
left
;}
.wrapper ul.banner li img{
width
:
760px
;
height
:
280px
;
border
:
none
;}
.wrapper .btnCom{
display
:
none
;
position
:
absolute
;
top
:
50%
;
margin-top
:
-45px
;
z-index
:
3
;
width
:
40px
;
height
:
90px
;
text-align
:
center
;
line-height
:
90px
;
color
:
#fff
;
background
:rgba(
170
,
170
,
170
,
0.3
);
font-family
:
"microsoft yahei"
;
font-size
:
44px
;}
.wrapper .btnCom:hover{
text-decoration
:
none
;}
.wrapper .btnPrev{
left
:
0px
;}
.wrapper .btnNext{
right
:
0px
;}
.wrapper ul.num{
position
:
absolute
;
left
:
300px
;
bottom
:
0px
;
z-index
:
3
;}
.wrapper ul.num li{
display
:inline-
block
;
margin-right
:
4px
;
width
:
20px
;
height
:
20px
;border-radius:
10px
;
background
:
#333
;
cursor
:
pointer
;}
.wrapper ul.num .on{
background
:
#f40510
;}
|
jquery代碼前端
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
var
viewpager=viewpager || {};
viewpager.i=0;
viewpager={
//參數初始化
init:
function
(){
return
def={
wrapper:$(
".wrapper"
),
btnPrev:$(
".btnPrev"
),
btnNext:$(
".btnNext"
),
item:$(
".banner"
),
iconNum:$(
".num"
),
btnCom:$(
".btnCom"
)
};
},
//左右點擊切換
btnMove:
function
(){
viewpager.init();
def.item.find(
"li"
).eq(0).clone().appendTo(def.item);
def.iconNum.find(
"li"
).eq(0).addClass(
"on"
).siblings().removeClass(
"on"
);
var
length=def.item.find(
"li"
).length;
var
move=
function
(){
if
(i==length){
def.item.css({
"left"
:0});
i=1;
}
if
(i==-1){
def.item.css({
"left"
: -(length - 1) * 760 });
i = length - 2;
}
def.item.stop().animate({
"left"
: -i * 760 });
if
(i == length - 1) {
def.iconNum.find(
"li"
).eq(0).addClass(
"on"
).siblings().removeClass(
"on"
);
}
else
{
def.iconNum.find(
"li"
).eq(i).addClass(
"on"
).siblings().removeClass(
"on"
);
}
};
var
t=setInterval(
function
(){i++;move();},2000);
def.wrapper.hover(
function
(){
clearInterval(t);
def.btnCom.show();
},
function
(){
t=setInterval(
function
(){i++;move();},2000);
def.btnCom.hide();
});
def.btnPrev.click(
function
(){
i--;
move();
});
def.btnNext.click(
function
(){
i++;
move();
})
},
//數字鼠標劃入切換
numMove:
function
(){
viewpager.init();
def.iconNum.find(
"li"
).hover(
function
(){
var
index=$(
this
).index();
i=index;
def.item.stop().animate({
"left"
: -index * 760 });
$(
this
).addClass(
"on"
).siblings().removeClass(
"on"
);
})
}
}
$(document).ready(
function
(){
viewpager.numMove();
viewpager.btnMove();
})
|
相關文章
- 1. 圖片輪播
- 2. js圖片輪播
- 3. Android——圖片輪播
- 4. Android 圖片輪播
- 5. 圖片輪播器
- 6. IOS 圖片輪播
- 7. 圖片的輪播
- 8. jQuery 圖片輪播
- 9. 3_圖片輪播
- 更多相關文章...
- • Markdown 圖片 - Markdown 教程
- • PHP image2wbmp - 輸出WBMP圖片 - PHP參考手冊
- • Flink 數據傳輸及反壓詳解
- • NewSQL-TiDB相關
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 圖片輪播
- 2. js圖片輪播
- 3. Android——圖片輪播
- 4. Android 圖片輪播
- 5. 圖片輪播器
- 6. IOS 圖片輪播
- 7. 圖片的輪播
- 8. jQuery 圖片輪播
- 9. 3_圖片輪播