图像滑块与下一个图像预览

Question

jquery是否有类似的滑块，滑块一角可以看到第二个图像预览？

由于

Answer 1

我已经在这个问题上创造了我最好的尝试，我希望它足够但我自己并不满意，因为它使用背景图像。如果您需要帮助理解它，请询问。您可以通过更改列表网址来更改图像。我认为我的动态足以扩展更多的图像。 css的大小应该可以很容易地改变。

为了让它更好地工作，你可以拥有它，所以当你在预览中盘旋时它会显示为“主”显示，直到你退出悬停状态。

请注意，这不幸仅适用于某些浏览器（在Firefox上测试过，不适用于Chrome）。这可能是可以解决的，基本上你需要找出如何在chrome上使用skewX。

Demo

<强> JQuery的

var elements = $("#urlList").children();
var urlArray = [];
$(elements).each(function(index){   
    urlArray.push($(this).html());  
});

var index = 0;
var currentImage = urlArray[0];
var previewImage = urlArray[1];

$('#next').click(function(){
  index += 1;
  if(index > urlArray.length-1){
    index = 0;
  }
  $('.box').css("background-image","url('"+urlArray[index]+"')");
  var previewIndex = index+1;
  if(previewIndex > urlArray.length-1){
    previewIndex = 0;
  }
  $(".insideBox").css("background-image","url('"+urlArray[previewIndex]+"')")
});
$('#Previous').click(function(){
  index -= 1;
  if(index < 0){
    index = urlArray.length -1;
  }
  $('.box').css("background-image","url('"+urlArray[index]+"')");
  var previewIndex = index +1;
  if(previewIndex > urlArray.length-1){
    previewIndex = 0;
  }
  $(".insideBox").css("background-image","url('"+urlArray[previewIndex]+"')")
});

<强> HTML

<div class="box">
  <ul id="urlList">
    <li>http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg</li>
    <li>http://hdlatestwallpaper.com/wp-content/uploads/2014/05/Green-Bubbles-Awesome-Background.jpg</li>
    <li>http://www.psdgraphics.com/file/colorful-triangles-background.jpg</li>
  </ul>
    <div class="insideBox">
    </div>
  <a id="next"> > </a>
  <a id="Previous"> < </a>
</div>

<强> CSS

.box{
    position:relative;
  width:400px;
  height:100px;
  background-image:url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg');
  background-size:100%;
  border:solid;
  overflow:hidden;
  z-index:1;
}

#urlList{
 display:none; 
}
.insideBox{
  position:absolute;
  width:100px;
  height:100px;
  background-image:url("http://hdlatestwallpaper.com/wp-content/uploads/2014/05/Green-Bubbles-Awesome-Background.jpg");
  background-size:100%;
  border:solid white;
  opacity:0.8;
  right:-5em;
  transform:skewX(-55deg);
  overflow:hidden;
}

.insideBox:hover{
  opacity:1;
}

a{
    margin-top:auto;
  margin-bottom:auto;
    width:20px;
  position:absolute;
  color:white;
  display:block;
  border:solid 1px white;
  text-align:center;
  font-family:arial;
  border-radius:20px;
}
a#next{
  right:0;

}