資訊專欄INFORMATION COLUMN
摘要：主要工作，還是對(duì)文章第一段提出的如果中間間隔有圖片，那么在動(dòng)畫的執(zhí)行過(guò)程中還是會(huì)看到，比較不給力問(wèn)題，進(jìn)行改進(jìn)，以及實(shí)現(xiàn)自動(dòng)輪播。肯定還有其它解決思路，獻(xiàn)丑，求抱大神大腿，求大神指點(diǎn)。
1.前言，看過(guò)很多的輪播器代碼；但是心中，老想著有沒(méi)有簡(jiǎn)單的辦法來(lái)實(shí)現(xiàn)同樣的效果。搜到這個(gè)（下方鏈接），眼前一亮，便動(dòng)手實(shí)踐改進(jìn)。主要工作，還是對(duì)文章第一段提出的“如果中間間隔有圖片，那么在css3動(dòng)畫的執(zhí)行過(guò)程中還是會(huì)看到，比較不給力”問(wèn)題，進(jìn)行改進(jìn)，以及實(shí)現(xiàn)自動(dòng)輪播。
不知道是哪位大神寫出來(lái)的，也不知道后續(xù)有沒(méi)有更新解決方案，總之，沒(méi)搜到，于是，獻(xiàn)丑貼代碼吧。
使用html5+css3來(lái)實(shí)現(xiàn)slider切換效果告別javascript+css鏈接描述
2.源碼鏈接里有，這里只說(shuō)改變的地方，和自己寫的代碼。
2.1 將CSS樣式處，#slidebrs .inner處的過(guò)渡動(dòng)畫取出，改為新的animated類，代碼
@charset utf-8;
/* common */
body {
background: #ffffd;
overflow-x: hidden;
}
img {
max-width: 70%;
}
#bd {
width: 960px;
margin: 100px auto;
max-width: 960px;
}
/* module: sliders */
#sliders {
border-radius: 5px;
box-shadow: 1px 1px 4px #666;
padding: 1%;
background: #fff;
}
#overflow {
width: 100%;
overflow: hidden;
}
#sliders .inner {
width: 500%;
cursor: pointer;
}
.animated {
transiton: all 1s linear;
-webkit-transition: all 1s linear;
}
#sliders article {
float: left;
width: 20%;
}
#sliders article .info {
position: absolute;
opacity: 0;
padding: 30px;
color: #666;
font-family: Arial;
transition: opacity 0.1s ease-out;
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.1s ease-out;
}
#sliders article .info h1 {
font-size: 22px;
font-weight: bold;
margin: 0 0 5px;
}
#sliders article .info a {
color: #666;
text-decoration: none;
}
/* module: controls */
#controls {
height: 50px;
width: 100%;
margin-top: -25%;
}
#controls label {
display: none;
width: 50px;
height: 50px;
opacity: 0.3;
cursor: pointer;
}
#controls label:hover {
opacity: 1;
}
/* module: active */
#active {
width: 40%;
margin: 23% auto 0 auto;
text-align: center;
}
#active label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
background: #bbb;
border-color: #777;
}
#active label:hover {
background: #ccc;
}
/* input checked change style */
#slider1:checked~ #active label:nth-child(1),
#slider2:checked~ #active label:nth-child(2),
#slider3:checked~ #active label:nth-child(3),
#slider4:checked~ #active label:nth-child(4),
#slider5:checked~ #active label:nth-child(5) {
background: #333;
}
#slider1:checked~ #controls label:nth-child(5),
#slider2:checked~ #controls label:nth-child(1),
#slider3:checked~ #controls label:nth-child(2),
#slider4:checked~ #controls label:nth-child(3),
#slider5:checked~ #controls label:nth-child(4) {
display: block;
float: left;
background: url(../img/prev.png) no-repeat;
margin-left: -70px;
}
#slider1:checked~ #controls label:nth-child(2),
#slider2:checked~ #controls label:nth-child(3),
#slider3:checked~ #controls label:nth-child(4),
#slider4:checked~ #controls label:nth-child(5),
#slider5:checked~ #controls label:nth-child(1) {
display: block;
float: right;
background: url(../img/next.png) no-repeat;
margin-right: -70px;
}
#slider1:checked~ #sliders article:nth-child(1) .info,
#slider2:checked~ #sliders article:nth-child(2) .info,
#slider3:checked~ #sliders article:nth-child(3) .info,
#slider4:checked~ #sliders article:nth-child(4) .info,
#slider5:checked~ #sliders article:nth-child(5) .info {
opacity: 1;
transition: all 0.6s ease-out 1s;
-webkit-transition: all 0.6s ease-out 1s;
}
#slider1:checked~ #sliders .inner {
margin-left: 0;
}
#slider2:checked~ #sliders .inner {
margin-left: -100%;
}
#slider3:checked~ #sliders .inner {
margin-left: -200%;
}
#slider4:checked~ #sliders .inner {
margin-left: -300%;
}
#slider5:checked~ #sliders .inner {
margin-left: -400%;
}
也有其它有些小樣式變化,比如，inner添加了cursor:pointer； 還在HTML中input標(biāo)簽全添加了hidden屬性，用于隱藏一個(gè)小BUG，BUG結(jié)尾有說(shuō)，但影響不大。 2.2 以下是jQuery代碼，版本2.1.4 ，手打代碼，出錯(cuò)莫怪。
$(function() {
var $input = $("input");
var $inner = $input.siblings("#sliders").find(".inner");
var $article = $("article");
var $prevDom = $("input:checked");
var $prevDomIndex = $("input:checked").index();
$input.each(function() {
var _this = $(this);
_this.on("click", function() {
var _index = _this.index();
$inner.addClass("animated");
if($prevDom[0].id != ("slider" + _index) && $prevDom[0].id != ("slider" + (_index + 2))) { //如果點(diǎn)擊圖片間隔一個(gè)及以上，取消動(dòng)畫過(guò)程。不會(huì)閃閃閃眼睛。。
$inner.removeClass("animated");
}
$prevDom = _this;
$prevDomIndex = _index;
});
});
var timer = setInterval(autoAnimate, 3000);
$article.on("mouseover", function() {
clearInterval(timer);
}).on("mouseout", function() {
timer = setInterval(autoAnimate, 3000);
});
function autoAnimate() {
if($prevDomIndex == $input.length - 1) {
$input.eq($prevDomIndex).prop("checked", false);
$inner.removeClass("animated");
$input.eq(0).prop("checked", true);
} else {
$inner.addClass("animated");
$prevDom.prop("checked", false).next("input").prop("checked", true);
}
$prevDom = $("input:checked");
$prevDomIndex = $("input:checked").index();
}
})
3.結(jié)語(yǔ)，小BUG就是，刪除input標(biāo)簽的hidden屬性；執(zhí)行以下順序，在input標(biāo)簽組上，若點(diǎn)擊間隔為一個(gè)及以上，下一次點(diǎn)擊相鄰圖片時(shí)，不會(huì)出現(xiàn)動(dòng)畫。 但是下方laber標(biāo)簽就沒(méi)有這個(gè)BUG，沒(méi)有去想。 匆匆結(jié)束，代碼肯定也可以優(yōu)化。
收獲就是,深深認(rèn)識(shí)到了CSS3中“~“選擇符的厲害之處，以及l(fā)aber input的靈活運(yùn)用。
肯定還有其它解決思路，獻(xiàn)丑，求抱大神大腿，求大神指點(diǎn)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/86697.html
摘要：主要工作，還是對(duì)文章第一段提出的如果中間間隔有圖片，那么在動(dòng)畫的執(zhí)行過(guò)程中還是會(huì)看到，比較不給力問(wèn)題，進(jìn)行改進(jìn)，以及實(shí)現(xiàn)自動(dòng)輪播。肯定還有其它解決思路，獻(xiàn)丑，求抱大神大腿，求大神指點(diǎn)。 1.前言，看過(guò)很多的輪播器代碼；但是心中，老想著有沒(méi)有簡(jiǎn)單的辦法來(lái)實(shí)現(xiàn)同樣的效果。搜到這個(gè)（下方鏈接），眼前一亮，便動(dòng)手實(shí)踐改進(jìn)。主要工作，還是對(duì)文章第一段提出的如果中間間隔有圖片，那么在css3動(dòng)畫的...
摘要：個(gè)人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時(shí)間了，由于工作比較忙，更新緩慢，后面還是會(huì)繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個(gè)目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開始萌生寫文章的想法，到著手...
摘要：第一步前端樣式以及代碼圖片自行添加代碼超出的圖片垂直方向隱藏，水平方向也隱藏提供給子元素定位參照父元素進(jìn)行絕對(duì)定位代碼第二步給前一張，下一張?zhí)戆粹o添加事件下一頁(yè)獲取相冊(cè)，便于移動(dòng)相冊(cè)框的圖片前一張圖片按鈕下一頁(yè)按 第一步：前端樣式以及html代碼（圖片自行添加） css代碼： #container{ width: 1200px; heig...
閱讀 3186·2019-08-30 15:55
閱讀 2952·2019-08-30 13:46
閱讀 1454·2019-08-29 17:29
閱讀 3522·2019-08-29 11:08
閱讀 3445·2019-08-29 11:04
閱讀 1093·2019-08-28 18:20
閱讀 552·2019-08-26 13:37
閱讀 1334·2019-08-26 11:49
