信鸽网

基于javascript实现图片左右切换效果

  作者：bea

本文实例介绍了javascript实现图片左右切换效果的详细代码，分享给大家供大家参考，具体内容如下 效果图： 具体代码： <html> <head> <title>JS图片左右切换效果</title> <meta charset="utf-8"/> <style type="text/css"> *{ margin:0; padding:0
本文实例介绍了javascript实现图片左右切换效果的详细代码，分享给大家供大家参考，具体内容如下
效果图：

具体代码：


<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>

<div 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>
</div>
<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>



以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。


有用  |  无用

猜你喜欢

您可能感兴趣的文章: