jquery图片幻灯片殊效教程源码分享_Javascript教程

原创 2013年12月03日 14:38:16

//图片幻灯展现 $(function() { var imgPro = { imgWidth : 626, //图片宽度 imgConLength : 0, //图片总长度 index : 0, //导航锁定索引 count : 0, //图片数目 left : 0, //相对定位left pre : -1, //上个图片索引 curr : 0, //当前图片索引 next : 1, //下个图片索引 direction : 1, //主动播放方向 interTime : 3000//距离时光 } addImgAlt(imgPro.curr); imgPro.count = $('#banner .list a img').length; imgPro.imgConLength = imgPro.imgWidth * imgPro.count; imgPro.left = parseInt($('#box .list ul').css("left")); //播放按时器 var t = setInterval(imgPlay, imgPro.interTime); $('#box .arrowl img, #box .arrowr img,#banner .list a,#box .count li,#box p').hover(function() { clearInterval(t); }, function() { t = setInterval(imgPlay, imgPro.interTime); }); // 自动播放图片 function imgPlay() { if ((imgPro.next != imgPro.count && imgPro.direction == 1) (imgPro.pre == -1 && imgPro.direction == -1)) { imgPro.direction = 1; toNext(); } else { imgPro.direction = -1; toLast(); } } //点击左标的目的 $('#box .arrowl img').click(function() { if (imgPro.curr != 0) { toLast(); } }); //点击右方向 $('#box .arrowr img').click(function() { if (imgPro.next != imgPro.count) { toNext(); } }); //点击导航播放 $('#box .count li').click(function() { imgPro.index = $('#box .count li').index(this); if (imgPro.curr != imgPro.index) { imgPro.left += (imgPro.curr - imgPro.index) * imgPro.imgWidth; addImgAlt(imgPro.index); play(); $('#box .count li').eq(imgPro.curr).removeClass('current').end().eq(imgPro.index).addClass('current'); imgPro.curr = imgPro.index; imgPro.pre = imgPro.index - 1; imgPro.next = imgPro.index + 1; } }); //播放 function play() { $('#box .list ul').css({ 'opacity' : '0.5' }).animate({ 'left' : imgPro.left + "px", 'opacity' : '1' }, 'slow'); } //增加图片阐明信息 function addImgAlt(index) { $("#box p").text($("#banner .list a img").eq(index).attr("alt")); } //上一张 function toLast() { imgPro.left += imgPro.imgWidth; addImgAlt(imgPro.pre); play(); $('#box .count li').eq(imgPro.curr).removeClass('current').end().eq(imgPro.pre).addClass('current'); imgPro.pre--; imgPro.curr--; imgPro.next--; } //下一张 function toNext() { imgPro.left -= imgPro.imgWidth; addImgAlt(imgPro.next); play(); $('#box .count li').eq(imgPro.curr).removeClass('current').end().eq(imgPro.next).addClass('current'); imgPro.pre++; imgPro.curr++; imgPro.next++; } });

Javascript实现幻灯片效果

Web上很多页面都有提供javascript幻灯效果的代码库,我们可以免费直接使用很多优秀的代码库。今天我开始学习用JavaScript实现幻灯效果,新手一步一步开始学起。 在创建一个幻灯效果的时候,...
  • la413972057
  • la413972057
  • 2015年08月24日 14:44
  • 312

18款 非常实用 jquery幻灯片图片切换

http://www.iteye.com/topic/1125861 1、jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banne...
  • mituan1234567
  • mituan1234567
  • 2015年04月09日 11:07
  • 934

Jquery图片自动幻灯片效果

效果如图: 首先Html文件: 1 ...
  • GQ_cyan
  • GQ_cyan
  • 2017年03月20日 17:36
  • 411

Javascript实现图片幻灯片

使用Javascript(js)和html实现图片浏览器,图片幻灯片,定时更改图片显示浏览...
  • u012150370
  • u012150370
  • 2015年04月26日 14:14
  • 510

不用jQuery做一个简单手动暂停的JavaScript幻灯片2

在你的页面上使用幻灯片之前应该仔细想清楚是否该使用它,使用不当的话会破坏你的网站的用户体验。 幻灯片会隐藏重要的内容 如果你的网站里有些内容是非常重要的,它就不应该隐藏在幻灯片中,你不能指望在理想环...
  • code_ja
  • code_ja
  • 2016年06月24日 15:58
  • 371

javascript幻灯片效果_javascript教程

javascript幻灯片效果_javascript教程
  • andylaufzf
  • andylaufzf
  • 2007年11月23日 10:20
  • 497

制作风格——百变幻灯片,完全DIY(高级教程)

在DIY时如何调用幻灯片,幻灯片该如何制作,这一讲我们来教大家如何制作幻灯片  请跟随教程从头到尾仔细阅读,你将收获不小 第一步制作幻灯片:后台--》门户--》模块模板 ...
  • stuartjing
  • stuartjing
  • 2011年12月13日 15:26
  • 1944

云效(原RDC)如何构建一个基于Maven的Java项目

最近在将公司的持续集成架构做一个系统的调整,调整过程中受到了RDC团队大量的帮助,所以利用国庆时间写了几篇RDC的分享,希望能让更多的人了解和用好RDC这个产品。 我会把我最近3个月的使用体会分...
  • qq_36510261
  • qq_36510261
  • 2017年10月26日 15:57
  • 959

JavaScript——自动播放幻灯片效果

自动播放——幻灯片效果 *{ margin:0; padding:0; } body{ background:black; text-align:center; font:...
  • renrenai35
  • renrenai35
  • 2014年05月13日 17:29
  • 1053

jQuery轻量级简单实用的图片放大镜特效

zoomtoo是一款轻量级的简单实用的jQuery图片放大镜特效插件。这个图片放大镜特效在鼠标滑过图片的时候,在原来图片区域内部将图片放大。鼠标进入和离开图片区域时都带有淡入淡出的效果。 浏览器...
  • sunny_girls
  • sunny_girls
  • 2015年06月11日 12:53
  • 1263
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery图片幻灯片殊效教程源码分享_Javascript教程
举报原因:
原因补充:

(最多只允许输入30个字)