jquery简单图像幻灯片教程[关闭]
Posted
技术标签:
【中文标题】jquery简单图像幻灯片教程[关闭]【英文标题】:jquery simple image slideshow tutorial [closed] 【发布时间】:2012-08-17 14:49:11 【问题描述】:在哪里可以找到一个简单的jquery图像幻灯片教程,适合初学者从零开始(没有插件),没有左右导航按钮?
谢谢。
【问题讨论】:
【参考方案1】:这是迄今为止我在网上找到的最简单的示例。 http://jonraasch.com/blog/a-simple-jquery-slideshow
总结这个例子,这就是你需要做的幻灯片:
HTML:
<div id="slideshow">
<img src="img1.jpg" style="position:absolute;" class="active" />
<img src="img2.jpg" style="position:absolute;" />
<img src="img3.jpg" style="position:absolute;" />
</div>
绝对位置用于将每个图像放在另一个上。
CSS
<style type="text/css">
.active
z-index:99;
</style>
具有 class="active" 的图像将出现在其他图像之上,class=active 属性将随着以下 Jquery 代码而改变。
<script>
function slideSwitch()
var $active = $('div#slideshow IMG.active');
var $next = $active.next();
$next.addClass('active');
$active.removeClass('active');
$(function()
setInterval( "slideSwitch()", 5000 );
);
</script>
如果您想进一步了解幻灯片,我建议您查看上面的链接(查看动画不透明度变化 - 2n 示例)或其他更复杂的幻灯片教程。
【讨论】:
我认为编码人员有一定的进展,我们开始弄清楚如何使用上/下层技术编写简单的淡入淡出,但最终我们意识到我们想要的实际上是将图片从左向右移动(反之亦然)。 这是最简单直接的例子!谢谢你的帮助【参考方案2】:我不知道您为什么没有标记这些 gr8 答案...这是另一个选项,可以让您和其他访问者控制转换速度和暂停时间
JAVASCRIPT
$(function ()
/* SET PARAMETERS */
var change_img_time = 5000;
var transition_speed = 100;
var simple_slideshow = $("#exampleSlider"),
listItems = simple_slideshow.children('li'),
listLen = listItems.length,
i = 0,
changeList = function ()
listItems.eq(i).fadeOut(transition_speed, function ()
i += 1;
if (i === listLen)
i = 0;
listItems.eq(i).fadeIn(transition_speed);
);
;
listItems.not(':first').hide();
setInterval(changeList, change_img_time);
);
。
HTML
<ul id="exampleSlider">
<li><img src="http://placehold.it/500x250" /></li>
<li><img src="http://placehold.it/500x250" /></li>
<li><img src="http://placehold.it/500x250" /></li>
<li><img src="http://placehold.it/500x250" /></li>
</ul>
. 如果你保持这个简单,那么它很容易保持响应 最好访问:DEMO
. 如果您想要一些具有特殊过渡效果的东西(仍然响应) - 看看这个DEMO WITH SPECIAL FX
【讨论】:
喜欢这个简单而优雅的代码。谢谢! 谢谢你,很高兴你喜欢它;)【参考方案3】:这是我对 Michael Soriano 教程的改编。见下文或JSBin。
$(function()
var theImage = $('ul#ss li img');
var theWidth = theImage.width();
//wrap into mother div
$('ul#ss').wrap('<div id="mother" />');
//assign height width and overflow hidden to mother
$('#mother').css(
width: function()
return theWidth;
,
height: function()
return theImage.height();
,
position: 'relative',
overflow: 'hidden'
);
//get total of image sizes and set as width for ul
var totalWidth = theImage.length * theWidth;
$('ul').css(
width: function()
return totalWidth;
);
var ss_timer = setInterval(function()
ss_next();
, 3000);
function ss_next()
var a = $(".active");
a.removeClass('active');
if (a.hasClass('last'))
//last element -- loop
a.parent('ul').animate(
"margin-left": (0)
, 1000);
a.siblings(":first").addClass('active');
else
a.parent('ul').animate(
"margin-left": (-(a.index() + 1) * theWidth)
, 1000);
a.next().addClass('active');
// Cancel slideshow and move next manually on click
$('ul#ss li img').on('click', function()
clearInterval(ss_timer);
ss_next();
);
);
*
margin: 0;
padding: 0;
#ss
list-style: none;
#ss li
float: left;
#ss img
width: 200px;
height: 100px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="ss">
<li class="active">
<img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado-colors.jpg">
</li>
<li>
<img src="http://leemark.github.io/better-simple-slideshow/demo/img/monte-vista.jpg">
</li>
<li class="last">
<img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado.jpg">
</li>
</ul>
【讨论】:
你能发布你的jsfiddle吗?我试过了,图像离开了页面。 已添加。您可能只需要将 LI 元素更新为float:left;
【参考方案4】:
这看起来像你会感兴趣的东西
http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-gallery/
【讨论】:
以上是关于jquery简单图像幻灯片教程[关闭]的主要内容,如果未能解决你的问题,请参考以下文章
在一个简单的 jquery 幻灯片放映中,我的班级到达图像的末尾,然后从 DOM 的边缘掉下来
css 超简单的jQuery背景图像随机幻灯片(使用CSS3进行转换,并通过HTML5`data`属性获取图像路径)。
创建第一个 jQuery 幻灯片插件,从 Javascript 转换
jquery 循环插件、嵌套幻灯片、'after' 选项或测试第一张和最后一张图像