Jquery实现简单图片切换

代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var t;
        var speed = 2;//图片切换速度
        var nowlan=0;//图片开始时间
        function changepic() {
            var imglen = $("div[name='pic']").find("div").length;
            $("div[name='pic']").find("div").hide();
            $("div[name='pic']").find("div").eq(nowlan).show();
            nowlan = nowlan+1 ==imglen ?0:nowlan + 1;
            t = setTimeout("changepic()", speed * 1000);
        }
        onload = function () { changepic(); }
        $(document).ready(function () {
            //鼠标在图片上悬停让切换暂停
            $("div[name='pic']").hover(function () { clearInterval(t); });
            //鼠标离开图片切换继续
            $("div[name='pic']").mouseleave(function () { changepic(); });
        });
    </script>
</head>
<body>
   <div name="pic" style="float:left; position:relative;overflow:hidden;width:300px;height:240px;" >
       <div><img  width="300" height="240"  src="Chrysanthemum.jpg" alt="1"/></div>
         <div><img width="300" height="240"  src="Desert.jpg" alt="2"/></div>
           <div><img width="300" height="240"  src="Hydrangeas.jpg" alt="3"/></div>
   </div>
</body>
</html>

转载于:https://www.cnblogs.com/lecone/archive/2011/01/06/1927688.html

Jquery实现简单图片切换相关推荐

jQuery实现简单图片的轮播(自右向左播放)
简单的轮播大概内容分为如下三点: 1.轮播图片的存储: 2.轮播的样式(注意:图片存储的总宽度,以及图片移动相对元素的定位的元素): 3.JQuery中的计时器调用动画移动图片轮播. 一.carous ...
html+css+jquery,html+css+js(+JQuery)制作扑克牌图片切换效果
先把静态页面写出来: index.html jquery制作扑克牌图片切换效果此时的效果是这样的: 分析: 背景颜色图片的位置图片的边框.圆角以及阴影让图片动起来 index.css代码: * ...
126.如何使用CSS和 JS 创建简单图片切换
效果 (源码网盘地址在最后) 视频演示视频地址:https://www.ixigua.com/6914222592170263053/ 源码 index.html <!DOCTYPE html ...
jquery仿凡客诚品图片切换的效果实例代码
清远大学城网(http://www.qydxc.com) 是一个不错的图片切换效果,就是可以图片带文字说明的折叠效果,下面我来给大家推荐两个版本的效果,有需要了解的朋友可参考. 图片版的效果代码如下复 ...
html实现简单图片切换,JavaScript实现简单的图片切换
JavaScript实现图片切换,主要用到setInterval()函数和clearInterval()函数,前者功能是开启动画,后者功能则为清除动画(可理解为使动画停止),为了使动画停止,则需要定义 ...
用jQuery实现banner图片切换
主要运用了定时器的原理,bind,trigger应用等 <!DOCTYPE html> <html> <head> <meta charset=&qu ...
分享111个JS图片切换特效，总有一款适合您
分享111个图片切换,总有一款适合您下面是文件的名字,我放了一些图片,文章里不是所有的图主要是放不下..., 111个图片切换下载链接:https://pan.baidu.com/s/1iGzOzU ...
分享113个图片切换JS特效，总有一款适合您
分享113个图片切换JS特效,总有一款适合您 113个图片切换JS特效下载链接:https://pan.baidu.com/s/1NNSP-DMf3n0PeNbdNd8jEg?pwd=sfwr 提取 ...
jQuery实现点击开关图片切换
原型大概是这样的 image 需求:点击右侧的蓝色眼睛,会变成关键代码: /* 实现图片切换 */$(".imgclick").toggle(function(){$(this) ...

Jquery实现简单图片切换

Jquery实现简单图片切换相关推荐

最新文章

热门文章