html script轮播图,javascript简单轮播图

**轮播图实现原理：

通过多张图片平铺，用overflow:hidden只显示一张图片、其他的隐藏，无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果。**

HTML布局和内容：

1.容器container存放子容器，子容器lis的a标签存在图片。

2.子容器tips存放按钮小圆点。

<

>

CSS样式：

1.注意container的overflow:hidden;只显示窗口的一张图片，把左右两边的都隐藏起来。

2.CSS3:after伪元素清除浮动，利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

3.小圆点无论多少都要居中，CSS3:position & transform: translate(-50%) 实现块元素百分比下居中。

/* 容器的高 宽 相对定位 超出隐藏*/

#container{

width:800px;

height:400px;

margin: 0 auto;

position:relative;

overflow:hidden;

}

/************************ 内容的高 宽 绝对定位 偏移************************/

#lis{

width: 4000px;

height: 400px;

position:absolute;

left:0;

}

#lis a{

float:left;

}

/* 清除img浮动,正常撑开a高与高 */

#lis a:after{

content:"";

display:block;

clear:both;

}

/* 清除IMG之间边距 无缝拼接 */

#list img{

float:left;

}

/******* 一排小圆点************/

#tips{

margin:0;

padding:0;

z-index:999;

position: absolute;

bottom: 0;

left: 50%;

transform: translate(-50%);

list-style:none;

}

#tips li{

width:18px;

height: 18px;

border-radius:50%;

background:#333;

float:left;

margin-left:5px;

}

/* 切换到相应的图片 相应小圆点的颜色 */

#tips .active{

background:red;

}

/**** 左右按钮 绝对定位 大小 去下划线****************/

#btn a{

position:absolute;

top:50%;

margin-top:-100px;

font-size:100px;

text-decoration: none;

}

#btn #next{

position:absolute;

right:0%;

}

静态的效果图了！

JavaScript部分

1.查找要触发的元素左右箭头！

2.创建事件当点击时改变偏移的值。

3.判断偏移值是否内容(#lis)的width;

4.设置自动轮播事件，制作定时器timer setInterval()执行多次!

5.设置暂停轮播事件,clearInterval(timer);//移除定时器!

6.鼠标移出onmouseout 移入onmouseover轮播图区域执行自动和暂停轮播事件

7.设置圆点和相应图片同步切换的事件，点击圆点切换图片 有闭包的知识！

var next=document.getElementById("next");//查找一个叫next id;

var up=document.getElementById("up");//查找一个叫up id;

var lis=document.getElementById("lis");//查找一个叫lis id;

var imgCount=lis.getElementsByTagName("img");//查找lis所有图片;

var countMove=imgCount.length*-800;//定义变量用保存偏移的总值;

var container=document.getElementById("container");//获取整个轮播图区域

var ul=document.getElementById("tips");//查找一个叫tips id;

var list=ul.getElementsByTagName("li");//查找ul全部圆点

var timer;

var index=0;//list下标 从0开始！

console.log(lis.width);

var move=0;//定义变量用保存偏移的值;

//设置next下一张点击事件

2.

next.οnclick=function(){

move-=800;//每点击一次偏移-800PX; 第一张图后style.left都为负值。

index+=1;

if(move===countMove){//如果偏移(move)等于countMove(4000),就move为0(0是第一张)

move=0;

index=0;

}

lis.style.left=move+"px";//设置向偏移left:move

circle();//切换相对应圆点

}

//设置up上一张点击事件

up.οnclick=function(){

index-=1;

if(move===0){ //如果偏移(move)等于0,就move为countMove(4000);

move=countMove;

index=list.length-1;

}

move+=800;

lis.style.left=move+"px";//设置向偏移left:move

circle();//切换相对应圆点

}

//设置轮播事件

function play(){

timer=setInterval(function(){ //内置定时器多次执行

next.onclick();//每1.5秒执行下一张事件！！

},1500)

}

play();//加载JS自动轮播！

//设置暂停轮播事件

function stop(){

clearInterval(timer);//移除定时器

}

container.οnmοuseοut=play;//当鼠标移出轮播图区域执行自动轮播事件

container.οnmοuseοver=stop;//当鼠标移入轮播图区域执行暂停轮播事件

//设置圆点和图片同步切换的事件

function circle(){

for(var i=0; list.length>i;i++){//for循环语句 循环所有圆点

if(list[i].className=="active"){ //if条件语句 如果其中一个圆点的Class等于active

list[i].className=""; //其他圆点就是Class设置为空

}

list[index].className="active";//list下标为index 设置Calss为cative;

}

}

for(var i=0; list.length>i;i++){ //for循环语句 循环所有圆点

(function(i){ //闭包

list[i].οnclick=function(){ //圆点点击事件

lis.style.left=i*-800+"px";//设置lis偏移的值

index=i;

circle();

}

})(i); //传入I

}