轮播

 

         使用不同方法，在使用html+css写界面时，方法都差不多，利用不同的div，使用overflow:hidden属性，将超出的图片隐藏

在写切换效果时，要将效果一个一个逐渐实现，使代码清晰，修改时也可以快速找到。

 

使用原生的js代码写轮播

在使用js写代码时，总是不能实现切换效果，在敲代码时，要注意代码不要敲错（使用谷歌浏览器检查 代码是否错误

window.onload=function(){

var container=document.getElementById('container');
var banner= document.getElementById('banner');
var button=document.getElementById('button').getElementsByTagName('span');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
var index=1;
var animated=false;
var timer;

//小圆点
function showButton(){
for(var i=0;i<button.length;i++){
if(button[i].className=='on'){
button[i].className='';
break;
}
}
button[index-1].className='on';
}

//自动播放
//function animate(offset){...}
function play(){
timer=setInterval(function(){
next.onclick();
},3000);
}
function stop(){
clearInterval(timer);
}
//封装成函数 //无限滚动+箭头切换
//
function animate(offset){
animated=true;
var newLeft=parseInt(banner.style.left)+offset;
var time=300;//位移总时间
var interval=10;//位移间隔时间
var speed=offset/(time/interval);//每次位移量
function go(){
if((speed<0&&parseInt(banner.style.left)>newLeft)||(speed>0&&parseInt(banner.style.left)<newLeft)){
banner.style.left=parseInt(banner.style.left)+speed+'px';
setTimeout(go,interval);//go只执行了一次
}
else{
animated=false;
banner.style.left=newLeft+'px';
if(newLeft>-600){
banner.style.left=-3000+'px';
}
if (newLeft<-3000) {
banner.style.left=-600+'px';
}
}
}
go();
}

//按钮切换

next.onclick=function(){
if(index==5){
index=1;
}
else{ index+=1;}

showButton();
if(!animated){

animate(-600);
}
}
prev.onclick=function(){
if(index==1){
index=5;
}
else{ index-=1;}

showButton();
if(!animated){
animate(600);
}
}

//自动切换
//按钮切换
for (var i = 0; i <button.length; i++) {
button[i].onclick=function(){
if (this.className=='on') {
return;
}
var myIndex=parseInt(this.getAttribute('index'));
var offset=-600*(myIndex-index);

index=myIndex;
showButton();
if(!animated)
{animate(offset);}
//debugger;
}
}
container.onmouseover=stop;
container.onmouseout=play;
play();

}

1. 在轮播中没有实现移动的效果，而是整张图就直接跳转：没有写动画，只是实现了普通轮播，
2. 在写轮播时，对于图片的宽度一定要注意，宽度会影响轮播的效果，否则就会对，在使用箭头和按钮切换图片时，图片的宽度会影响切换效果。例如下列代码是在实现箭头切换，600为图片宽度，在轮播中总共有五张图片，3000为最后一张图骗的值

3. banner.style.left=newLeft+'px';
               if(newLeft>-600){
                   banner.style.left=-3000+'px';
               }
               if (newLeft<-3000) {
                   banner.style.left=-600+'px';
               }

    

 

使用jquery写轮播（使用这种方法的代码比较少，只需要使用几个函数，就可以进行解决，对于切换效果也只需要一行代码就可以解决）

1. 利用鼠标事件mouseover、mouseout方法，总是成对存在，经鼠标移到一个元素的上方，对该元素有一定的效果改变。

   //鼠标移动停止/开始运动
    $('.banner').mouseover(function(){
        clearInterval(change);
    })
     $('.but').mouseover(function(){
        clearInterval(change);
    })
      $('.arrow').mouseover(function(){
        clearInterval(change);
    })
   
   //鼠标一开开始继续移动，采用鼠标事件mouseover、mouseout
    $('.banner').mouseout(function(){returnphoto()})
    $('.but').mouseout(function(){returnphoto()})
     $('.arrow').mouseout(function(){returnphoto()})

    

 

2.clearInterval方法，取消由 setInterval() 设置的 timeout。利用鼠标事件，可以将轮播停止。

3.对于动画效果实现起来也比较简单。

$('.pic').eq(bigchange).fadeIn('slow').siblings('.pic').fadeOut('slow');

 

这个淡入淡出的代码只需要一行，但是实现了很好的效果。