【第五章】综合实例：实现图片传送带

实现图片传送带

所谓图片传送带是指在页面的指定位置固定显示一定数量的图片（其他图片隐藏）单击最左边的图片时，全部图片均向左移动一张图片的位置，单击最右边的图片时，全部图片均向右移动一张图片的位置，这样既可以查看到全部图片，又能节省页面空间，比较
实用。
将鼠标移动到左边的图片上，将显示图的箭头，单击将向左移动一张图片；将鼠标移动到右边的图片上时，将显示向右的箭头，单击将向右移动一张图片；单击中间位置的图片，可以打开新窗口查看该图片的原图。

<body><div id="container"><div class="box"><a href="img/1.jpg"><img src="img/1.jpg" height="60" width="80"></a><a href="img/2.jpg"><img src="img/2.jpg" height="60" width="80"></a><a href="img/3.jpg"><img src="img/3.jpg" height="60" width="80"></a><a href="img/4.jpg"><img src="img/4.jpg" height="60" width="80"></a></div></div><script>$(document).ready(function(){var spacing =90;function createControl(src){return $('<img/>').attr('src',src).attr("width",80).attr("height",60).addClass('control').css('display','none')}var $leftRollover = createControl('img/left.png');var $leftRollover = createControl('img/right.png');$('#container').css({'width':spacing*3,'height':'70px','overflow':'hidden'}).find('.box a').css({'float':'none','position':'absolute',   //设置为绝对布局'left':1000     //将左边距设置1000,目的是不显示});var setUpbox = function(){var $box =$('#container.box a');$box.unbind('click mouseenter mouseleave');//移除绑定的事件/**左边的图片**/$box.eq(0).css('left',0).click(function(event){$box.eq(0).animate({'left':spacing},'fast');  //为第一张图片添加动画$box.eq(1).animate({'left':spacing*2},'fast');//为第二张图片添加动画$box.eq(2).animate({'left':spacing*3},'fast');//为第三张图片添加动画$box.eq($box.length-1).css('left',-spacing)                       //设置左边距.animate({'left':0},'fast',function(){$(this).prependTo('#container.box');setUpbox();});                           //添加动画event.preventDefault();            //取消事件的默认动作$leftRollover.appendTo(this).fadeIn(200);      //显示向左移动的控制图片},function(){$leftRollover.fadeOut(200);//掩藏向左移动的控制图片});/**右边的图片**/$box.eq(2).css('left',spacing*2)                    //设置左边距.click(function(event){                 //绑定单击事件$box.eq(0)                  //获取左边图片,也就是第一张图片.animate({'left':-spacing},'fast',function(){$(this).appendTo('#container.box');setUpbox();});                                          //添加动画$box.eq(1).animate({'left':0},'fast');       //添加动画$box.eq(2).animate({'left':spacing},'fast');   //添加动画$box.eq(3).css('left',spacing*3)                   //设置左边距.animate({'left':spacing*2},'fast');    //添加动画event.preventDefault();                 //取消时间的默认动作}).hover(function(){                        //设置鼠标的悬停事件$rightRollover.appendTo(this).fadeIn(200);//显示向右移动的控制图片},function(){$rightRollover.fadeOut(200); //隐藏向右移动的控制图片});/**中间的图片**/$box.eq(1).css('left',spacing);//设置中间图片的左边距};setUpbox();$("a").attr("target","_blank");});                           //查看原图时,在新窗口打开 </script></body>

【第五章】综合实例：实现图片传送带相关推荐

《NodeJS开发指南》第五章微博实例开发总结
所有文章搬运自我的个人主页:sheilasun.me <NodeJS开发指南>这本书用来NodeJS入门真是太好了,而且书的附录部分还讲到了闭包.this等JavaScript常用特性.第 ...
吴恩达机器学习（十五）—— 应用实例：图片文字识别
应用实例:图片文字识别 1. 问题描述和流水线 2. 滑动窗口 3. 获取大量数据:人工数据合成 4. 上限分析:流水线的哪个模块最有改进价值学习图片文字识别的应用实例要做的事情: 展示一个复杂 ...
第十六章综合实例——《跟我学Shiro》
目录贴: 跟我学Shiro目录贴简单的实体关系图简单数据字典用户(sys_user) 名称类型长度描述 id bigint 编号主键 username varchar 100 用户名 p ...
第五章数据仓库实例
可以查看大数据测试系列说明这章比较重要,是对hadoop和hive以及建模的一次实践阅读本章,请把hadoop和hive环境搭建好,可以参考如下文章: 第三章大数据之Hadoop搭建第四章 ...
【程序设计基础】第九、十、十一章综合实例分析递归
实例分析: 闰年算法变化 1 resule:=0 2 if (y mod 400=0) or ((y mod 4=0) and (y mod 100<>0)) 3 then result: ...
matlab学习笔记（十五）---综合实例
1.光照不均的校正例1:对光照不均图像的光照进行校正 BW=imread('rice.png'); subplot(221),imshow(BW),title('原始图像'); BW2=im2dou ...
日月光华深度学习(五)--卫星图像识别tf.data、卷积综合实例
卫星图像识别tf.data.卷积综合实例 [5.1]--卫星图像识别卷积综合实例:图片数据读取 [5.2]--卫星图像识别卷积综合实例:读取和解码图片 [5.3]--卫星图像识别卷积综合实例:tf.d ...
第十五章 shell正则表达式
第十五章 shell正则表达式见图片 Shell正则表达式正则表达式的分类基本的正则表达式(Basic Regular Expression 又叫Basic RegEx 简称BREs) 扩展的正 ...
stm32 读取sd卡图片显示_「正点原子STM32Mini板资料连载」第三十五章汉字显示实验...
1)实验平台:正点原子STM32mini开发板 2)摘自<正点原子STM32 不完全手册(HAL 库版)>关注官方微信号公众号,获取更多资料:正点原子第三十五章汉字显示实验汉字显示在 ...

【第五章】综合实例：实现图片传送带

实现图片传送带

【第五章】综合实例：实现图片传送带相关推荐

最新文章

热门文章