javascript 来自 Google 的简单轮播示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16240673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple Carousel Example from Google
提问by Isaac
I was searching for a simple carousel example in Google and I came across one and its link is :
我在谷歌搜索一个简单的轮播示例，我遇到了一个，它的链接是：
http://jsfiddle.net/paulmason411/TZy7A/2/
http://jsfiddle.net/paulmason411/TZy7A/2/
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds
function slides(){
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
// auto scroll
$interval = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
, $transition_time + $time_between_slides
);
</script>
<style>
.slider {
margin: 10px 0;
width: 580px; /* Update to your slider width */
height: 250px; /* Update to your slider height */
position: relative;
overflow: hidden;
}
.slider li {
display: none;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<ul class="slider">
<li>
<img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
</li>
</ul>
</body>
</html>
However I created a notepad file with .html extension and added all these code there and tried to open it in the browser and does not work. Could you please let me know why it did not work for me.
但是，我创建了一个带有 .html 扩展名的记事本文件，并在那里添加了所有这些代码，并尝试在浏览器中打开它但不起作用。你能否让我知道为什么它对我不起作用。
This is the code, this is the exact copy of what you see in the above link.
这是代码，这是您在上述链接中看到的内容的精确副本。
采纳答案by Colin Bacon
You just needed to put the code within $(document).ready()This allows prevents the script from running until the document is fully loaded.
您只需要将代码放入$(document).ready()这允许阻止脚本运行，直到文档完全加载。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds
function slides(){
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
// auto scroll
$interval = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
, $transition_time + $time_between_slides
);
});
</script>
<style>
.slider {
margin: 10px 0;
width: 580px; /* Update to your slider width */
height: 250px; /* Update to your slider height */
position: relative;
overflow: hidden;
}
.slider li {
display: none;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<ul class="slider">
<li>
<img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
</li>
</ul>
</body>
</html>
回答by Drew Dahlman
Your issue is that you don't have a ready function. You need to have that in there before you can make any jQuery calls.
您的问题是您没有现成的功能。在进行任何 jQuery 调用之前，您需要将其放入其中。
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds
function slides(){
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
// auto scroll
$interval = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
, $transition_time + $time_between_slides
);
}
</script>
<style>
.slider {
margin: 10px 0;
width: 580px; /* Update to your slider width */
height: 250px; /* Update to your slider height */
position: relative;
overflow: hidden;
}
.slider li {
display: none;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<ul class="slider">
<li>
<img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
</li>
</ul>
</body>
</html>
A note about jsfiddle is that notice the "onDomReady" is selected in the Frameworks and Extensions - fiddle automatically wraps your code in a document ready.
关于 jsfiddle 的一个注意事项是注意在框架和扩展中选择了“onDomReady”——fiddle 会自动将您的代码包装在准备好的文档中。
Cheers!
干杯!
