如何制作纯css滑块的导航栏？
我想制作CSS滑块的导航栏。
Here是您可以看到的实时演示。
我还想将图像水平滑动
任何想法如何实现这一目标？
当我发布我的完整代码时，也有一个错误显示，所以这里是我在jsfiddle添加完整的css编码，不要担心图像不会显示但是它有完整的编码。
HTML
<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<a href="#">
<img src="images/img_1.jpg" alt="Cougar"/>
</a>
<div class="tooltip">
<h1>Cougar</h1>
</div>
</li>
<li id="second" class="secondanimation">
<a href="#">
<img src="images/img_2.jpg" alt="Lions"/>
</a>
<div class="tooltip">
<h1>Lions</h1>
</div>
</li>
<li id="third" class="thirdanimation">
<a href="#">
<img src="images/img_3.jpg" alt="Snowalker"/>
</a>
<div class="tooltip">
<h1>Snowalker</h1>
</div>
</li>
<li id="fourth" class="fourthanimation">
<a href="#">
<img src="images/img_4.jpg" alt="Howling"/>
</a>
<div class="tooltip">
<h1>Howling</h1>
</div>
</li>
<li id="fifth" class="fifthanimation">
<a href="#">
<img src="images/img_5.jpg" alt="Sunbathing"/>
</a>
<div class="tooltip">
<h1>Sunbathing</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
</div>
CSS
html, body {
background: #eaeaea url(../img/bg.png) repeat;
font-size: 12px;
font-family: "Open Sans", serif;
min-width: 960px;
margin: 0;
padding: 0;
color: #aaa;
}
.content h1 {
font-size: 48px;
color: #000;
text-shadow: 0px 1px 1px #f4f4f4;
text-align: center;
padding:60px 0 30px;
}
/* LAYOUT */
.container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}
/* CONTENT SLIDER */
#content-slider {
width: 100%;
height: 360px;
margin: 10px auto 0;
}
/* SLIDER */
#slider {
background: #000;
border: 5px solid #eaeaea;
box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
#mask {
overflow: hidden;
height: 320px;
}
#slider ul {
margin: 0;
padding: 0;
position: relative;
}
#slider li {
width: 680px;
height: 320px;
position: absolute;
top: -325px;
list-style: none;
}
#slider li.firstanimation {
-moz-animation: cycle 25s linear infinite;
-webkit-animation: cycle 25s linear infinite;
}
#slider li.secondanimation {
-moz-animation: cycletwo 25s linear infinite;
-webkit-animation: cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-moz-animation: cyclethree 25s linear infinite;
-webkit-animation: cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-moz-animation: cyclefour 25s linear infinite;
-webkit-animation: cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-moz-animation: cyclefive 25s linear infinite;
-webkit-animation: cyclefive 25s linear infinite;
}
#slider .tooltip {
background: rgba( 0, 0, 0, 0.7 );
width: 300px;
height: 60px;
position: relative;
bottom: 75px;
left: -320px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color: #fff;
font-size: 24px;
font-weight: 300;
line-height: 60px;
padding: 0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left: 0px;
}
#slider:hover li,
#slider:hover .progress-bar {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
/* PROGRESS BAR */
.progress-bar {
position: relative;
top: -5px;
width: 680px;
height: 5px;
background: #000;
-moz-animation: fullexpand 25s ease-out infinite;
-webkit-animation: fullexpand 25s ease-out infinite;
}
2 个答案:
答案 0 :(得分：0)
要水平滚动，您只需更改动画中的top值和#slider li到left（我将其复制到Word并使用替换功能），{{3 }}。如果您希望它们以其他方式滚动，则可以将left更改为right s，Demo of that
你想要的外观使用“无线电”按钮。我不知道是否不可能用纯CSS做你想做的事情，但这需要一些疯狂的动画操作
使用javascript更容易，但CSS动画仍然很难。经过一段时间的思考后，我想出了Demo of that（有缺陷的版本，请看下面有更好的版本），它依赖于动画的类名。
经过更多的工作后，我能够提出一个解决方案，其中包括转换到下一张图片，this solution！现在这是一项相当大的工作，但我希望这些评论让人们更容易理解。哈哈，我不太确定你能用纯CSS做到这一点。
我写的javascript可能会缩短一些，我没有花太多时间来提高效率。我看到的唯一错误是第一次无线电点击时出现短暂的黑色空间，如果点击太快，有时就没有过渡。我希望它符合您的需求！
以下是上面找到的最终版本的附加代码：
/* Javascript */
// Obtain the objects within javascript to use
var slider = document.getElementById('slider'),
one = document.getElementsByClassName('firstanimation')[0],
two = document.getElementsByClassName('secondanimation')[0],
three = document.getElementsByClassName('thirdanimation')[0],
four = document.getElementsByClassName('fourthanimation')[0],
five = document.getElementsByClassName('fifthanimation')[0],
// Hidden element that a 5s animation is applied to
hidden = document.getElementById('hidden'),
// Create an array of the li elements to make manipulating easier
liArray = [one, two, three, four, five],
// Obtain the radio buttons
radios = document.getElementsByName('picture'),
// For optimization and easy access later on
liNum = liArray.length,
// The bar at the bottom
progress = document.getElementById('progress-bar'),
// The li currently showing
currNum,
// Prefixes for the PrefixedEvent function
pfx = ["webkit", "moz", "MS", "o", ""];
// Give each radio button an onclick function
for(var i = 0; i < liNum; i++) {
// The following line is necessary to prevent them all from being 5
radios[i].i = i;
radios[i].onclick = function() { changePic(this.i) };
}
// Changes the radio every time a slide animates to the left
PrefixedEvent(hidden, 'AnimationIteration', function() {
for(var i = 0; i < liNum; i++) {
// Checks to see which is checked
if(radios[i].checked) {
// Uncheckds the checked one
radios[i].checked = false;
// Checks the next one (first if there is no next one)
if(i + 1 < liNum) {
radios[i + 1].checked = true;
} else {
radios[0].checked = true;
}
break;
}
}
});
// Makes using animationiteration easier cross-browser
function PrefixedEvent(element, type, callback) {
for (var p = 0; p < pfx.length; p++) {
if (!pfx[p]) type = type.toLowerCase();
element.addEventListener(pfx[p]+type, callback, false);
}
}
// Transitions from one slide to the clicked one, sets new animation order based on choice
function changePic(nextNum) {
// Gets the li being displayed currently
for(var j = 0; j < liNum; j ++) {
var computedStyle = window.getComputedStyle(liArray[j]),
rightPos = computedStyle.getPropertyValue('right');
if(rightPos == "0px") {
currNum = j;
break;
}
}
// Removes the animations for all the slider elements
one.className = '';
two.className = '';
three.className = '';
four.className = '';
five.className = '';
hidden.className = '';
progress.className = '';
// Checks to see if it's a different element
if(nextNum != currNum)
{
// If it is, animate the new one in from the right, slide current to left
liArray[nextNum].style.right = "-685px";
liArray[currNum].style.right = "0px";
liArray[nextNum].style.right = "0px";
liArray[currNum].style.right = "685px";
} else {
// If it's not, leave it
liArray[currNum].style.right = "0px";
}
// Necessary to initialize another animation (known CSS flaw)
setTimeout(function () {
// Resets animation order based on the clicked radio
if(nextNum == 0) {
one.className = 'firstanimation';
two.className = 'secondanimation';
three.className = 'thirdanimation';
four.className = 'fourthanimation';
five.className = 'fifthanimation';
hidden.className = 'timer';
progress.className = 'progress';
}
if(nextNum == 1) {
one.className = 'fifthanimation';
two.className = 'firstanimation';
three.className = 'secondanimation';
four.className = 'thirdanimation';
five.className = 'fourthanimation';
hidden.className = 'timer';
progress.className = 'progress';
}
if(nextNum == 2) {
one.className = 'fourthanimation';
two.className = 'fifthanimation';
three.className = 'firstanimation';
four.className = 'secondanimation';
five.className = 'thirdanimation';
hidden.className = 'timer';
progress.className = 'progress';
}
if(nextNum == 3) {
one.className = 'thirdanimation';
two.className = 'fourthanimation';
three.className = 'fifthanimation';
four.className = 'firstanimation';
five.className = 'secondanimation';
hidden.className = 'timer';
progress.className = 'progress';
}
if(nextNum == 4) {
one.className = 'secondanimation';
two.className = 'thirdanimation';
three.className = 'fourthanimation';
four.className = 'fifthanimation';
five.className = 'firstanimation';
hidden.className = 'timer';
progress.className = 'progress';
}
// Moves the previous image to the right with the rest
liArray[currNum].style.right = "-685px";
}, 500 /* Transition length in milliseconds */);
}
/* Added HTML */
<!-- Under #slider and #mask... -->
<li id="hidden" class='timer'></li>
<!-- Under #content-slider... -->
<nav id='photoNav'>
<input type="radio" name="picture" checked="true" id="navOne" />
<input type="radio" name="picture" id="navTwo" />
<input type="radio" name="picture" id="navThree" />
<input type="radio" name="picture" id="navFour" />
<input type="radio" name="picture" id="navFive" />
</nav>
/* Added CSS */
#hidden {
visibility: hidden;
pointer-events:none;
}
#hidden.timer {
-mos-animation: nothing 5s linear infinite;
-webkit-animation: nothing 5s linear infinite;
animation: nothing 5s linear infinite;
}
#photoNav {
position: absolute;
top: 300px;
left:480px;
margin-left: -60px;
cursor:pointer;
}
#photoNav input {
cursor:pointer;
}
#progress-bar {
position:relative;
top:-5px;
width:680px;
height:5px;
background:#000;
}
#progress-bar.progress {
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
animation:fullexpand 25s ease-out infinite;
}
@-moz-keyframes nothing { 0% {} 100% {} }
@-webkit-keyframes nothing { 0% {} 100% {} }
@keyframes nothing { 0% {} 100% {} }
/* And some other smaller things not worth the space */
毋庸置疑，用javascript做起来会更容易，但这也是很好的做法和乐趣
答案 1 :(得分：0)
这里有纯CSS滑块：https://github.com/drygiel/csslider
如果要自动更改图像，则必须使用CSS动画为左边距设置动画。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？