轮播图效果

时间 2019-11-24

标签效果繁體版

原文原文链接

轮播图是页面中常见的动画效果css

本文经过 jQuery animate实现了简单的5张图片轮播效果html

实例效果:http://runjs.cn/code/dfdfoipt jquery

顺便推荐一下，用RunJS来也页面效果挺不错的app

完整代码函数

<html>
<script src="../jquery-1.11.0.min.js">
</script>
<style>
img{
  width:400px;
  height:200px;
  display:inline-block;
  }

.Carouse{
  margin-left:auto;
  margin-right:auto;
  overflow-x:hidden;
  position:absolute;
}
 .Carouse div {
  display:inline-block;
  float:left;
}
.Carouseparent{
 position:relative;
 width:400px;
 height:200px;
 overflow-x:hidden;
}

</style>
<body>
<div class="Carouseparent">
<div class="Carouse" style="left:-400px" >
   <div>
   <img src='../img/1.jpg'>
   </div>
   <div>
   <img src='../img/2.jpg'>
   </div>
   <div>
   <img src='../img/3.jpg'>
   </div>
   <div>
   <img src='../img/4.jpg'>
   </div>
   <div>
   <img src='../img/5.jpg'>
   </div>
</div>

</div>

<script>
 var imgwidth=400;
(function(){
 //初始时absolute div left 为一个图片的负数距离因此第一次执行动画时
 //left 为两个负的图片宽度 因此这里index设为一
 var index=1;
 var pipeCarouse = $(".Carouse");
 var firstCarouse = $(".Carouse >div").first();
 var lastCarouse= $(".Carouse >div").last()
 firstCarouse.clone(true).appendTo(pipeCarouse);
 lastCarouse.clone(true).prependTo(pipeCarouse);
 var CarouseItem = $(".Carouse >div");
 pipeCarouse.width (imgwidth * CarouseItem.length)
 //初始时absolute div left 为一个图片的负数距离因此第一次执行动画时
 //left 为两个负的图片宽度
 //五个图片位 开始时显示一张图片 轮播四次就能把图片播放完 传入参数 2 3 4 5
 //到六时从新开始轮播 index 设为1
 function Carouseanimate(i){
    pipeCarouse.animate({left:-i*imgwidth},400,function(){
    
	if(i==(CarouseItem.length)-1){
	  //从新开始 后面就是空白的div了
	  pipeCarouse.css("left",-imgwidth);
	  index=1;
	}
})
}

function setTimer(){
		timer = setInterval( function(){
		Carouseanimate( ++index );
		}, 2000 );
	}
	setTimer()
	
	
	$(".Carouseparent").on( "mouseover", function(){
		clearInterval( timer );
	})
	$(".Carouseparent").on("mouseout",function(){
	  setTimer();
	})
 
})()



</script>

</body>
</html>

实现过程动画

1 建两个容器div 外层div定位设置成relative（相对定位），里层容器设置为absolute（绝对定位）设计

<div class="Carouseparent">
<div class="Carouse" style="left:-200px" >
   <div>
   <img src='../img/1.jpg'>
   </div>  
</div>
</div>
<div class="Carouseparent">
<div class="Carouse" style="left:0px" >
   <div>
   <img src='../img/1.jpg'>
   </div>  
</div>
</div>

能够看出上面的图有一部分没有了(style="left:-200px"")code

这说明了外层容器relative 里层容器absolute的条件下里层容器设置left为负值能够实现图片往左移而且移到父容器以外的元素消失,固然父容器的样式得设置成横轴溢出部分隐藏。htm

2 咱们能够想象父容器样式设置为宽度为图片宽度，横轴超出部分隐藏，seo

里层容器设计成5张图片连续在一块儿而后改变里层容器样式中的left值,每次left减图片宽度，这样就能实现里层容器想左移动的效果。

这里咱们每次移动一个元素，要在子容器中将最后一个元素移动懂第一个元素(Carouse 下 div),第一元素移动到最后一个元素后面，这样是为了防止移动到后面出现空白的状况，若是每次移动两个元素那就要头尾都复制两个元素了

div 原本是块级元素的也就是没一个div都会另起一行，这里经过

.Carouse div {
  display:inline-block;
  float:left;
}

将子容器中的div设为内联元素，而且能够设置宽度，这就将子容器中的元素所有放到同一行了

3 子容器初始left设为-400px(400为一个图片宽度)，这样初始时刻页面显示的就是第一个图片了。

在子容器中绑定动画函数animate 这个函数功能是改变子容器中的left值

<div class="Carouse" style="left:-400px" >

设置定时函数调用绑定animate动画的函数实现轮播功能