jquery是否有类似的滑块,滑块一角可以看到第二个图像预览?
由于
答案 0 :(得分:0)
我已经在这个问题上创造了我最好的尝试,我希望它足够但我自己并不满意,因为它使用背景图像。如果您需要帮助理解它,请询问。您可以通过更改列表网址来更改图像。我认为我的动态足以扩展更多的图像。 css的大小应该可以很容易地改变。
为了让它更好地工作,你可以拥有它,所以当你在预览中盘旋时它会显示为“主”显示,直到你退出悬停状态。
请注意,这不幸仅适用于某些浏览器(在Firefox上测试过,不适用于Chrome)。这可能是可以解决的,基本上你需要找出如何在chrome上使用skewX。
<强> 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;
}