最近整理了一下輪播圖的需求以及不同的輪播圖所用方式的比較靖诗。
制作輪播圖首先要理清思路龟糕，然后實踐起來就會很easy啦，下面總結(jié)一下遇到的需求和具體解決方法士飒。
1查邢、 點擊或者鼠標(biāo)劃過時顯示對應(yīng)的圖片
輪播.gif
這種模式比較簡單，屬于最基礎(chǔ)的點擊切換圖片酵幕，
html布局
<div id="box">
<ul>
<li style='display:block'></li>
<li></li>
<li></li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
主要思路：圖片的display為none扰藕，點擊對應(yīng)按鈕時使對應(yīng)圖片的display為block。
window.onload=function(){
var uli=document.getElementsByTagName('ul')[0].getElementsByTagName('li');
var oli=document.getElementsByTagName('ol')[0].getElementsByTagName('li');
for (var i = 0; i < oli.length; i++) {
oli[i].index=i;
oli[i].onmouseover=function(){
for (var i = 0; i < oli.length; i++) {
oli[i].className='';
uli[i].style.display='none';
}
this.className='active';
uli[this.index].style.display='block';
}
}
}
2裙盾、淡入淡出效果
淡入淡出.gif
做淡入淡出效果的布局主要是利用定位实胸，先將幾張圖片采用absolute定位他嫡，并將display設(shè)置為none番官，初始的透明度opacity設(shè)置為0.需要顯示哪張就將他的display設(shè)置為block，并將透明度設(shè)置為1钢属；
window.onload=function(){
var uli=document.getElementsByTagName('ul')[0].getElementsByTagName('li');
var oli=document.getElementsByTagName('ol')[0].getElementsByTagName('li');
for (var i = 0; i < oli.length; i++) {
oli[i].index=i;
oli[i].onmouseover=function(){
for (var i = 0; i < oli.length; i++) {
oli[i].className='';
uli[i].style.display='none';
startMove(uli[i],{opacity:0},function(){
this.style.display='none';
})
}
this.className='active';
uli[this.index].style.display='block';
startMove(uli[this.index],{opacity:100})
}
}
}
3徘熔、自動播放
自動播放無縫連接.gif
實現(xiàn)自動播放主要設(shè)置一個定時器，每2s自動播放下一張圖片淆党，播放到最后一張轉(zhuǎn)到第一張圖片時需要使用無縫銜接酷师，有幾種思路
- 首尾復(fù)制圖片讶凉，到首尾的時候再拉取到最初的位置，但這樣做有點麻煩
- 第二種做法是采用定位山孔，當(dāng)播放到最后一張圖片時懂讯，將第一張圖片定位到最后一張下面，要采用relative定位台颠，不能用absolute褐望，再播放完后在拉取到最初的位置。我采用的是第二種做法串前。
window.onload = function() {
var uli = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
var oli = document.getElementsByTagName('ol')[0].getElementsByTagName('li');
var ul = document.getElementsByTagName('ul')[0];
var box=document.getElementById('box');
var onePicHeight = uli[0].offsetHeight;
var iNow = 0;
var iNow2=0;
for (var i = 0; i < oli.length; i++) {
oli[i].index = i;
oli[i].onmouseover = function() {
for (var i = 0; i < oli.length; i++) {
oli[i].className = '';
}
this.className = 'active';
iNow=this.index;
iNow2=this.index;
startMove(ul, { top: -this.index * onePicHeight })
}
}
timer=setInterval(toRun, 2000);
box.onmouseover=function(){
clearInterval(timer);
}
box.onmouseout=function(){
timer=setInterval(toRun, 2000);
}
function toRun() {
if(iNow==0){
uli[0].style.position='static';
ul.style.top=0;
iNow2=0;
}
if (iNow == uli.length-1) {
iNow = 0;
uli[0].style.position='relative';
uli[0].style.top=uli.length*onePicHeight+'px';
} else {
iNow++;
}
iNow2++;
for (var i = 0; i < oli.length; i++) {
oli[i].className = '';
}
oli[iNow].className = 'active';
startMove(ul, { top: -iNow2 * onePicHeight })
}
}
4瘫里、左右自動播放
實現(xiàn)這個主要是布局比較特殊，將未展示圖片定位到他旁邊荡碾，需要展示的時候拉取過來就可以了谨读。正在展示的圖片可以根據(jù)要展示的index大小決定向左定位還是向又定位，以實現(xiàn)從左或者從右拉取的效果坛吁。
image.png
window.onload = function() {
var uli = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
var oli = document.getElementsByTagName('ol')[0].getElementsByTagName('li');
var ul = document.getElementsByTagName('ul')[0];
var box=document.getElementById('box');
var onePicHeight = uli[0].offsetHeight;
var iNow = 0;
var iNow2=0;
for (var i = 0; i < oli.length; i++) {
oli[i].index = i;
oli[i].onmouseover = function() {
for (var i = 0; i < oli.length; i++) {
oli[i].className = '';
}
this.className = 'active';
iNow=this.index;
iNow2=this.index;
startMove(ul, { top: -this.index * onePicHeight })
}
}
timer=setInterval(toRun, 2000);
box.onmouseover=function(){
clearInterval(timer);
}
box.onmouseout=function(){
timer=setInterval(toRun, 2000);
}
function toRun() {
if(iNow==0){
uli[0].style.position='static';
ul.style.top=0;
iNow2=0;
}
if (iNow == uli.length-1) {
iNow = 0;
uli[0].style.position='relative';
uli[0].style.top=uli.length*onePicHeight+'px';
} else {
iNow++;
}
iNow2++;
for (var i = 0; i < oli.length; i++) {
oli[i].className = '';
}
oli[iNow].className = 'active';
startMove(ul, { top: -iNow2 * onePicHeight })
}
}
5劳殖、手風(fēng)琴式效果
image.png
采用定位方式講=將剩余圖片定位到左邊，有一定間隔拨脉，點擊哪個就讓那張定位到可視窗口即可闷尿。
window.onload = function() {
var uli = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
var ul = document.getElementsByTagName('ul')[0];
var box = document.getElementById('box');
var onePicWidth = uli[0].offsetWidth;
var iNow = 0;
var btn = true;
for (var i = 1; i < uli.length; i++) {
uli[i].style.left = (620 - 60) + (i - 1) * 30 + 'px';
}
for (var i = 0; i < uli.length; i++) {
uli[i].index = i;
uli[i].onmouseover = function() {
for (var i = 0; i < uli.length; i++) {
if(i<=this.index){
startMove(uli[i],{left:i*30});
}else{
startMove(uli[i],{left:(620 - 60) + (i - 1) * 30 });
}
}
}
}
}
startMove封裝函數(shù)
//封裝運動函數(shù)
// var time=null;
// var alpha=30;
//attr, iTatget startMove(obj,{attr1:iTarget1,attr2:iTarget2},fn)
function startMove(obj, json, fn) {
var flag = true; //假設(shè)所有運動都到達了目標(biāo)值
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//取當(dāng)前值
for (var attr in json) {
var incur = 0;
if (attr == "opacity") {
incur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
incur = parseInt(getStyle(obj, attr));
}
//算速度
var speed = (json[attr] - incur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//檢測停止
if (incur != json[attr]) {
flag = false;
}else{
flag=true;
}
if (attr == "opacity") {
obj.style.filter = 'alpha(opacity:' + (incur + speed) + ')';
obj.style.opacity = (incur + speed) / 100;
} else {
obj.style[attr] = incur + speed + "px";
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}
}, 30);
}
function getStyle(obj, attr) {
if (obj.currentStyle) { //ie
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr]; //firefox
}
}
