<html>
<head>
<title>JS图片左右切换效果</title>
<meta charset=
"utf-8"
/>
<style type=
"text/css"
>
*{
margin:0;
padding:0;
}
.images-scroll{
border:1px solid #CCC;
margin:100px auto;
width:300px;
height:200px;
position:relative;
}
.images-scroll ul{
list-style:none;
}
.images-scroll li{
float:left;
display:none;
}
.images-scroll .active{
display:block;
}
.images-scroll a{
}
.images-scroll img{
width:300px;
height:200px;
border:none;
}
.images-scroll .left-scroll{
position:absolute;
top:40%;
left:-40px;
opacity:0;
background:url(
"images/bg_direction_nav.png"
);
background-repeat:no-repeat;
background-position:0px 0px;
height:27px;
width:27px;
cursor:pointer;
}
.images-scroll .right-scroll{
position:absolute;
top:40%;
opacity:0;
right:-40px;
background:url(
"images/bg_direction_nav.png"
);
background-repeat:no-repeat;
background-position:-30px 0px;
height:27px;
cursor:pointer;
width:27px;
}
.images-scroll .right-scroll:hover{
background-color:transparent;
}
</style>
<script src=
"jquery-1.8.2.js"
></script>
</head>
<body>
<p id=
"images-scroll"
class
=
"images-scroll"
>
<ul>
<li
class
=
"active"
><a href=
""
><img src=
"images/1.jpg"
alt=
""
></a></li>
<li><a href=
""
><img src=
"images/2.jpg"
alt=
""
></a></li>
<li><a href=
""
><img src=
"images/3.jpg"
alt=
""
></a></li>
<li><a href=
""
><img src=
"images/4.jpg"
alt=
""
></a></li>
</ul>
<span id=
"left-scroll"
class
=
"left-scroll"
></span>
<span id=
"right-scroll"
class
=
"right-scroll"
></span>
</p>
<script type=
"text/javascript"
>
$(
"#images-scroll"
).mouseover(
function
(){
$(
"#left-scroll"
).animate({left: '10px',opacity:'1',},400);
$(
"#right-scroll"
).animate({right: '10px',opacity:'1',},400);
})
$(
"#images-scroll"
).mouseleave(
function
(){
$(
"#left-scroll"
).animate({left: '-40px',opacity:'0',},400);
$(
"#right-scroll"
).animate({right: '-40px',opacity:'0',},400);
})
imgScroll=setInterval(
"runScroll()"
,3000);
var
last_idx=$(
"#images-scroll ul li"
).index($(
"#images-scroll ul li:last"
));
function
runScroll(){
var
idx=$(
"#images-scroll ul li"
).index($(
"#images-scroll ul .active"
)[0]);
$(
"#images-scroll li"
).eq(idx).removeClass(
"active"
).hide();
idx+=1;
if
(idx%(last_idx+1)==0){
idx=0;
}
$(
"#images-scroll li"
).eq(idx).addClass(
"active"
).show();
}
$(
"#left-scroll"
).click(
function
(){
var
idx=$(
"#images-scroll ul li"
).index($(
"#images-scroll ul .active"
)[0]);
$(
"#images-scroll li"
).eq(idx).removeClass(
"active"
).hide();
idx-=1;
if
(idx==-1){
idx=last_idx;
}
$(
"#images-scroll li"
).eq(idx).addClass(
"active"
).show();
})
$(
"#right-scroll"
).click(
function
(){
runScroll();
})
</script>
</body>
</html>