个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我希望我的小幻灯片能够平滑过渡。我尝试插入 fadeIn()，但没有成功。我希望有人能解决我的问题。
$('#pause').hide();
$('#play').click( function(){
t = setInterval( function(){
$('#next').trigger('click'), 2000
}, 4000 );
});
画廊看起来像这样
function loadSlide(index){
$('#gallery li').hide().eq(index).show();
}
$('#gallery').data('index',0).find('li').hide();
loadSlide(0);
$('#next, #navnext').on('click',function(e){
var index = $('#gallery').data('index'),
numSlides = $('#gallery li').length;
index = (index + 1) % numSlides;
loadSlide(index);
$('#gallery').data('index',index);
e.preventDefault();
});
$('#previous, #navprev').on('click',function(e){
var index = $('#gallery').data('index'),
numSlides = $('#gallery li').length;
index = (index + numSlides - 1) % numSlides;
loadSlide(index);
$('#gallery').data('index',index);
e.preventDefault();
});
HTML
<body>
<div id="nav_img">
<a href="#" id="previous" style="cursor: url('../prev.png'); z-index: 800;" ><img src="trans.png"/></a>
<a href="#" id="next" style="cursor: url('../next.png'); z-index: 800;"><img src="trans.png"/></a>
</div>
<div id="control" style="z-index: 998;">
<div id="navnext"><img src="next.png"/> </div>
<div id="navprev"><img src="prev.png"/> </div>
<div id="play"><img src="play.png"/></div>
<div id="pause"><img src="pause.png"/></div>
</div>
<div id="Logo">
<a href="index_test.html"><b>lorem</b> ipsum</a>
</div>
<div class="fade" id="Navigation">
<ul id="sliding-navigation" style="list-style-type:none;">
<li class="sliding-element"><a href="women.html">Women</a></li>
<li class="sliding-element"><a href="men.html">Men</a></li>
<li class="sliding-element"><a href="beauty.html">Beauty</a></li>
<li class="sliding-element"><a href="advertising.html">Advertising</a></li>
<li class="sliding-element"><a href="biography.html">Biography</a></li>
<li class="sliding-element" id="contactbutton"><a href="#">Contact</a></li>
</ul>
</div>
<ul id="gallery">
<li> <img style="margin-left:-25%;" src="images/a1.jpg" title="Title #0"/> </li>
<li> <img src="images/a2.jpg"/> </li>
<li> <img src="images/a3.jpg" title="Title #3"/> </li>
<li> <img src="images/a4.jpg" title="Title #4"/> </li>
<li> <img src="images/a5.jpg" title="Title #5"/> </li>
</ul>
提前致谢!
最佳答案
要正确地向 li 元素添加过渡，您必须像我一样使用 position:absolute; 将它们相互重叠放置。
jQuery
$('#pause').hide();
var numSlides = $('#gallery li').length;
var interv;
$('#play').click( function(){
$(this).hide();
$('#pause').show();
interv = setInterval( function(){
$('#next').trigger('click');
}, 2000 );
});
// you forgot this?
$('#pause').click( function(){
$('#pause').hide();
$('#play').show();
clearInterval(interv);
});
function loadSlide(index){
$('#gallery li:not(:eq('+index+'))').fadeTo(400,0); // SMOOTH TRANSITION
$('#gallery li').eq(index).fadeTo(400,1); // SMOOTH TRANSITION
}
$('#gallery').data('index',0).find('li').hide();
loadSlide(0);
$('#next, #navnext').on('click',function(e){
var index = $('#gallery').data('index');
index = (index + 1) % numSlides;
loadSlide(index);
$('#gallery').data('index',index);
e.preventDefault();
});
$('#previous, #navprev').on('click',function(e){
var index = $('#gallery').data('index');
index = (index + numSlides - 1) % numSlides;
loadSlide(index);
$('#gallery').data('index',index);
e.preventDefault();
});
我添加了转换并修复了您的代码。
关于使用 setInterval 和触发器实现 jQuery 幻灯片平滑过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10027304/
26
4
0
背景: 我最近一直在使用 JPA，我为相当大的关系数据库项目生成持久层的轻松程度给我留下了深刻的印象。 我们公司使用大量非 SQL 数据库，特别是面向列的数据库。我对可能对这些数据库使用 JPA 有一
我已经在我的 maven pom 中添加了这些构建配置，因为我希望将 Apache Solr 依赖项与 Jar 捆绑在一起。否则我得到了 SolarServerException: ClassNotF
interface ITurtle { void Fight(); void EatPizza(); } interface ILeonardo : ITurtle {
我希望可用于 Java 的对象/关系映射 (ORM) 工具之一能够满足这些要求: 使用 JPA 或 native SQL 查询获取大量行并将其作为实体对象返回。 允许在行(实体)中进行迭代，并在对当前
好像没有，因为我有实现From for 的代码, 我可以转换 A到 B与 .into() , 但同样的事情不适用于 Vec .into()一个Vec . 要么我搞砸了阻止实现派生的事情，要么这不应该发
在 C# 中，如果 A 实现 IX 并且 B 继承自 A ，是否必然遵循 B 实现 IX？如果是，是因为 LSP 吗？之间有什么区别吗: 1. Interface IX; Class A : IX;
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我正在阅读标准haskell库的(^)的实现代码: (^) :: (Num a, Integral b) => a -> b -> a x0 ^ y0 | y0 a -> b ->a expo x0
我将把国际象棋游戏表示为 C++ 结构。我认为，最好的选择是树结构(因为在每个深度我们都有几个可能的移动)。 这是一个好的方法吗？ struct TreeElement{ SomeMoveType
我正在为用户名数据库实现字符串匹配算法。我的方法采用现有的用户名数据库和用户想要的新用户名，然后检查用户名是否已被占用。如果采用该方法，则该方法应该返回带有数据库中未采用的数字的用户名。 例子: “贾
我正在尝试实现 Breadth-first search algorithm , 为了找到两个顶点之间的最短距离。我开发了一个 Queue 对象来保存和检索对象，并且我有一个二维数组来保存两个给定顶点
我目前正在 ika 中开发我的 Python 游戏，它使用 python 2.5 我决定为 AI 使用 A* 寻路。然而，我发现它对我的需要来说太慢了(3-4 个敌人可能会落后于游戏，但我想供应 4-
我正在寻找 Kademlia 的开源实现C/C++ 中的分布式哈希表。它必须是轻量级和跨平台的(win/linux/mac)。 它必须能够将信息发布到 DHT 并检索它。 最佳答案 OpenDHT是
我在一本书中读到这一行:-“当我们要求 C++ 实现运行程序时，它会通过调用此函数来实现。” 而且我想知道“C++ 实现”是什么意思或具体是什么。帮忙!？ 最佳答案 “C++ 实现”是指编译器加上链接
我正在尝试使用分支定界的 C++ 实现这个背包问题。此网站上有一个 Java 版本:Implementing branch and bound for knapsack 我试图让我的 C++ 版本打印
在很多情况下，我需要在 C# 中访问合适的哈希算法，从重写 GetHashCode 到对数据执行快速比较/查找。 我发现 FNV 哈希是一种非常简单/好/快速的哈希算法。但是，我从未见过 C# 实现的
目录 LRU缓存替换策略 核心思想 不适用场景 算法基本实现 算法优化
1. 绪论 在前面文章中提到 空间直角坐标系相互转换 ，测绘坐标转换时，一般涉及到的情况是：两个直角坐标系的小角度转换。这个就是我们经常在测绘数据处理中，WGS-84坐标系、54北京坐标系
在软件开发过程中，有时候我们需要定时地检查数据库中的数据，并在发现新增数据时触发一个动作。为了实现这个需求，我们在 .Net 7 下进行一次简单的演示. PeriodicTimer .
二分查找 二分查找算法，说白了就是在有序的数组里面给予一个存在数组里面的值key，然后将其先和数组中间的比较，如果key大于中间值，进行下一次mid后面的比较，直到找到相等的，就可以得到它的位置。
我是一名优秀的程序员,十分优秀！