基于javascript实现图片左右切换效果
发布于 2017-04-05 23:06:23 | 123 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程，程序狗速度看过来！
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
这篇文章主要为大家介绍了基于javascript实现图片左右切换效果，感兴趣的小伙伴们可以参考一下
本文实例介绍了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程序设计有所帮助。
推荐阅读
最新资讯