图片轮播的效果和老式电影院的胶片放映形式很相似，在老式的电影院放映中，使用长长的胶片记录影片，胶片上是按顺序排列的一系列图片，通过快速通过放映机放映口，使这些图片产生一个连贯的切换效果，形成了动态的影片。所以，这里图片轮播的形式也可以采用这种方式来形成动画效果。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<div id="container">
<ul id="content">
<li class="list"><img src="img/1.jpg" alt="">li>
<li class="list"><img src="img/2.jpg" alt="">li>
<li class="list"><img src="img/3.png" alt="">li>
ul>
div>
<button id="moveLeft">点我切换button>
<script src="js/main.js">script>
body>
html>
/*初始化*/
*{
padding:0;
margin:0;
}
/*作为放映机存在的最外层容器,固定宽高,通过overflow隐藏超出其区域的内容*/
#container{
width:560px;
height:300px;
overflow: hidden;
position: relative;
}
/*这个容器充当胶卷设成绝对定位用来存放多个图片,图片排在一行里面*/
#content{
list-style: none;
width:2000px;
position: absolute;
left:0;
right:0;
}
/*这是每张图片的设置,图片大小和最外层的放映机一样,并通过float让其排在同一行里面*/
.list{
width:560px;
float: left;
}
/*这是按钮*/
#moveLeft{
width:100px;
}
//使用自执行函数隔离作用域
var Slider=(function () {
//记录left的值
var moveLeft=0;
// 初始化,绑定轮播事件和点击事件
function init(){
var cOntent=document.getElementById(\'content\');
var button1=document.getElementById(\'moveLeft\');
//此处为自动轮播
setInterval(animate,5000,content,20);
//此处为绑定按钮进行点击切换轮播
button1.addEventListener(\'click\',function (e) {
setTimeout(animate,100,content,20);
});
}
//通过定时器实现轮播的动画效果
function animate(content,speed) {
if(moveLeft===0){
var timer1=setInterval(function () {
moveLeft-=speed;
if(moveLeft>-560) {
content.style.left=moveLeft+\'px\';
}
else if(Math.abs(moveLeft+560)<speed){
content.style.left=-560+\'px\';
clearInterval(timer1);
}else{
clearInterval(timer1);
}
},10);
}else if(moveLeft===-560){
var timer2=setInterval(function () {
if(moveLeft>-1120) {
moveLeft -= speed;
content.style.left=moveLeft+\'px\';
}
else if(Math.abs(moveLeft+1120)<speed){
content.style.left=-1120+\'px\';
clearInterval(timer2);
}else{
clearInterval(timer2);
}
},10);
}else if(moveLeft===-1120){
var timer3=setInterval(function () {
if(moveLeft<0){
moveLeft+=2*speed;
content.style.left=moveLeft+\'px\';
}
else if(Math.abs(moveLeft)<2*speed){
content.style.left=0+\'px\';
clearInterval(timer3);
}else{
clearInterval(timer3);
}
},10);
}
}
return{
init:init,
animate:animate
}
})();
Slider.init();
京公网安备 11010802041100号