不经意间看到了以前写的这个小东西,就贴上来了,支持点击切换和自动轮播,供前端新手看看吧!
代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
< div class = "scroll_div" >
< ul class = "pic" >
< li >< img src = "img/pic_1.jpg" /></ li >
< li >< img src = "img/pic_2.jpg" /></ li >
< li >< img src = "img/pic_3.jpg" /></ li >
< li >< img src = "img/pic_4.jpg" /></ li >
< li >< img src = "img/pic_5.jpg" /></ li >
</ ul >
< ul class = "btn" >
< li >项目一</ li >
< li >项目二</ li >
< li >项目三</ li >
< li >项目四</ li >
< li >项目五</ li >
</ ul >
</ div >
|
html
此处只需将图片路径改成你本地的即可。
1
2
3
4
5
6
7
8
|
.scroll_div{ width : 1000px ; height : 370px ; margin : 0 auto ; padding : 10px ;}
.scroll_div .pic{ width : 820px ; height : 370px ; overflow : hidden ; position : relative ; float : left ;}
.scroll_div .pic li{ width : 820px ; height : 370px ; position : absolute ; top : 0 ; left : 0 ; display : none ;}
.scroll_div .btn{ float : right ; width : 173px ;}
.scroll_div .btn li{ width : 173px ; height : 66px ; display : block ; float : left ; text-align : center ; color : #fff ; font : 18px / 100% "微软雅黑" ; font-weight : bold ; background : #008dd8 ; margin-bottom : 10px ; line-height : 66px ; cursor : pointer ;}
.scroll_div .btn li.on{ background : #d73737 ;}
li { list-style : none ;}
|
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
|
$( function (){
var listLen = $( ".pic li" ).length, i=0,setInter,speen = 3000;
/*图片轮播*/
$( ".btn li:last" ).css({ "margin" : "0px 0px 0px 0px" });
$( ".btn li:first" ).addClass( "on" );
$( ".pic li:first" ).show();
$( ".btn li" ).each( function (index,element){
$(element).click( function (){
i = index;
$( this ).addClass( "on" ).siblings().removeClass( "on" );
$( ".pic li" ).eq(index).animate({opacity: "show" },300).siblings().animate({opacity: "hide" },300);
})
$(element).hover( function (){
clearInterval(setInter);
}, function (){
outPlay();
});
})
out_fun = function (){
if (i < listLen){i++;} else {i=0;};
$( ".btn li" ).eq(i).addClass( "on" ).siblings().removeClass( "on" );
$( ".pic li" ).eq(i).animate({opacity: "show" },300).siblings().animate({opacity: "hide" },300);
}
outPlay = function (){
setInter = setInterval( "out_fun()" ,speen);
}
outPlay();
})
|