基于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程序设计有所帮助。
相关推荐
-
JavaScript+html5 canvas制作色彩斑斓的正方形效果
本文实例讲述了JavaScript+html5 canvas制作色彩斑斓的正方形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的透明度</t
-
JavaScript实现仿淘宝商品购买数量的增减效果
近期在开发一个地方O2O租书项目,使用ASP.NET MVC技术,其中在图书详情页,用户可以输入借阅的数量,这里使用了js来控制数量的增减和校验. 1.数量一定是数字 2.点击增减按钮的时候要能自动加1或减1 3.用户输入的内容如果是非数字,则不能输入(退格键除外) 4.用户输入的值最小为1 5.输入框离开焦点时要检查取值范围,确保输入框中必须是范围内的数字 基本就是以上几点 效果如下: 以下是Html代码 <div class="bookNum"> <a id=&q
-
JavaScript+html5 canvas制作的圆中圆效果实例
本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { background:#F2F2F2; height:500px; height:500px; mar
-
javascript实现图片轮播效果
本文实例介绍了javascript实现图片轮播效果的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0
-
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { margin:50px; border:5px solid gray; box-shadow:0p
-
JavaScript+html5 canvas绘制的小人效果
本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的缩放</tit
-
APP中javascript+css3实现下拉刷新效果
原生app里的数据列表都会使用下拉刷新的效果,在webapp里可以采用iscroll.swiper等插件或框架实现,那么如何自己编码实现类似的效果呢,下面介绍使用原生js+css3实现的简单效果. html布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-
-
js实现的彩色方块飞舞奇幻效果
本文实例讲述了js实现的彩色方块飞舞奇幻效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } ul { list-style:none; margin:0; padding:0; } li
-
JavaScript+html5 canvas制作的百花齐放效果完整实例
本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { border:5px solid gra
-
基于javascript实现图片左右切换效果
本文实例介绍了javascript实现图片左右切换效果的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <title>JS图片左右切换效果</title> <meta charset="utf-8"/> <style type="text/css"> *{ margin:0; padding:0; } .images-scroll{ border:
-
基于JavaScript实现Tab选项卡切换效果
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .box { width: 500px; height: 400px
-
基于JavaScript实现图片剪切效果
学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第一层opacity,给图层设置透明度 2.第二层clip,clip属性:对图片进行裁剪,实现图像的一部分显示,其他部分进行隐藏 3.第三层选取框absolute(与第二层重叠的),包括八个触点的效果 html代码: <div id="box"> <img src=&quo
-
基于jQuery实现图片推拉门动画效果的两种方法
''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul> <!-- <li></li> --> <li&g
-
javascript实现图片左右滚动效果【可自动滚动，有左右按钮】
本文实例讲述了javascript实现图片左右滚动效果.分享给大家供大家参考,具体如下: html代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <
-
Javascript实现图片轮播效果(一)让图片跳动起来
图片轮播效果,在各大网站的首页都能看到,比较常见.下面小编给大家分享这一效果的简单实现. 1.图片跳动起来 2.图片序列控制的实现 3.前后按钮控制的实现 这篇文章来看图片按照间隔时间进行切换. 我们先把结构代码完成,这个我就不做详细的讲解了.先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
-
js实现同一页面可多次调用的图片幻灯切换效果
本文实例讲述了js实现同一页面可多次调用的图片幻灯切换效果.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
-
JS实现的文字与图片定时切换效果代码
本文实例讲述了JS实现的文字与图片定时切换效果代码.分享给大家供大家参考.具体如下: 这是近来门户们都喜欢用的特效,左侧是一个大图片,右侧是对应文字,鼠标移动时,对应行的文字会变化,图片也相应的切换,如果没有鼠标动作时,它会自己播放,播放时间可调整,个人感觉挺不错的导航效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-txt-pic-time-cha-tab-codes/ 具体代码如下: <head> <meta http-e
-
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
本文实例讲述了JS+CSS实现淡入式焦点图片幻灯切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999
-
jQuery bxCarousel实现图片滚动切换效果示例代码
BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: ◆ 可以指定显示的元素总数 ◆ 可以指定每次滚动的元素个数 ◆ 自动播放模式 ◆ 前一张/后一张按钮控制图片流动 参数含义: display_num:显示元素的数量,几张图片 move:单击左右控制键时,移动的元素个数,此处为移动2张图片 prev_image:上一元素按钮图片 next_image:下一元素按钮图片 margin:图片之间的间隙,一般设为10px auto:自动滚动效果 controls:是否