个人中心
gpt4 book ai didi

html - 使我的 jquery slider 响应

转载 作者：行者123 更新时间：2023-11-28 05:05:56 25 4
gpt4 key购买 nike

我已经创建了我的 jquery slider ，现在我在尝试使其响应时遇到问题。导航点和导航按钮可以定位在固定高度。但我想将下一个按钮放置在旋转木马的中央右侧，并希望以 % 的形式进行。所以，我将 height:100% 赋给它的父体，#container，#carousel。它有效，但页面按比例缩放，如您在我提供的演示中所见。有什么建议如何以百分比定位#next,#prev 吗？

这是我的作品:http://codepen.io/anon/pen/ZpXmQj 

html,
body {
  position: relative;
  background-color: #ccc;
}
Css html,
body {
  height: 100%;
  position: relative;
  background-color: #ccc;
}
* {
  box-sizing: border-box;
}
#container {
  width: 90%;
  margin: 0 auto;
  height: 100%;
  background-color: white;
}
header {
  background: black;
  height: 20px;
  padding: 1.5em;
  color: white;
}
#carousel {
  position: relative;
  margin: 0 auto;
  width: 45%;
  margin-top: 15px;
  height: 100%;
  background-color: pink
}
.slide {
  position: absolute;
  max-width: 100%;
  z-index: 0;
}
.sliderbuttons {} #prev,
#next {
  position: absolute;
  background-color: rgba(255, 148, 41, 0.68);
  box-shadow: 2px white;
  border: none;
  font-size: 2em;
  padding: 1%;
  color: white;
  font-weight: bold;
  font-family: 'Baloo Tamma', cursive;
  height: 100%;
  width: 10%;
  /*making the prev,next on top of content*/
  z-index: 2;
}
#prev {
  left: 0;
}
#next {
  right: 0;
}
.active {
  z-index: 1;
}
.indicators {
  z-index: 2;
  position: absolute;
  bottom: 49%;
  left: 45%;
}
.circle {
  border-radius: 10px;
  width: 10px;
  height: 5px;
  border: 2px solid black;
}
.indicators div {
  padding: 8px;
  margin: 2px;
  display: inline-block;
}
.blip {
  background-color: orange;
}
div.indicators:hover {
  cursor: pointer;
}
<!DOCTYPE html>
<html>

<head>
  <title>Image carousel</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="reset.css">
  <link rel="stylesheet" type="text/css" href="carouselcss.css">
  <!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> -->

</head>

<body>
  <div id="container">
    <header>
      header is here
    </header>
    <div id="carousel">
      <div class="sliderbuttons">
        <input type="button" name="next" id="next" value="&gt;">
        <input type="button" name="next" id="prev" value="&lt;">
      </div>
      <div class="slides">
        <img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
        <img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
        <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">

      </div>
      <div class="indicators">
        <div class="circle blip"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>


    </div>

  </div>

</body>

</html>

最佳答案

检查 this出去。我相信发生的事情是您的下一个和上一个正在调整屏幕的高度，而不是您希望的图像高度。

所以要自定义它，首先将图像的高度和宽度设置为您想要的任何值，为您的按钮匹配相同的高度，只要它们在同一个父 div 中，它就应该匹配

<html>
<head>
<title>Image carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="carouselcss.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> -->

</head>
<body>
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value="&gt;">
<input type="button" name="prev" id="prev" value="&lt;">
</div>
<div class="slides">
    <img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
    <img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
    <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">

</div>
<div class="indicators">
    <div class="circle blip"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>


</div>

</div>

</body>
</html>

html,body {
    height: 100%;
    position: relative;
    background-color: #ccc;
}

*{
    box-sizing: border-box;
}



#container {
    width: 90%;
    margin: 0 auto;
    height: 100%;
    background-color: white;
}

header {
    background: black;
    height: 20px;
    padding: 1.5em;
    color: white;
}

#carousel {
    position: relative;
    margin: 0 auto;
    width: 45%;
    margin-top: 15px;
    height: 100%;
    background-color: pink

} 

.slide {
    position: absolute;
    width: 100%;
    z-index: 0;
    height: 100%;
}
.sliderbuttons {
}

#prev,#next {
    position: absolute;
    background-color: rgba(255, 148, 41, 0.68);
    box-shadow: 2px white;
    border:none;
    font-size: 2em;
    padding: 1%;
    color: white;
    font-weight: bold;
    font-family: 'Baloo Tamma', cursive;
    height: 100%;
    width: 10%;
    /*making the prev,next on top of content*/
    z-index: 2;
}
#prev {
    left:0;
}
#next {
    right:0;
}

.active {
    z-index: 1;
}

.indicators {
    z-index: 2;
    position: absolute;
    bottom:49%;
    left: 45%;
}
.circle {
    border-radius: 10px;
    width: 10px;
    height: 5px;
    border:2px solid black;
}

.indicators div {
    padding: 8px;
    margin: 2px;
    display: inline-block;

}

.blip {
    background-color: orange;
}

div.indicators:hover {
    cursor: pointer;

}

关于html - 使我的 jquery slider 响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39822970/

25 4 0
文章推荐： Javascript重定向无限循环
文章推荐： php - 如何使从数据库中抓取的链接显示为可点击的事件链接？
文章推荐： jquery - 在 jQuery 中获取 CSS 规则的百分比值
文章推荐： html - td 中位置为 :relative overlaps on another position:fixed element 的元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com