首页 > 代码库 > jQuery 简易版的无缝图片轮播切换

jQuery 简易版的无缝图片轮播切换

2024-07-15 15:16:14   223人阅读

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

</head>

<style>

 

*{padding:0;margin:0;}

ul,li{list-style:none;}

.wrap{position: relative;width:200px;height:150px;border:2px solid #ddd;margin:50px auto;overflow:hidden;}

.photo{position:absolute;left:0;top:0;}

.photo li{width:200px;height:150px;float:left;}

</style>

 

<body>

 

<div class="wrap">

 

<ul class="photo">

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

 

</div>

 

</body>

 

</html>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script>

 

$(function(){

 

 //定义颜色

 var colorArray = [‘pink‘,‘red‘,‘orange‘];

 var photoLi = $(‘.photo li‘);

 

//定义图片个数

 var  photoLen = photoLi.length;

 for( var i=0 ; i < photoLen ; i++ ){

  photoLi.eq(i).css(‘background‘,colorArray[i] );

 } 

 

 

 //定义单个li的宽

 var firstLiWidth = photoLi.eq(0).width();

 //定义photo的宽度来撑开

 $(‘.photo‘).width( firstLiWidth * photoLen );

 

 //定义两个计数器

 var num=0; 

 var num2=0;

//移动开始

 setInterval(photoMove,2000);

//移动函数

 function photoMove(){

  //当 num 等于图片个数减1的时候

  if (num == photoLen-1) {

     //第一个计数器为0来保持循环

     num = 0; 

      //当第一个计数器等于0的时候那么就是开始位置的时候第一张图片就变成相对定位，然后排到了尾部

    photoLi.eq(0).css({

    position:‘relative‘,

    left : $(‘.photo‘).width() + ‘px‘

    });

 

 }else{

  num ++;

 }

 

  

  num2++;

  //num2是控制图片滚动的位置

  $(‘.photo‘).animate({left:-num2 * firstLiWidth +‘px‘}, 1000,function(){

  //回调函数的作用在于等num2等于图片个数的时候那么让第一张图片定位变成默认状态，photo的 left 也回到0px位置,num2又设为0

  if (num2 == photoLen) {

      

      photoLi.eq(0).css(‘position‘, ‘static‘);

 

      $(‘.photo‘).css(‘left‘,0);

 

       num2 = 0;

 

    }

 

  })

 

  }

 

});

 

</script>

 


联系
我们