<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<title></title>
</head>
<script src=
"js/jquery.min.js"
></script>
<style>
.banner{
margin:0 auto;
border: 4px dashed black;
width:400px;
height:200px;
position: relative;
overflow:hidden;
}
.banner a{
z-index: 100;
display: block;
width:100%;
height: 100%;
position: absolute;
left:100%;
top:0;
}
.banner .first{
left:0;
}
.banner a img{
width:100%;
height: 100%;
}
.choose{
z-index: 1000;
position: absolute;
left:150px;
top:180px;
width:100px;
height: 10px;
}
.choose span{
margin-right: 15px;
float: left;
display:block;
background: blue;
width:10px;
height: 10px;
border-radius: 10px;
}
.choose span:hover{
background: red;
}
.choose .red{
background: red;
}
.banner .pre,.next{
cursor:pointer;
text-align:center;
border-radius:20px;
display:block;
background:#cccccc;
opacity:0.4;
text-decoration: none;
z-index: 200;
display:block;
width:40px;
height: 40px;
font-size: 40px;
color:red;
position: absolute;
top:80px;
}
.banner .pre{
left:0px
}
.banner .next{
right: 0px;
}
</style>
<body>
<div
class
=
"banner"
>
<!--
这里为上一页下一页点击按钮
-->
<span
class
=
"pre"
>-</span>
<span
class
=
"next"
>+</span>
<!--
此处为轮播主体,颜色块代替。图片自加
-->
<a href=
"###"
class
=
"first"
style=
"background: pink;"
></a>
<a href=
"###"
style=
"background: blue;"
><img src=
"images/banner1.jpg"
/></a>
<a href=
"###"
style=
"background: greenyellow;"
><img src=
"images/banner2.jpg"
/></a>
<a href=
"###"
style=
"background: deepskyblue;"
><img src=
"images/banner3.jpg"
/></a>
<!--
此处为轮播部分下方小点选择
-->
<div
class
=
"choose"
>
<span
class
=
"red"
></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
var
$index
=0;
var
$exdex
=0;
$(
".choose span"
).mouseover(
function
(){
$index
=$(this).index();
$(
".choose span"
).eq(
$index
).addClass(
"red"
).siblings().
removeClass(
"red"
);
if
(
$index
>
$exdex
){
next();
}
else
if
(
$index
<
$exdex
){
pre();
}
return
$exdex
=
$index
;
});
$(
".next"
).click(
function
(){
$index
++;
if
(
$index
>3){
$index
=0
}
$(
".choose span"
).eq(
$index
).addClass(
"red"
).siblings().
removeClass(
"red"
);
next();
return
$exdex
=
$index
;
});
$(
".pre"
).click(
function
(){
$index
--;
if
(
$index
<0){
$index
=3
};
$(
".choose span"
).eq(
$index
).addClass(
"red"
).siblings().
removeClass(
"red"
);
pre();
return
$exdex
=
$index
;
});
var
atime=setInterval(
function
(){
$(
".next"
).click();
},1000);
function
next(){
$(
".banner a"
).eq(
$index
).stop(true,true).
css(
"left"
,
"100%"
).animate({
"left"
:
"0"
});
$(
".banner a"
).eq(
$exdex
).stop(true,true).
css(
"left"
,
"0"
).animate({
"left"
:
"-100%"
});
}
function
pre(){
$(
".banner a"
).eq(
$index
).stop(true,true).
css(
"left"
,
"-100%"
).animate({
"left"
:
"0"
});
$(
".banner a"
).eq(
$exdex
).stop(true,true).
css(
"left"
,
"0"
).animate({
"left"
:
"100%"
});
}
</script>
</body>
</html>