`
又见刚刀
  • 浏览: 2609 次
  • 性别: Icon_minigender_1
  • 来自: 温州
最近访客 更多访客>>
社区版块
存档分类
最新评论

实现图片轮流切换

阅读更多
<!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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="jquery-132-min.js"></script>
<title>无标题文档</title>
<style >
.dangc{ float:left;}
</style>
</head>
<script language="javascript">
$(document).ready(function(){
img1=new Image();img2=new Image(); img3=new Image();
img1.src="1.png";img2.src="2.png";img3.src="3.png";
var i=0;
function qih(){
i=i+1
if (i>3) i=1;
$('.dangc').html('<img src="'+i+'.png" width="468" height="390" border="0" usemap="#Map" />');
}
var timer=setInterval(qih,1000);
})

function slit(ints){
$('.dangc').html('<img src="'+ints+'.png" width="468" height="390" border="0" usemap="#Map" />');
}
</script>
<body>
<div>
<div>
<div class="dangc"><img src="1.png" width="468" height="390" border="0" usemap="#Map" /></div>
  <map name="Map" id="Map">
    <area shape="rect" coords="151,12,391,97"    onmousemove="slit('1')" />
    <area shape="rect" coords="376,132,483,347"     onmousemove="slit('3')"  />
    <area shape="rect" coords="45,107,154,320"    onmousemove="slit('2')"  />
  </map>
<img src="right.png" width="532" height="390" />

</div>
</body>
</html>
分享到:
评论

相关推荐

    图片轮流切换的小程序

    目前一些网站都带图片每隔一段时间就换一张图片的比较显眼的功能,查了一些网站都是采用flash做的。笔者这里收集了一个直接利用js调用实现图片轮流切换,鼠标点击跳到对应url的功能。

    图片切换轮流显示效果

    实现图片切换轮流显示,sdjffjwqejrewfjksdfksdfkdsjvnkdsnvkdsfkdsfdsfsdfsdfdsfsdf

    handler图片切换

    利用handler实现图片的切换,点击之后可以几张图片轮流切换

    带缩略图导航的图片切换,JS Css实现.rar

    四屏缩略图图片切换JS版,形式经典,四幅图片轮流显示,代码有一个函数封装文件,有一个类似页卡的函数.设置对应内容的隐藏和显示 obj:元素的id name:元素对应的name属性的值, t:对应内容的标签 num:当前选择的元素...

    右侧小图片的Js图片切换特效.rar

    经典的图片切换特效,右侧显示小图片,也就是缩略图,鼠标放在缩略图上时,大图就会自动切换,鼠标不活动时,图片会自动播放轮流切换,核心JS原生代码实现。

    javascript切换图片

    几张图片切换轮流出现,不用flash实现

    html5 SVG模糊效果的焦点图切换、菜单、页面切换动画.rar

    本效果集成了三款常用网页特效的模糊动画效果,运用HTML5 SVG技术实现的运动模糊动画效果,焦点图切换时以模糊效果变清淅的方式轮流显示图片,菜单切换时同样运动模糊,另外还有页面边栏导航的模糊切换效果,十分...

    各种图片转场技巧和过渡特效

    转场技巧和过渡特效,能做出幻灯片的奇妙效果,用于演示、软件界面或者关于窗口,对于图片处理编程,也可学习一二。

    图片轮播(自己实现)

    NULL 博文链接:https://zccst.iteye.com/blog/2072393

    用jQuery实现圆点图片轮播效果

    在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接; 点击图片左下的标签(或中间的小圆点)切换到对应的图片; 点击图片的左右切换标签;   整体思路 : ————————————————————...

    微信小程序实现滑动切换自定义页码的方法分析

    这里三个图片使用了swiper组件进行轮播,下方的页码数字1、2、3会随着图片的切换变动位置 在微信小程序中我们是无法操作dom的,那么 var div = document.getElementById('id'); div.setAttribute(class, className)...

    jQuery 锚点链接平滑移动切换显示代码.rar

    基于jQuery的锚链接平滑移动效果,点击一个链接,会看到一...延伸一点来说,不知大家是否能联想到多张图片轮流切换的效果没?把每个Div层内旋转一张图片,是不是就轻易实现 了这种效果?再加上你的美化,就慢慢完美了……

    js实现从左向右滑动式轮播图效果

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果。轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是...

    C#程序设计-四季轮替程序(附源码).doc

    效果:单击按钮之后,一次轮流出现春夏秋冬的字样和对应的图片循环切换。 预览: 原资源图片: 准备: 一个按钮 一个pictureBox 一个timer 源代码: using System; using System.Collections.Generic; using System...

    jQuery 锚链接平滑移动效果

    内容索引:脚本资源,Ajax/JavaScript,图片切换 基于...延伸一点来说,不知大家是否能联想到多张图片轮流切换的效果没?把每个Div层内旋转一张图片,是不是就轻易实现 了这种效果?再加上你的美化,就慢慢完美了……

    asprain论坛Access版 v1.0 build 20100228

    在asprain里,用户切换隐身/在线状态、更换自己的头像、版主删除水帖、加亮优秀帖等很多操作,都只要一键完成,不需要页面刷新或者跳转。asprain论坛还支持版主批量删帖、转移帖子、将帖子设为精华等等操作,并支持...

Global site tag (gtag.js) - Google Analytics