首页 \ 问答 \ 在Jquery滑块内响应Img(Responsive Img within Jquery slider)

在Jquery滑块内响应Img(Responsive Img within Jquery slider)

我在jquery滑块中的图像有问题。 滑块正在工作,但存在一些问题。 我可以让图像响应,但当我删除高度属性时,下面的内容会弹出滑块。 然后我添加一个高度值,但在重新调整窗口大小时图像会变形。 我想知道你是否能看到我出错的地方。

HTML

         <div id="indexSlider" class="indexImg">
            <div><img class="indexImg" src="imgs//test/test1.jpg"></div>
            <div><img class="indexImg" src="imgs/test/test2.jpg"></div>
            <div><img class="indexImg" src="imgs//test/test3.jpg"></div>
        </div>

CSS

 .indexImg {
height: 45rem;
width: 100%;    
}


 #indexSlider div {
position:absolute;
z-index: 0;
}

 #indexSlider div.previous {
z-index: 1;
}

 #indexSlider div.current {
z-index: 2;
}

JQUERY

 $(function() {
        // create the image rotator
        setInterval("rotateImages()", 2000);
    });

    function rotateImages() {
        var oCurPhoto = $('#indexSlider div.current');
        var oNxtPhoto = oCurPhoto.next();
        if (oNxtPhoto.length == 0)
            oNxtPhoto = $('#indexSlider div:first');

        oCurPhoto.removeClass('current').addClass('previous');
        oNxtPhoto.css({ opacity: 0.0 }).addClass('current')
                .animate({ opacity: 1.0 }, 700,
                            function() {
                                oCurPhoto.removeClass('previous');
                            });
    }

I have a problem with my images in a jquery slider. The slider is working, but there are a couple of problems. I can have the images responsive, but when I remove the height property, the content below shoots up into the slider. So I then add a height value, but the images become distorted when re-sizing the window. I was wondering if you can see where I am going wrong.

HTML

         <div id="indexSlider" class="indexImg">
            <div><img class="indexImg" src="imgs//test/test1.jpg"></div>
            <div><img class="indexImg" src="imgs/test/test2.jpg"></div>
            <div><img class="indexImg" src="imgs//test/test3.jpg"></div>
        </div>

CSS

 .indexImg {
height: 45rem;
width: 100%;    
}


 #indexSlider div {
position:absolute;
z-index: 0;
}

 #indexSlider div.previous {
z-index: 1;
}

 #indexSlider div.current {
z-index: 2;
}

JQUERY

 $(function() {
        // create the image rotator
        setInterval("rotateImages()", 2000);
    });

    function rotateImages() {
        var oCurPhoto = $('#indexSlider div.current');
        var oNxtPhoto = oCurPhoto.next();
        if (oNxtPhoto.length == 0)
            oNxtPhoto = $('#indexSlider div:first');

        oCurPhoto.removeClass('current').addClass('previous');
        oNxtPhoto.css({ opacity: 0.0 }).addClass('current')
                .animate({ opacity: 1.0 }, 700,
                            function() {
                                oCurPhoto.removeClass('previous');
                            });
    }

原文:https://stackoverflow.com/questions/31538075
更新时间:2020-01-20 21:06

最满意答案

您可以将图像作为背景添加到div中,而不是使用img标记

<div id="indexSlider">
  <div class="indexImg" style="background-image: url('imgs/test/test1.jpg');"></div>
  <div class="indexImg" style="background-image: url('imgs/test/test2.jpg');"></div>
  <div class="indexImg" style="background-image: url('imgs/test/test3.jpg');"></div>
</div>

并在CSS上

.indexImg {
  height: 45rem;
  width: 100%;
  background-repeat:none;
  background-size:cover;
  background-position:center; 
}

Instead of using img tag you can add image as a background to the div

<div id="indexSlider">
  <div class="indexImg" style="background-image: url('imgs/test/test1.jpg');"></div>
  <div class="indexImg" style="background-image: url('imgs/test/test2.jpg');"></div>
  <div class="indexImg" style="background-image: url('imgs/test/test3.jpg');"></div>
</div>

And on the css

.indexImg {
  height: 45rem;
  width: 100%;
  background-repeat:none;
  background-size:cover;
  background-position:center; 
}
2015-07-21

相关问答

更多

滑块下的jQuery UI滑块标签(jQuery UI Slider Labels Under Slider)

发布的解决方案是完全可行的,但这里是另一种解决方案,不需要额外的插件并生成它(请参阅小提琴 ): 以下是如何做到这一点: 启动滑块。 对于每个可能的值,添加一个position: absolute的label元素(滑块已经position: relative ,因此标签将相对于滑块进行定位)。 对于每个label ,将left属性设置为百分比。 CSS #slider label { position: absolute; width: 20px; margin-top: 20px; ...

需要响应内容滑块(Need a responsive content slider)

查看http://www.swipejs.com/获取基于移动设备的滑动解决方案,或对http://www.woothemes.com/flexslider进行一些调整 Check out http://www.swipejs.com/ for a mobile based swipe solution, or make some adjustments to http://www.woothemes.com/flexslider

jQuery Content滑块阻止响应式菜单抽屉(jQuery Content slider blocks responsive menu drawer)

滑块位于标题上方,因为它具有更高的z-index值。 只需为标题指定更高的z-index值: .header { ... z-index: 10; } 有关堆叠上下文的更多信息,有一篇关于mdn的优秀文章 。 The slider is positioned above the header because it has a higher z-index value. Simply give the header a higher z-index value: .header { . ...

在jquery数组中响应img(Responsive img in a jquery array)

大段引用 您的问题似乎是jQuery循环使用硬编码值,并且在其父级更改其大小时不会更新。 它没有响应。 使用周期2. - Andrei Gheorghiu 第2周期解决了这个问题。 必须包含以下代码才能解决: <div class="cycle-slideshow" data-cycle-fx="none" data-cycle-auto-height="calc" data-cycle-pause-on-hover="true" data-cycle-speed="0.5s"> 这取代了.sli ...

Jquery滑块:水平图像滑块(Jquery slider: horizontal image slider)

如果我理解你,那么就像隐藏一样制作幻灯片 $(document).ready(function() { //$('.slider #1').show({right:'0'}, 500); $('.slider #1').show('slide', 'linear', 500); $('.slider #1').delay(5500).hide('slide', 'linear', 500); var sliderTotalImg = $('.slider img').size(); var c ...

jQuery舍入滑块(jQuery rounded slider)

以下是我想到的: jsBin演示 $(function () { var $circle = $('#circle'), $handler = $('#handler'), $p = $('#test'), handlerW2 = $handler.width()/2, rad = $circle.width()/2, offs = $circle.offset(), elPos = {x:of ...

如何从JQuery Slider获取当前滑块值?(How to get current slider values from JQuery Slider?)

使用以下行访问滑块的当前值: var val = $('#slider').slider("option", "value"); Use the following line to access the current values of the slider: var val = $('#slider').slider("option", "value");

在Jquery滑块内响应Img(Responsive Img within Jquery slider)

您可以将图像作为背景添加到div中,而不是使用img标记 <div id="indexSlider"> <div class="indexImg" style="background-image: url('imgs/test/test1.jpg');"></div> <div class="indexImg" style="background-image: url('imgs/test/test2.jpg');"></div> <div class="indexImg" style ...

让我的jQuery滑块响应(Making my jquery slider responsive)

看看这个 。 我相信发生了什么事情是你的下一个和上一步调整到屏幕的高度,而不是像你希望的图像的高度。 所以要自定义它,首先将图像的高度和宽度设置为您想要的任何值,为您的按钮匹配相同的高度,并且只要它们位于相同的父div中它就应该匹配 <html> <head> <title>Image carousel</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet ...

jquery滑块问题(jquery slider problem)

滑块位置基于助手的最左侧位置。 你需要在它周围做一个包装器进行定位,然后用一半宽度的边缘拉回帮手。 有关使用代码的解决方案,请参阅以下jsFiddle。 http://jsfiddle.net/Bprw2/1/ 或者http://jqueryui.com/demos/slider/#side-scroll并打开源代码以获得更广泛的示例。 希望这可以帮助 The slider position is based on the left most position of the helper. You ...

相关文章

更多

最新问答

更多
  • 如何保护Solr只允许SELECT请求给用户并禁止其他任何东西?(How to secure Solr to allow SELECT request to only users and disallow anything else?)
  • XPath表达式无效/错误TFHpple SWIFT 1.2(XPath Expression not working/incorrect TFHpple SWIFT 1.2)
  • css3 3D变换不能平滑地制作动画(css3 3D transform doesn't animate smoothly)
  • 运行时错误'91'和Outlook.Application = <对象变量或没有设置块变量>?(Run-time error '91' & Outlook.Application = Object variable or With block variable not set?)
  • 慢的webservice问题(Slow webservice problem)
  • textview的不正确对齐方式(Improper alignment of a textview)
  • 在第一步“Hello World”中出现Java错误(Cannot run “Hello World” program in Eclipse)
  • 为什么十六进制地址是14个字符?(why the hex address is 14 character?)
  • 如何在Python中的不同类中使用变量?(How to use variable in different classes in Python?)
  • asp:GridView HYPERLINKFIELD - datanavigateurlformatstring中的asp代码(asp:GridView HYPERLINKFIELD - asp code inside datanavigateurlformatstring)
  • 关于adaboost算法(About adaboost algorithm)
  • 在Matlab上内置图像(Built in Images on Matlab)
  • java swing:输入键事件时焦点丢失(java swing: Focus lost on enter key event)
  • C#中的通用约束,T是相同的TSomethingElse,对吧?(Generic constraints in C#, T is the same TSomethingElse, right?)
  • 从mybatis中的光标获取数据(Fetching data from cursor in mybatis)
  • 在运行时从XML构建对象的最佳方法(Best way for building objects out of XMLs at runtime)
  • 在整个窗口中拉伸sf :: Sprite(Stretch sf::Sprite across entire window)
  • Selenium Node API Web驱动程序等待超时处理程序(Selenium Node API web driver wait timeout handler)
  • 函数使用并且是map的一部分(循环依赖?)(Function uses and is part of map (circular dependency?))
  • 是否可以在C ++ 14中使用可选模板参数创建类型元组?(Is possible to make a tuple of types with optional template parameters in C++14?)
  • PHP从窗帘后面打印/ f(PHP prints /f from behind the curtains)
  • JFrame的contentPane的LayoutManager(LayoutManager of JFrame's contentPane)
  • 用于Instagram Feed的图像滚动(Image Roll Overs for Instagram Feed)
  • 如何显示拉伸字体(双倍宽度/高度)?(How to display stretched font (double width/height)?)
  • 文件操作API在fileapi.h和stdio.h中的WP8差异?(WP8 differences between file manipulation APIs in fileapi.h and stdio.h?)
  • 保存失败后Rails没有回滚事务()(Rails not rolling back transaction after failed save())
  • jqgrid中的分页问题与数组数据(Pagination problem in jqgrid with array data)
  • 重定向时,通过其他页面上的URL调用javascript函数(Call javascript function through url on otherpage while Redirecting)
  • 如何使用InvokeCommandAction调用我的方法并传入参数?(How do I go about using InvokeCommandAction to call a method of mine and pass in parameters?)
  • Jquerymobile按钮仅显示页面的第一个外观(Jquerymobile buttons are shown only first apperance of the page)