<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link href="css/slick-theme.css" rel="stylesheet" type="text/css" />
<link href="css/slick.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/plugins/slick.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script type="text/javascript">
$(document).ready(function () {
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows:true,
});
});
</script>
<style>
.slick-prev
{
left: 15px; /* left:30px;
left:0px;*/
}
.slick-next
{
right: 15px; /* right:0px;
right:13px;*/
}
.arrowhide .slick-arrow
{
opacity: 0;
transition: ease all 0.5s;
-webkit-transition: ease all 0.5s;
-o-transition: ease all 0.5s;
-moz-transition: ease all 0.5s;
}
.arrowhide:hover .slick-arrow
{
opacity: 9;
}
.slick-prev, .slick-next
{
height: 40px;
width: 40px;
z-index: 9;
background: gainsboro;
border-radius: 100%;
}
.slick-prev:hover, .slick-next:hover
{
background: #00AEEF;
}
.slick-dots
{
bottom: 0;
margin-bottom: 10px;
}
.slick-dots li button
{
background: rgba(255, 255, 255, 0.67);
border-radius: 100%;
}
.imgslide
{
margin-top: 4px;
display: inline-block;
border: solid 1px #E4E4E4;
}
img
{
vertical-align: middle;
height: 154px;
width: 263px;
float: right;
padding: 4px;
margin-top: 2px;
}
.slick-prev:hover, .slick-next:hover
{
color: transparent;
outline: none;
background: #00AEEF;
}
.arrowhide .slick-arrow
{
opacity: 0;
transition: ease all 0.5s;
-webkit-transition: ease all 0.5s;
-o-transition: ease all 0.5s;
-moz-transition: ease all 0.5s;
}
.multiple-items img
{
display: block;
width: 104%;
height: 49%;
padding-left: 7px;
padding-right: 0px;
margin-top: -8px;
}
. .multiple-items img
{
display: block;
width: 96%;
padding-left: 25px; /* height: 55%;
padding-right: -26px;
margin-top: -8px;
margin-right: 30px;
padding: 1px;
margin-top: -68px;
padding-top: -27px;*/
}
.multiple-items
{
width: 560px;
height: 180px;
margin-top: 10px;
}
.slick-initialized .multiple-items
{
display: block;
height: 359px;
width: 131px;
}
.flip
{
height: 199px;
width: 300px;
margin: 0 auto;
}
.flip img
{
width: 300px;
height: auto;
}
.flip .back
{
background: #2184cd;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-9 col-sm-6 col-xs-12" style="float: left;">
<div id="slider" class=" multiple-items" runat="server">
</div>
</div>
</div>
<%--</div>--%>
</div>
</body>
</html>
enter code here
protected void Page_Load(object sender, EventArgs e)
{
string strHtm = string.Empty;
int i = 0;
string[] filePaths = Directory.GetFiles(Server.MapPath("~/images/pic/"));
foreach (string filePath in filePaths)
{
string fileName = Path.GetFileName(filePath);
strHtm += @"<div id='DivNew" + i + @"'>
<img src='images/pic/" + fileName + @"' height=50 width=50 />
</div>";
i++;
}
slider.InnerHtml = strHtm;
}
}
你好我正在研究动态的多光滑滑块。我想要我的滑块图像我应该在鼠标悬停上翻转我该怎么办呢?上面是我的代码使用它显示滑块与动态图像但图像没有翻转
答案 0 :(得分:0)
这是您的答案
在此不完美的工作请将此代码放入您的网站
.slick-prev{
left: 15px;
}
.slick-next{
right: 15px;
}
.arrowhide .slick-arrow{
opacity: 0;
transition: ease all 0.5s;
-webkit-transition: ease all 0.5s;
-o-transition: ease all 0.5s;
-moz-transition: ease all 0.5s;
}
.arrowhide:hover .slick-arrow{
opacity: 9;
}
.slick-prev, .slick-next{
height: 40px;
width: 40px;
z-index: 9;
background: gainsboro;
border-radius: 100%;
}
.slick-prev:hover, .slick-next:hover{
background: #00AEEF;
}
.slick-dots{
bottom: 0;
margin-bottom: 10px;
}
.slick-dots li button{
background: rgba(255, 255, 255, 0.67);
border-radius: 100%;
}
.imgslide{
margin-top: 4px;
display: inline-block;
border: solid 1px #E4E4E4;
}
.slick-prev:hover, .slick-next:hover{
color: transparent;
outline: none;
background: #00AEEF;
}
.arrowhide .slick-arrow{
opacity: 0;
transition: ease all 0.5s;
-webkit-transition: ease all 0.5s;
-o-transition: ease all 0.5s;
-moz-transition: ease all 0.5s;
}
.multiple-items{
width: 100%;
margin-top: 10px;
}
.slick-initialized .multiple-items{
display: block;
height: 359px;
width: 131px;
}
.flip{
width: 100%;
margin: 0 auto;
}
.flip img{
width: 100%;
height: auto;
}
.flip .back{
background: #2184cd;
color: #fff;
text-align: center;
}
&#13;
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Flip/1.1.2/jquery.flip.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.multiple-items').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
});
});
</script>
<script>
$(function () {
$(".flip").flip({
trigger: 'hover'
});
});
</script>
<script>
$(function () {
$(".flip").flip({
trigger: 'hover',
axis: 'x'
});
});
</script>
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="float: left;">
<div id="slider" class=" multiple-items">
<div class="flip">
<div class="front">
<img src="https://s-media-cache-ak0.pinimg.com/originals/b8/d6/02/b8d60211137a9b9aca275adeb594d0c7.jpg" alt="" />
</div>
<div class="back">
<img src="https://s-media-cache-ak0.pinimg.com/originals/b8/d6/02/b8d60211137a9b9aca275adeb594d0c7.jpg" alt="" />
</div>
</div>
<div class="flip">
<div class="front">
<img src="https://s-media-cache-ak0.pinimg.com/originals/b8/d6/02/b8d60211137a9b9aca275adeb594d0c7.jpg" alt="" />
</div>
<div class="back">
<img src="https://s-media-cache-ak0.pinimg.com/originals/b8/d6/02/b8d60211137a9b9aca275adeb594d0c7.jpg" alt="" />
</div>
</div>
<div class="flip">
<div class="front">
<img src="https://s-media-cache-ak0.pinimg.com/originals/b8/d6/02/b8d60211137a9b9aca275adeb594d0c7.jpg" alt="" />
</div>
<div class="back">
<img src="https://s-media-cache-ak0.pinimg.com/originals/b8/d6/02/b8d60211137a9b9aca275adeb594d0c7.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
&#13;