js 实现轮播图

共六张图只录了四张，因为没有办法显示出鼠标所以没有展示手动点击切换图片的效果…

1.轮播图制作大概流程

• div一个放图片的框里边img6张图片，还需要有左右两个点击切换图片的耳朵
• CSS设置div、img、耳朵的样式
• 用js进行控制图片的自动播放以及点击切换功能

2.先写html的框以及图片、耳朵

<div id="counter">
	<div id="list" style="left:0px;"> 
		<img src="img/img1.jpg" alt="1">
		<img src="img/img2.jpg" alt="2">
		<img src="img/img3.jpg" alt="3">
		<img src="img/img4.jpg" alt="4">
		<img src="img/img5.jpg" alt="5">
		<img src="img/img6.jpg" alt="6">
	div>
	
	<a href="javascript:;" id="pre" class="arrow"><a>
	<a href="javascript:;" id="next" class="arrow">>a>
div>

3.css设置样式

1 .我的图片大小是600*300的一共有六张，排成一排加上左浮动float:left，因此父级div框的宽应该是3600
·
2 .overflow:hidden 溢出隐藏，让页面显示出来的图片只有一张，其他的图片隐藏看不到
·
3 .用到了子绝父相的定位：父级用相对定位position: relative;子级用绝对定位position: absolute;要注意调整z-index，让左右耳朵在最上面，图片在耳朵下边
·
4 .左右耳朵需要注意：在自动轮播的情况下，耳朵是不需要显示的，所以需要隐藏display: none;，同时在鼠标滑动到图片上时要显示出来display: block;

#counter{
     width: 600px;height: 300px;position: relative;overflow: hidden;}
#list{
     width: 3600px;height: 300px;position: absolute;z-index: 1;}
#list img{
     width: 600px;height: 300px;float: left;}
.arrow{
     position: absolute;top:110px;text-decoration: none;z-index: 2;
display: none;width: 40px;height: 40px;font-size: 36px;font-weight: bold;
line-height: 39px;text-align: center;color: #fff;background-color:rgba(0,0,0,1);
cursor: pointer;}
.arrow:hover{
     background-color: rgba(0,0,0,0.8);}
#counter:hover .arrow{
     display: block;}  /*鼠标滑动到屏幕时触发，使左右耳朵显示出来*/
#pre{
     left:20px;}    /*左耳朵*/
#next{
     right:20px;}  /*右耳朵*/
#list{
     transition: left 1s;}
.list{
     transition: left 0.1s;}

4.js实现

1 .获取html中的内容（id、偏移量）—> 偏移量的接收要用到：html与js结合式书写 : 变量名.style.left=数值

//获取id
var counter=document.getElementById("counter");
var list=document.getElementById("list");
var pre=document.getElementById("pre");
var next=document.getElementById("next");
var timer;   //定时器参数

//html与js结合式书写 : 变量名.style.left=数值
var nextlist=parseInt(list.style.left);//接收偏移量的值

2 .定义函数，确定偏移量的改变，当图片到达最后一张时，要使再次点击右耳朵后图片返回到第一张；同样的，当图片在第一张时，点击左耳朵图片需要到最后一张

//偏移量的改变
function animals(offset){
     
	var newlist=parseInt(list.style.left)+offset;//定义参数随时传递新的偏移量值
	list.style.left=newlist+'px';//偏移量需要单位‘像素px’，否则计算机识别不出，图片将不会移动位置
	//到达最后一张时，点击右耳朵则返回到第一张
	if(newlist<-3001){
     
		list.style.left=0+'px';
		list.setAttribute('class','list');
	}
	//在第一张时，点左耳朵则返回到最后一张
	if(newlist>0){
     
		list.style.left=-3000+'px';
		list.setAttribute('class','list');
	}
}

3 .定义函数，点击左右耳朵时，偏移量需要根据图片大小（600）进行改变，点击左耳朵，即显示上一张图片，那么偏移量要加600；反之，点击右耳朵偏移量要减600

// 点击左右耳朵触发函数
pre.onclick=function(){
     
	animals(600)  //点击左边耳朵，图片往左移一张，偏移量减600
}
next.onclick=function(){
     
	animals(-600)   //点击右边耳朵，图片往右移一张，偏移量加600
}

4 .设置定时器

// 开始定时器
function start(){
     
	timer=setInterval(function(){
     
		next.onclick()
		},2000);
}
start();
// 关闭定时器
function stop(){
     
	clearInterval(timer);
}
// 鼠标移出时,开始定时器
counter.onmouseleave=start;
// 鼠标移入时,关闭定时器
counter.onmouseenter=stop;

5.完整代码

<style type="text/css">
	#counter{
      width: 600px;height: 300px;position: relative;overflow: hidden;}
	#list{
      width: 3600px;height: 300px;position: absolute;z-index: 1;}
	#list img{
      width: 600px;height: 300px;float: left;}
	.arrow{
      position: absolute;top:110px;text-decoration: none;z-index: 2;display: none;
	width: 40px;height: 40px;font-size: 36px;font-weight: bold;line-height: 39px;
	text-align: center;color: #fff;background-color: rgba(0,0,0,1);cursor: pointer;}
	.arrow:hover{
      background-color: rgba(0,0,0,0.8);}
	#counter:hover .arrow{
      display: block;}
	#pre{
      left:20px;}
	#next{
      right:20px;}
	#list{
      transition: left 1s;}
	.list{
      transition: left 0.1s;}
	
	#buttons{
      position: absolute;height: 10px;width: 120px;left:250px;bottom:20px;z-index: 2;}
	#buttons span{
      border: 1px solid #FFFFFF;border-radius:5px ;float: left;width:10px;height: 10px;
	background-color: #333;margin-right: 5px;cursor: pointer;}
	#buttons .on{
      background: orangered;}
style>
<div id="counter">
	
 
		<img src="img/img1.jpg" alt="1">
		<img src="img/img2.jpg" alt="2">
		<img src="img/img3.jpg" alt="3">
		<img src="img/img4.jpg" alt="4">
		<img src="img/img5.jpg" alt="5">
		<img src="img/img6.jpg" alt="6">
	div>
	
	<a href="javascript:;" id="pre" class="arrow"><a>
	<a href="javascript:;" id="next" class="arrow">>a>
div>

<script type="text/javascript">
	var counter=document.getElementById("counter");
	var list=document.getElementById("list");
	var pre=document.getElementById("pre");
	var next=document.getElementById("next");
	var timer;
	
	//html与js结合式书写 : 变量名.style.left=数值
	var nextlist=parseInt(list.style.left);//接收偏移量的值
	// var index=1;
	// var buttons=document.getElementById("buttons").getElementById('span');
	
	//偏移量的改变
	function animals(offset){
      
		var newlist=parseInt(list.style.left)+offset;//定义参数随时传递新的偏移量值
		list.style.left=newlist+'px';//偏移量需要单位‘像素px’，否则计算机识别不出，图片将不会移动位置
		//到达最后一张时，点击右耳朵则返回到第一张
		if(newlist<-3001){
      
			list.style.left=0+'px';
			list.setAttribute('class','list');
		}
		//在第一张时，点左耳朵则返回到最后一张
		if(newlist>0){
      
			list.style.left=-3000+'px';
			list.setAttribute('class','list');
		}
	}
	// 点击左右耳朵触发函数
	pre.onclick=function(){
      
		animals(600)  //点击左边耳朵，图片往左移一张，偏移量加600
	}
	next.onclick=function(){
      
		animals(-600)   //点击右边耳朵，图片往右移一张，偏移量减600
	}
	// 开始定时器
	function start(){
      
		timer=setInterval(function(){
      
			next.onclick()
			},2000);
	}
	start();
	// 关闭定时器
	function stop(){
      
		clearInterval(timer);
	}
	// 鼠标移出时,开始定时器
	counter.onmouseleave=start;
	// 鼠标移入时,关闭定时器
	counter.onmouseenter=stop;
script>