小贝子编程

溢出 img 和滑块中 img 的过渡(HTML、CSS、JS)



我正在创建一个带有导航按钮的图像滑块。但是当我第一次运行页面时，所有图像都会像一行一样显示。我尝试"溢出：隐藏"，但它不起作用。导航功能，我按JS编码。我的页面还有一个功能，我使用图像映射到图像中。这就是为什么代码HTML有3个img_ID id(对于那些对此感到好奇的人(的原因:D

其次，当我单击导航按钮时，图像无法轻柔地移动(我的意思是，它看起来很难看到。当我单击导航按钮时，我想要这样光滑的东西：https://codeconvey.com/Tutorials/cssSlider/(

我尝试了我知道的事情，但它仍然不起作用:( 这里有人能弄清楚我的问题吗？非常感谢您的支持。对不起，我的英语:(不好 这是我的代码：

var slideIndex = 1;
showSlides(slideIndex);
function nextFlyer(n) {
showSlides(slideIndex += n);
}
function currentFlyer(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("imgFlyers");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
/*-------- ADJUSTING IMG OF FLYERS --------*/
.section_layer {
width: 100%;
}
#img_ID {
width: 100%;
height: 50%;
float: left;
display: inline-block;
/*background-repeat: no-repeat;*/
z-index: 1;
/*display: block;
margin: 0 auto;*/
-webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
.img_content {
display: block;
margin: 0 auto;
}
/*---------- NAVIGATION BUTTON ----------*/
.flyer-navigation-button {
height: 100px;
width: 100px;
margin: 0;
padding: 20px;
background: 0;
border: 0;
cursor: pointer;
}
.flyer-navigation-button:hover {
opacity: .4;
}
.flyer-navigation-button svg circle {
fill: #0073c5;
}
.flyer-navigation-button svg polygon {
fill: #fff;
}
.border_test {
border: 1px solid black;
}
.navigation_container {
position: relative;
}
button:focus {
outline: 0
}
.pages_number {
position: absolute;
background-color: beige;
}
.pages_number span {
font-family: myriad-pro, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #0073c5;
font-size: 20px;
}
.zoom_slider {
width: 30%;
float: left;
}
.pages_number {
float: left;
width: 40%;
}
.download_button {
float: right;
width: 20%
}
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dot:hover {
background-color: #717171;
}
/*------- FOLDER IMAGES INTO 1 SLIDE ---------*/
#image_slider{
position: relative;
height: auto;
list-style: none;
overflow: hidden;
float: left;
/*Chrom default padding for ul is 40px */
padding:0px;
margin:0px;
}
#image_slider li{
position: relative;
float: left;
}
#pager li{
padding: 0px;
margin:5px;
width:20px;
height:20px;
border:1px solid white;
color:white;
list-style: none;
opacity: 0.6;
float:left;
border-radius: 3px;
cursor: pointer;
}
<!-- begin snippet: js hide: false console: true babel: false -->

试试这个...

var slideIndex = 1;
showSlides(slideIndex);
function nextFlyer(n) {
showSlides(slideIndex += n);
};
function showSlides(n) {
var i;
var op = 0.1;
var slides = document.getElementsByClassName("imgFlyers");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.opacity = 0;
setTimeout(function() {
slides[slideIndex - 1].style.opacity = 1;
}, 100);
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
.section_layer {
width: 100%;
}
#img_ID {
width: 100%;
height: 50%;
float: left;
display: inline-block;
/*background-repeat: no-repeat;*/
z-index: 1;
/*display: block;
margin: 0 auto;*/
-webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
.img_content {
display: block;
margin: 0 auto;
}
/*---------- NAVIGATION BUTTON ----------*/
.flyer-navigation-button {
height: 100px;
width: 100px;
margin: 0;
padding: 20px;
background: 0;
border: 0;
cursor: pointer;
z-index: 1000;
}
.flyer-navigation-button:hover {
opacity: .6;
}
.flyer-navigation-button svg circle {
fill: #0073c5;
}
.flyer-navigation-button svg polygon {
fill: #fff;
}
.border_test {
border: 1px solid black;
}
.navigation_container {
position: relative;
}
button:focus {
outline: 0
}
.pages_number {
position: absolute;
background-color: beige;
}
.pages_number span {
font-family: myriad-pro, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #0073c5;
font-size: 20px;
}
.zoom_slider {
width: 30%;
float: left;
}
.pages_number {
float: left;
width: 40%;
}
.download_button {
float: right;
width: 20%
}
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dot:hover {
background-color: #717171;
}
/*------- FOLDER IMAGES INTO 1 SLIDE ---------*/
#image_slider {
position: relative;
height: auto;
list-style: none;
overflow: hidden;
float: left;
/*Chrom default padding for ul is 40px */
padding: 0px;
margin: 0px;
}
#image_slider li {
position: relative;
float: left;
}
#pager li {
padding: 0px;
margin: 5px;
width: 20px;
height: 20px;
border: 1px solid white;
color: white;
list-style: none;
opacity: 0.6;
float: left;
border-radius: 3px;
cursor: pointer;
}
.imgFlyers {
-webkit-transition: all 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: all 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
ul {
display: block;
list-style-type: disc;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
<div id="flyer_view_tab">
<div class="navigation-bar">
<a id="pdf_button" target="_blank" href="#">Download</a>
</div>
<div class="flyer_content">
<div class="section_layer">
<div class="navigation_container">
<button class="flyer-navigation-button" is="w-navigation-button" id="flyer_navigation_backward" style="left: 0px;position: absolute;top: 0px;" onclick="nextFlyer(-1)">
<svg viewBox="0 0 58 58" focusable="false">
<circle cx="29" cy="29" r="28.6"></circle>
<polygon points="14.9,29.4 31.9,13.1 37.1,17.4 24,29.4 37.1,41.7
32.7,45.9"></polygon>
</svg>
</button>
<button class="flyer-navigation-button" is="w-navigation-button" id="flyer_navigation_forward" style="right: 0px; position: absolute; top: 0px; float: right;" onclick="nextFlyer(1)">
<svg viewBox="0 0 58 58" focusable="false">
<circle cx="29" cy="29" r="28.6"></circle>
<polygon points="43.1,29.4 26.1,13.1 20.9,17.4 34,29.4 20.9,41.7
25.3,45.9"></polygon>
</svg>
</button>
</div>
<div class="image-holder">
<ul>
<li class="imgFlyers dot">
<img src="https://static.pexels.com/photos/33537/cat-animal-cat-portrait-mackerel.jpg" height="250" width="510" />
</li>
<li class="imgFlyers dot">
<img src="https://s-media-cache-ak0.pinimg.com/736x/0e/7f/7b/0e7f7b3f029a82e8e797ab6d3525ee5f--spring-animals-wild-animals.jpg" height="250" width="510" />
</li>
<li class="imgFlyers dot">
<img src="https://newevolutiondesigns.com/images/freebies/animals-background-preview-3.jpg" height="250" width="510" />
</li>
</ul>
</div>
</div>
</div>
</div>

您使用此 id#image_slider进行样式设置，但在 HTMl 中没有使用。还有其他样式在CSS中存在，但在HTML中不存在。

var slideIndex = 1;
showSlides(slideIndex);
function nextFlyer(n) {
showSlides(slideIndex += n);
}
function currentFlyer(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("imgFlyers");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
/*-------- ADJUSTING IMG OF FLYERS --------*/
html, body{
height: 100%;
margin:0;
}
.section_layer, .flyer_content, .image-holder {
width: 100%;
height: 100%;
}
.imgFlyers {
width: 100%;
height: 100%;
float: left;
display: inline-block;
z-index: 1;
-webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
/*---------- NAVIGATION BUTTON ----------*/
.flyer-navigation-button {
height: 100px;
width: 100px;
margin: 0;
padding: 20px;
background: 0;
border: 0;
cursor: pointer;
}
.flyer-navigation-button:hover {
opacity: .4;
}
.flyer-navigation-button svg circle {
fill: #0073c5;
}
.flyer-navigation-button svg polygon {
fill: #fff;
}
/*.navigation_container {
position: relative;
}*/
.flyer-navigation-button{
position: absolute;
top: calc(50% - 30px); 
}
.flyer-navigation-button.left {
left: 0;
}
.flyer-navigation-button.right {
right: 0;
}
button:focus {
outline: 0;
}
.pages_number span {
font-family: myriad-pro, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #0073c5;
font-size: 20px;
}
<div class="flyer_content">
<div class="section_layer">
<!-- BEGIN THE NAVIGATION CONTENT -->
<div class="navigation_container">
<button class="flyer-navigation-button left" id="flyer_navigation_backward"
onclick="nextFlyer(-1)">
<svg viewBox="0 0 58 58" focusable="false">
<circle cx="29" cy="29" r="28.6"></circle>
<polygon points="14.9,29.4 31.9,13.1 37.1,17.4 24,29.4 37.1,41.7
32.7,45.9"></polygon>
</svg>
</button>
<button class="flyer-navigation-button right" id="flyer_navigation_forward"
onclick="nextFlyer(1)">
<svg viewBox="0 0 58 58" focusable="false">
<circle cx="29" cy="29" r="28.6"></circle>
<polygon points="43.1,29.4 26.1,13.1 20.9,17.4 34,29.4 20.9,41.7
25.3,45.9"></polygon>
</svg>
</button>
</div>
<!-- END THE NAVIGATION CONTENT -->
<div class="image-holder">
<img class="imgFlyers" style="display: inline-block;" src="https://img07.rl0.ru/c4dea1147b4a02e2ff38a9fdbd8bed7a/c2560x1600/img.mota.ru/upload/wallpapers/2009/07/16/12/02/14317/ny_349-2560x1600.jpg" usemap="#flyermap" />
<img class="imgFlyers" style="display: none" src="http://weconnectedproductionsllc.com/wp-content/uploads/2015/02/Snowing-at-night-in-Park-City-UT.jpg" usemap="#flyermap" />
<img class="imgFlyers" style="display: none" src="http://3.bp.blogspot.com/-Gt8kdm8xwaA/VfMLfJT6DbI/AAAAAAAACJ8/ukXJoWeYFVk/s1600/DSC00392B.jpg" />
</div>
</div>
</div>

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium