图像滑块

时间:2015-07-23 14:40:04

标签: javascript jquery slider

由于它的简单性,我一直在使用http://responsiveslides.com/的图片滑块,这正是我所追求的。

因此,对于滑块,您有HTML

<ul class="rslides">
  <li><img src="1.jpg" alt=""></li>
  <li><img src="2.jpg" alt=""></li>
  <li><img src="3.jpg" alt=""></li>
</ul>

CSS

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

JS

<script>
  $(function() {
    $(".rslides").responsiveSlides();
  });
</script>

http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

我感觉主要的javascript文件太长了,所以如果你可以通过源代码,我会很感激,但提前道歉。由于声誉问题,我也无法发布。

现在我使用的滑块已经布局了,我遇到的问题是当我将HTML粘贴在体内时我的最终结果是图像#1没有任何移动所以基本上只是尝试找出原因。

我之前通过Stackoverflow进行了研究,看到了类似的问题,并看到了对javascript函数的小脚本标记所做的更改,但是我更新了这些问题并且它从未改变任何内容。

另一个要说的是,当我检查控制台时,它显然表示responsiveSlides不是一个函数,但是当我在本地检查控制台中的原始滑块时,它的功能完全正常且控制台没有错误。

任何支持都将不胜感激,这很乏味,希望这是一个简单的问题。

问候。

1 个答案:

答案 0 :(得分:0)

手头似乎存在jquery不兼容问题。 responsiveslides.js使用$slide.size(),而使用jQuery 1.8+的用户应使用$slide.length

从jQuery 1.8开始,不推荐使用

.size()

改为使用this version I forked

演示: http://jsfiddle.net/svArtist/rfn7z5g2/

相关问题