<!doctype html
>
<
html
>
<
head
>
<
meta
charset=
"utf-8"
>
<
title
>最简单的jQuery轮播图-jq22.com
</
title
>
<
script
src=
"http://libs.baidu.com/jquery/1.9.1/jquery.min.js"
></
script
>
<
style
>
#lunbobox {
width:
500px;
height:
300px;
position:
relative;
}
.lunbo {
width:
500px;
height:
300px;
}
.lunbo img {
width:
500px;
height:
300px;
position:
absolute;
top:
0px;
left:
0px;
}
#lunbobox ul {
width:
285px;
position:
absolute;
bottom:
10px;
right:
0px;
z-index:
5;
}
#lunbobox ul li {
cursor:
pointer;
width:
10px;
height:
4px;
border:
1px
solid
#cccccc;
float:
left;
list-style:
none;
background:
#cccccc;
text-align:
center;
margin:
0px
5px
0px
0px;
}
#toleft {
display:
none;
width:
30px;
height:
100px;
font-size:
40px;
line-height:
100px;
text-align:
center;
color:
#af1f1f;
/*background:#cccccc;
*/
/*background:url("../images/toleft.jpg")no-repeat center;
*/
position:
absolute;
top:
90px;
left:
12px;
cursor:
pointer;
z-index:
99;
opacity:
0.4;
}
#toright {
display:
none;
width:
30px;
height:
100px;
font-size:
40px;
line-height:
100px;
text-align:
center;
color:
#cc1717;
/*background:#cccccc;
*/
position:
absolute;
top:
90px;
right:
0px;
cursor:
pointer;
z-index:
99;
opacity:
0.4;
}
<
/
style
>
</
head
>
<
body
>
<
div
class=
"middle_right"
>
<
div
id=
"lunbobox"
>
<
div
class=
"lunbo"
>
<
a
href=
"#"
><
img
src=
"http://www.jq22.com/img/cs/500x300a.png"
></
a
>
<
a
href=
"#"
><
img
src=
"http://www.jq22.com/img/cs/500x300b.png"
></
a
>
<
a
href=
"#"
><
img
src=
"http://www.jq22.com/img/cs/500x300c.png"
></
a
>
<
a
href=
"#"
><
img
src=
"http://www.jq22.com/img/cs/500x300d.png"
></
a
>
<
a
href=
"#"
><
img
src=
"http://www.jq22.com/img/cs/500x300.png"
></
a
>
</
div
>
<
div
id=
"toleft"
>
<
</
div
>
<
div
id=
"toright"
>
>
</
div
>
<
ul
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
</
ul
>
<
span
></
span
>
</
div
>
</
div
>
<
script
>
///轮播
$(
function() {
$(
"#lunbobox").
hover(
function() {
$(
"#toleft").
show();
$(
"#toright").
show();
},
function(){
$(
"#toleft").
hide();
$(
"#toright").
hide();
})
})
//$("#toright").hide();
//$("#toleft").hide();
// $('#toright').hover(function() {
// $("#toleft").hide()
// }, function() {
// $("#toleft").show()
// })
// $('#toleft').hover(function() {
// $("#toright").hide()
// }, function() {
// $("#toright").show()
// })
// })
var
t;
var
index =
0;
/////自动播放
t =
setInterval(
play,
3000)
function
play() {
index++;
if (
index >
4) {
index =
0
}
// console.log(index)
$(
"#lunbobox ul li").
eq(
index).
css({
"background"
:
"#999",
"border"
:
"1px solid #ffffff"
}).
siblings().
css({
"background"
:
"#cccccc",
"border"
:
""
})
$(
".lunbo a ").
eq(
index).
fadeIn(
1000).
siblings().
fadeOut(
1000);
};
///点击鼠标 图片切换
$(
"#lunbobox ul li").
click(
function() {
//添加 移除样式
//$(this).addClass("lito").siblings().removeClass("lito"); //给当前鼠标移动到的li增加样式 且其余兄弟元素移除样式 可以在样式中 用hover 来对li 实现
$(
this).
css({
"background"
:
"#999",
"border"
:
"1px solid #ffffff"
}).
siblings().
css({
"background"
:
"#cccccc"
})
var
index =
$(
this).
index();
//获取索引 图片索引与按钮的索引是一一对应的
// console.log(index);
$(
".lunbo a ").
eq(
index).
fadeIn(
1000).
siblings().
fadeOut(
1000);
// siblings 找到 兄弟节点(不包括自己）
});
/////////////上一张、下一张切换
$(
"#toleft").
click(
function() {
index--;
if (
index <=
0)
//判断index<0的情况为：开始点击#toright index=0时 再点击 #toleft 为负数了 会出错
{
index =
4
}
console.
log(
index);
$(
"#lunbobox ul li").
eq(
index).
css({
"background"
:
"#999",
"border"
:
"1px solid #ffffff"
}).
siblings().
css({
"background"
:
"#cccccc"
})
$(
".lunbo a ").
eq(
index).
fadeIn(
1000).
siblings().
fadeOut(
1000);
// siblings 找到 兄弟节点(不包括自己）必须要写
});
// $("#imgbox a ")获取到的是一个数组集合 。所以可以用index来控制切换
$(
"#toright").
click(
function() {
index++;
if (
index >
4) {
index =
0
}
console.
log(
index);
$(
this).
css({
"opacity"
:
"0.5"
})
$(
"#lunbobox ul li").
eq(
index).
css({
"background"
:
"#999",
"border"
:
"1px solid #ffffff"
}).
siblings().
css({
"background"
:
"#cccccc"
})
$(
".lunbo a ").
eq(
index).
fadeIn(
1000).
siblings().
fadeOut(
1000);
// siblings 找到 兄弟节点(不包括自己）
});
$(
"#toleft,#toright").
hover(
function() {
$(
this).
css({
"color"
:
"black"
})
},
function() {
$(
this).
css({
"opacity"
:
"0.3",
"color"
:
""
})
})
///
///////鼠标移进 移出
$(
"#lunbobox ul li,.lunbo a img,#toright,#toleft ").
hover(
////////鼠标移进
function() {
$(
'#toright,#toleft').
show()
clearInterval(
t);
},
///////鼠标移开
function() {
//$('#toright,#toleft').hide()
//alert('aaa')
t =
setInterval(
play,
3000)
function
play() {
index++;
if (
index >
4) {
index =
0
}
$(
"#lunbobox ul li").
eq(
index).
css({
"background"
:
"#999",
"border"
:
"1px solid #ffffff"
}).
siblings().
css({
"background"
:
"#cccccc"
})
$(
".lunbo a ").
eq(
index).
fadeIn(
1000).
siblings().
fadeOut(
1000);
}
})
<
/
script
>
</
body
>
</
html
>