javascript - 样式搜索 slider-6ren

javascript - 样式搜索 slider

转载作者：行者123 更新时间：2023-11-28 00:50:26

我这里有这个视频播放器，但我遇到了一些问题。我试图让 seekslider 在 slider 拇指之后显示不同的颜色。 This is What I'm trying to achive

我到处都找了找，找不到一个可以工作并匹配我正在寻找的样式的，有没有可能的方法来做到这一点。

var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn;
function intializePlayer(){
	// Set object references
	vid = document.getElementById("my_video");
	playbtn = document.getElementById("playpausebtn");
	seekslider = document.getElementById("seekslider");
	curtimetext = document.getElementById("curtimetext");
	durtimetext = document.getElementById("durtimetext");
	mutebtn = document.getElementById("mutebtn");
	volumeslider = document.getElementById("volumeslider");
	fullscreenbtn = document.getElementById("fullscreenbtn");
	// Add event listeners
	playbtn.addEventListener("click",playPause,false);
	seekslider.addEventListener("change",vidSeek,false);
	vid.addEventListener("timeupdate",seektimeupdate,false);
	mutebtn.addEventListener("click",vidmute,false);
	volumeslider.addEventListener("change",setvolume,false);
	fullscreenbtn.addEventListener("click",toggleFullScreen,false);
}
window.onload = intializePlayer;
function playPause(){
	if(vid.paused){
		vid.play();
		playbtn.style.background = "url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/pause.png)";
playbtn.style.backgroundSize="100% 100%";
	} else {
		vid.pause();
		    playbtn.style.background = "url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/play.png)";
playbtn.style.backgroundSize="100% 100%";
	}
}


function vidSeek(){
	var seekto = vid.duration * (seekslider.value / 100);
	vid.currentTime = seekto;
}
function seektimeupdate(){
	var nt = vid.currentTime * (100 / vid.duration);
	seekslider.value = nt;
	var curmins = Math.floor(vid.currentTime / 60);
	var cursecs = Math.floor(vid.currentTime - curmins * 60);
	var durmins = Math.floor(vid.duration / 60);
	var dursecs = Math.floor(vid.duration - durmins * 60);
	if(cursecs < 10){ cursecs = "0"+cursecs; }
	if(dursecs < 10){ dursecs = "0"+dursecs; }
	if(curmins < 10){ curmins = "0"+curmins; }
	if(durmins < 10){ durmins = "0"+durmins; }
	curtimetext.innerHTML = curmins+":"+cursecs;
	durtimetext.innerHTML = durmins+":"+dursecs;
}
function vidmute(){
	if(vid.muted){
		vid.muted = false;
		mutebtn.style.background = "url(file:///H:/SSEmery/player/unmute.png) no-repeat";
mutebtn.style.backgroundSize="100% 100%";
	} else {
		vid.muted = true;
		mutebtn.style.background = "url(file:///H:/SSEmery/player/mute.png) no-repeat";
mutebtn.style.backgroundSize="100% 100%";
	}
}
function setvolume(){
	vid.volume = volumeslider.value / 100;
}
function toggleFullScreen(){
	if(vid.requestFullScreen){
		vid.requestFullScreen();
	} else if(vid.webkitRequestFullScreen){
		vid.webkitRequestFullScreen();
	} else if(vid.mozRequestFullScreen){
		vid.mozRequestFullScreen();
	}
}

video#my_video {
    top: 0px;
    position: relative;
    width: 100%;
    height: 56.2225%;
}

div.time {
    font-family: monospace;
    color: #ffffff;
    text-shadow: 1px 1px 0.5px #0000ff;
    background: #4b4b4b;
    background: -webkit-linear-gradient(top, #4b4b4b 0%,#1e1e1e 25%,#000000 44%,#000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#4b4b4b),color-stop(25%, #1e1e1e),color-stop(44%, #000000),to(#000000));
    background: -o-linear-gradient(top, #4b4b4b 0%,#1e1e1e 25%,#000000 44%,#000000 100%);
    background: linear-gradient(to bottom, #4b4b4b 0%,#1e1e1e 25%,#000000 44%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b4b4b', endColorstr='#000000',GradientType=0 );
    margin-left: 2px;
    display: inline-block;
    background-color: black;
    padding: 2px 2px 2px 2px;
    border: 1px solid white;
    border-radius: 5px;
}

div#video_player_box {
    background-repeat: no-repeat;
    background-size: 100% 85%;
    max-width: 787px;
    max-height: 787px;
    border-top: 5px solid #646464;
    border-right: 5px solid #000000;
    border-left: 5px solid #646464;
    border-bottom: 5px solid #000000;
    margin: 0px auto;
    background: #000000;
}

div#video_controls_bar {
    background: #9d9d9d;
    background: -webkit-linear-gradient(top, #9d9d9d 0%,#8d8d8d 10%,#4f4f4f 43%,#474747 51%,#1e1e1e 51%,#000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#9d9d9d),color-stop(10%, #8d8d8d),color-stop(43%, #4f4f4f),color-stop(51%, #474747),color-stop(51%, #1e1e1e),to(#000000));
    background: -o-linear-gradient(top, #9d9d9d 0%,#8d8d8d 10%,#4f4f4f 43%,#474747 51%,#1e1e1e 51%,#000000 100%);
    background: linear-gradient(to bottom, #9d9d9d 0%,#8d8d8d 10%,#4f4f4f 43%,#474747 51%,#1e1e1e 51%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#000000',GradientType=0 );
    border-top: 5px solid #000;
    border-right: 5px solid #646464;
    border-left: 5px solid #000;
    border-bottom: 5px solid #646464;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    color: #fff;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

button#playpausebtn.playpausebtn {
    right: 4px;
    border-radius: 100%;
    background-size: 100% 100%;
    border: none;
    outline: none;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnon.png) no-repeat;
    float: left;
    width: 44px;
    height: 44px;
    cursor: pointer;
    opacity: 1;
}

button#playpausebtn:hover {
    width: 44px;
    height: 44px;
    background-size: 100% 100%;
    border: none;
    outline: none;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnonhover.png) no-repeat;
}

button#playpausebtn:active {
    width: 44px;
    height: 44px;
    background-size: 100% 100%;
    border: none;
    outline: none;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnonclick.png) no-repeat;
}

button#fullscreenbtn {
    border-radius: 100%;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreen.png) no-repeat;
    border-style: solid;
    background-size: 100% 100%;
    border-top: 2px solid #000;
    border-right: 2px solid #646464;
    border-left: 2px solid #000;
    border-bottom: 2px solid #646464;
    width: 25px;
    float: right;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
}

button#fullscreenbtn:hover {
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreenhover.png) no-repeat;
    border-style: solid;
    background-size: 100% 100%;
    border-top: 2px solid #000;
    border-right: 2px solid #646464;
    border-left: 2px solid #000;
    border-bottom: 2px solid #646464;
    width: 25px;
    float: right;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
}

button#fullscreenbtn:active {
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreenclick.png) no-repeat;
    border-style: solid;
    background-size: 100% 100%;
    border-top: 2px solid #000;
    border-right: 2px solid #646464;
    border-left: 2px solid #000;
    border-bottom: 2px solid #646464;
    width: 25px;
    float: right;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
}

button#mutebtn.mutebtn {
    position: fixed;
    background-size: 100% 100%;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/unmute.png) no-repeat;
    width: 25px;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
    border-radius: 100%;
}

button#mutebtn:hover {
    background-size: 100% 100%;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volhover.png) no-repeat;
    width: 25px;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
}

button#mutebtn:active {
    background-size: 100% 100%;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volclick.png) no-repeat;
    width: 25px;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
}

input#seekslider {
    margin-bottom: 13px;
    float: right;
    -webkit-box-shadow: inset 0 0 1px 0.1px white;
    box-shadow: inset 0 0 1px 0.1px white;
    outline: none;
    max-height: 5px;
    height: 100%;
    width: 100%;
    max-width: 707px;
    float: top;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.61)),color-stop(10%, rgba(255,255,255,0.55)),color-stop(43%, rgba(255,255,255,0.3)),color-stop(50%, rgba(255,255,255,0.27)),color-stop(51%, rgba(255,255,255,0.11)),to(rgba(255,255,255,0))), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
    background: -o-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
    background: linear-gradient(to bottom, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
    background-size: 100% 100%;
}

input#volumeslider {
    margin-left: 30px;
    -webkit-box-shadow: inset 0 0 1px 0.1px white;
    box-shadow: inset 0 0 1px 0.1px white;
    outline: none;
    max-width: 128px;
    width: 100%;
    height: 100%;
    max-height: 10px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.61)),color-stop(10%, rgba(255,255,255,0.55)),color-stop(43%, rgba(255,255,255,0.3)),color-stop(50%, rgba(255,255,255,0.27)),color-stop(51%, rgba(255,255,255,0.11)),to(rgba(255,255,255,0))), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
    background: -o-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
    background: linear-gradient(to bottom, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
    background-size: 100% 100%;
}

input[type='range'] {
    -webkit-appearance: none !important;
    border-width: 1px;
    border-style: solid;
    border-color: #000;
}

input[type='range']::-webkit-slider-thumb {
    border-radius: 100%;
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timeslider.png) no-repeat;
    background-size: 100% 100%;
    height: 15px;
    width: 15px;
    cursor: pointer;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

input[type='range']::-webkit-slider-thumb:hover {
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timesliderhover.png) no-repeat;
    background-size: 100% 100%;
    height: 18px;
    width: 18px;
    cursor: pointer;
}

input[type='range']::-webkit-slider-thumb:active {
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timesliderclick.png) no-repeat;
    background-size: 100% 100%;
    height: 18px;
    width: 18px;
    cursor: pointer;
}

input[type='range'].vol {
    -webkit-appearance: none !important;
    border-width: 1px;
    border-style: solid;
    border-color: hsl(0, 0%, 0%);
}

input[type='range'].vol::-webkit-slider-thumb {
    border-radius: 100%;
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/vol.png) no-repeat;
    background-size: 100% 100%;
    height: 15px;
    width: 15px;
    cursor: pointer;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

input[type='range'].vol::-webkit-slider-thumb:hover {
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volhover.png) no-repeat;
    background-size: 100% 100%;
    height: 18px;
    width: 18px;
    cursor: pointer;
}

input[type='range'].vol::-webkit-slider-thumb:active {
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volclick.png) no-repeat;
    background-size: 100% 100%;
    height: 18px;
    width: 18px;
    cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="video_player_box">
 <video id="my_video"  width="100%" height="56.2225%" controlslist="nodownload">
    <source src="https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/test.mp4" >
  </video>
 </head>
 <body>
  <div id="video_controls_bar">
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<button id="playpausebtn" class="playpausebtn" style= "background-size: 100% 100%;" "background-image: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnon.png);"></button>
<div class="time">
  <span id="curtimetext">SSEmery</span> / <span id="durtimetext">Player</span>
  </div>
<button id="mutebtn" class="mutebtn" style= "background-size: 100% 100%;" "background-image: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/unmute.png) no-repeat;"></button>
    <input id="volumeslider" class="vol" type="range" min="0" max="100" value="100" step="1">
    <button id="fullscreenbtn"></button> 
</div>
</div>
</body>
</html>

最佳答案

目前，没有任何针对 slider 内部不同组件样式的标准化规范(input 的 range 类型)。要实现此效果，您可以使用以下两种方法之一:

使用非标准和实验性 vendor 特定的伪元素
即使没有标准的方法来实现这一点，所有主要的浏览器 vendor 正在使用一些伪元素来控制 slider 的样式。
- Chrome/Safari/Opera:没有直接的方法来控制 input 的样式的 range类型在 WebKit 中。类似的方法是使用 <progress />元素作为 slider 。 ::-webkit-progress-value控制拇指前的轨道样式( MDN ::-webkit-progress-value );
- 火狐: ::-moz-range-progress控制拇指前的轨道样式( MDN ::-moz-range-progress );
- 边缘/IE: ::-ms-fill-lower和 ::-ms-fill-upper控制左右拇指轨迹的一侧(或垂直 slider 的下部和上部)分别。 (MDN ::-ms-fill-lower 和 MDN ::-ms-fill-upper )。
您可以分别检查每个页面以将样式规则应用于特定 slider 轨道的一部分。
这种方法需要你在不同的环境中保持大量的风格浏览器。当浏览器更改时，您的样式将来可能会中断他们对这些 CSS 规则的解释。但这可以在纯CSS。
使用一组 DOM 节点组成一个 slider
由于 slider 纯粹是一个控件，用于指示当前进度并提供用户更改进度的界面，可以使用一组 DOM 节点来实现这一点并注册相关的事件监听器来处理交互与用户。

关于javascript - 样式搜索 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47841216/

文章推荐： javascript - 显示注册模式窗口然后立即登录模式

文章推荐： javascript - 切换多个图像并将它们设置为背景

文章推荐： html - 在 html 和 css 中实现卡片式 View 时遇到问题

文章推荐： javascript - 如何在html5和jboss服务器中使用svgz文件

slider - 简单画廊 slider
我正在尝试使用 div 和 javascript 创建一个简单的 slider 。我设置了一个包含六个图像的 div 和一个箭头，每次单击它时，该箭头都会将包含图像的容器拍摄为 528px(每个图像的
slider - 如何使用flexslider设置多个 slider ？
我使用flexslider，当我按照他们网站上的说明操作时，它不适用于多个 slider ，这是代码: 我需要在两个 slider 上都有一个 Controller 导航，说明如下: http://w
javascript - jQuery Slider - 如何根据另一个 slider 制作一组具有最大值的 slider ？
这是一个困难的问题，我一直在努力让它发挥作用。它确实起作用了一半，但我认为逻辑是问题所在。下面我会解释一下情况和问题。情况:想要使用 slider Controller 来选择房间内可以占用的成人、
javascript - 我的 slider 只显示第一个和第三个 slider ，但不显示表格的第二个和第四个 slider
我制作了一个简单的 slider ，它适用于普通表格，但是当我尝试将该 slider 用于我的自定义 Bootstrap 表格时，只有第一个、第三个 slider 出现，而不是第二个和第四个。 var
javascript - 在 Bootstrap slider 上具有相同值的另一个 slider 上滑动相同的 slider
我正在使用 Bootstrap slider http://seiyria.com/bootstrap-slider/对于贷款产生者。这里没问题。但是我必须使用相同的 slider ，一个位于顶部，
javascript - 光滑的 slider 随机自动播放速度，适用于具有相同 slider 类别的更多 slider
我正在使用光滑的 slider 。我在页面上有三个 slider ，它们都有相同的类和光滑的选项。但是，我想要三个不同的灵活“autoplaySpeed”选项，或者为所有三个 slider 分别添加随
javascript - 使用 Bootstrap Slider 一个 Slider 结果是另外两个 Slider 的总和
我试图用 Slider2 和 Slider3 的总和来更新 Slider1 的值，但它只显示 Slider1 或 Slider2 的值，以移动的为准。我在更新 Slider1 的值时犯了一些错误。 H
javascript - 即使 slider 的元素结束，如何使 slider 继续循环(如何包装 slider )？
我使用 css 和 html 以及 jQuery 创建了一个 slider 。该 slider 与下一个按钮配合使用效果很好，但与上一个按钮配合使用效果不佳。假设我在第一张幻灯片上有五个元素，总共有
javascript - jQuery slider : only last slider working on page with multiple sliders
我正在制作一个包含多个 slider 的页面，其中 slider 的数量和选项根据用户的不同而不同。我遇到一个问题，所有 slider 都已创建并显示，但只有最后一个 slider 是可拖动的。简单
jQuery-ui 问题 : . slider ("value")返回 slider 本身而不是 slider 的值
我正在尝试获取 jQuery-UI slider 的当前值在 JavaScript 函数中，它不起作用。如果我这样做 $("#someParticularDOMObject").find(".sl
javascript - JQuery UI 响应式(Reactive) slider (在 slider 更改时同时更新多个 slider )
我正在尝试在 JQuery UI 中的 slider 的 slide 和 change 事件上同时更新多个 slider 。我有如下代码: $(function() { var totalS
javascript - 如何在 jQuery UI Slider 中将 slider 指针移动到 slider 刻度中的特定点？
我正在使用来自 Filament 组的 jQuery UI slider ，它将 SELECT 元素转换为 slider 。它工作正常。现在我想使用 JavaScript 以编程方式将 slider
slider - NIVO SLIDER - 将幻灯片设为链接？
是否可以在 NIVO SLIDER 中将幻灯片设为链接？最佳答案嗯，不知道是不是一样，但是...... 我在 IE 所有版本中的链接都有问题，其他浏览器工作正常，通过添加解决: backgroun
slider - 光滑的 slider 将点更改为单词
在我的项目中，我使用了光滑的 slider 插件(http://kenwheeler.github.io/slick/) 我需要更改单词的默认点导航。单击单词后应更改幻灯片。最佳答案这是更新的代码
slider - nivo slider ，是一种始终显示下一个和上一个箭头的方法吗？
我正在使用 nivo slider (默认主题)，我将上一个和下一个箭头定位在图像旁边(不是在图像顶部)，我想知道是否有一种方法可以始终显示下一个和上一个箭头(现在箭头仅在您将鼠标悬停在图像上时显示)
slider - 拖动 slider 时进行标签更新
我正在使用 Slider在我的 javaFX 项目中，我有一个 Label当我移动 slider 时会更新。我想要 Label在我拖动 Slider 时进行更新不仅在拖放时。这是我的代码: be
slider - 光滑的 slider 不会总是第一次加载
我有一个事件站点，一页上有 3 个光滑的 slider ，通常光滑的 slider 不会初始化，而是我只看到所有的图像，有时如果我刷新它们都开始工作。 https://au.hairandme.com
slider - 根据 slider 死亡的海龟数量
我想让每年一定数量的海龟(由 slider 控制)死亡。到目前为止，我明白了，它可能非常简单，但我似乎无法使其发挥作用。多谢! to hunting let huntedturtles (count
slider - 响应式全屏 slider 中内容相对于行宽度的绝对定位
我有一个带背景图像的全宽 slider 。 slider 高度根据图像进行响应，因此它始终在屏幕的一侧到另一侧显示 100% 的图像。现在我尝试将内容(文本)放置在 slider 内，使其位于内容网
slider - 滑动 slider 空白
我对 Swiper slider 有一些问题。当我滚动到 slider 的末尾时，可以看到一些空白区域。 http://take.ms/siqXj swiper = new Swiper(profil

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 样式搜索 slider