最近整理了一下轮播图的需求以及不同的轮播图所用方式的比较。
制作轮播图首先要理清思路,然后实践起来就会很easy啦,下面总结一下遇到的需求和具体解决方法。
1、 点击或者鼠标划过时显示对应的图片
这种模式比较简单,属于最基础的点击切换图片,
html布局
<div id="box">
<ul>
<li style='display:block'>![](1.jpg)</li>
<li>![](2.jpg)</li>
<li>![](3.jpg)</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
主要思路:图片的display为none,点击对应按钮时使对应图片的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、淡入淡出效果
做淡入淡出效果的布局主要是利用定位,先将几张图片采用absolute定位,并将display设置为none,初始的透明度opacity设置为0.需要显示哪张就将他的display设置为block,并将透明度设置为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、自动播放
实现自动播放主要设置一个定时器,每2s自动播放下一张图片,播放到最后一张转到第一张图片时需要使用无缝衔接,有几种思路
- 首尾复制图片,到首尾的时候再拉取到最初的位置,但这样做有点麻烦
- 第二种做法是采用定位,当播放到最后一张图片时,将第一张图片定位到最后一张下面,要采用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、左右自动播放
实现这个主要是布局比较特殊,将未展示图片定位到他旁边,需要展示的时候拉取过来就可以了。正在展示的图片可以根据要展示的index大小决定向左定位还是向又定位,以实现从左或者从右拉取的效果。
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、手风琴式效果
采用定位方式讲=将剩余图片定位到左边,有一定间隔,点击哪个就让那张定位到可视窗口即可。
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封装函数
//封装运动函数
// var time=null;
// var alpha=30;
//attr, iTatget startMove(obj,{attr1:iTarget1,attr2:iTarget2},fn)
function startMove(obj, json, fn) {
var flag = true; //假设所有运动都到达了目标值
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//取当前值
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
}
}