javascript - 轮播图不执行
本文介绍了javascript - 轮播图不执行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
尝试写了一个轮播图，可是一直都不执行，但是也没报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery1.42.min.js"></script>
<style>
.wrap{
position: relative;
width:580px;
height:290px;
overflow: hidden;
}
.wrap ul{
position: absolute;
top: 0px;
}
.wrap ul li{
list-style: none;
width:540px;
height:290px;
}
.wrap ul li img{
width:100%;
}
.clearfix:after{
content: "";
display: block;
clear: both;
visibility: hidden;
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="clearfix">
<li>
<img src="img/pic2.jpg" alt="">
</li>
<li>
<img src="img/pic3.jpg" alt="">
</li>
<li>
<img src="img/pic4.jpg" alt="">
</li>
<li>
<img src="img/pic5.jpg" alt="">
</li>
</ul>
<script>
$(function () {
setInterval(slide(),100);
var $li = $('ul li').length;
// console.log($li);
var $top = parseInt($('ul').css('top'));
// console.log($top);
var $height = $('ul li').height();
// console.log($height);
function slide() {
// console.log($top < (-($li-1)*$height));
if($top < (-($li-1)*$height)){
$('ul').css('top','0px');
console.log(2);
}else{
console.log(1);
$('ul').css({
'top':($top-$height)+'px'
});
}
}
})
</script>
</div>
</body>
</html>因为li没有浮动，我就试试这个想法可不可行，所有用的是top值。console能显示出来1，说明判断那一块执行了，但是图片完全没反应，求问原因？？
感谢@抓不住的月光，我把代码改了一点，为了对比我贴在下边了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery1.42.min.js"></script>
<style>
.wrap {
position: relative;
width: 580px;
height: 290px;
overflow: hidden;
}
.wrap ul {
position: absolute;
top: 0px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.wrap ul li {
list-style: none;
width: 540px;
height: 290px;
}
.wrap ul li img {
width: 100%;
}
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="clearfix">
<li>
<img src="img/pic2.jpg" alt="">
</li>
<li>
<img src="img/pic3.jpg" alt="">
</li>
<li>
<img src="img/pic4.jpg" alt="">
</li>
<li>
<img src="img/pic5.jpg" alt="">
</li>
</ul>
<script>
window.onload = function () {
//获取li的个数
var $li = $('ul li').length;
//获取当前ul的top值
var $top = parseInt($('ul').css('top'));
//获取每个li的高度
var $height = $('ul li').height();
var index = -1;
slide = function () {
index++;
if (index >= $li) {//移动到最后一张
index = -1;
} else {//没有移动到最后一张
var slideUl = $('ul')[0];
slideUl.style.top = (-index * $height)+'px';
// $('ul').css(top, -(index * $height) + 'px');
console.log(slideUl.style.top );
}
};
setInterval(slide, 1000);
}
</script>
</div>
</body>
</html>做了几个改动：
增加了动画的过渡效果
如果index的初始值定位0，在一次循环以后，第一张图片将会无法显示，直接会从第二章开始，因此我把index的值设置为了
-1.不再使用jquery的方法设置top值，因为用jq的方法不知为何一直不运行，所以我就换了。
解决方案
首先，你的setInterval写错了。
你要么这样写：
setInterval(function() {
slide();
}, 100);要么这样写：
setInterval(slide, 100);至于你的那种写法- -首先漏了引号
setInterval("slide()", 100);其次，window对象的setInterval要求传递的方法参数必须是【全局作用域】的
函数定义function slide(){...}这是【局部作用域】的函数，需改成：
slide=function(){...}//注意前面不能加var所以这种【不建议】使用
最后你的slide函数里的$height不会更新，你这个轮播只会动一次就废了。。
再给你个例子吧https://jsfiddle.net/o5oqsodg/（这个例子还实现了无缝滚动和鼠标经过暂停功能,看懂了基本就都明白了）
这篇关于javascript - 轮播图不执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
