基于javascript实现图片左右切换效果
更新时间：2016年01月25日 16:49:59 作者：马富天
这篇文章主要为大家介绍了基于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程序设计有所帮助。
相关文章
这篇文章主要给大家爱介绍了关于WebSocket的通信过程与实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧2018-04-04
JS 中document.URL 和 windows.location.href 的区别
实际上，document 和 windows 这两个对象的区别已经包含了这个问题的答案。2009-11-11
这篇文章主要介绍了Bootstrap CSS布局之代码的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了JS获取指定月份的天数两种实现方法,需要的朋友可以参考下2018-06-06
这篇文章主要给大家介绍了关于微信小程序授权登录的优雅处理方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
通过本文给大家简单介绍下JavaScript重载函数的相关知识，在js中有没有重载函数这个概念呢？很多朋友都很模糊，说不太清楚，下面通过本文给大家介绍js重载函数，一起学习吧2016-05-05
js产生随机数通常是使用javascript的Math.random()函数,下面这篇文章主要给大家介绍了关于JS生成随机数的多种方法(不同范围、类型的随机数)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了JS精确判断数据类型代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了JavaScript 反射和属性赋值实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
JavaScript的removeChild()函数用法详解
removechild 函数可以删除父元素的指定子元素，通过本文给大家介绍javascript的removeChild()函数用法，对js removechild函数相关知识感兴趣的朋友一起学习吧2015-12-12
最新评论