网页轮播图——原生JS
1.使用onmouseenter();onmouseleave();这两个方法对左右箭头进行显示与隐藏的操作。并且实现光标移上时显示左右箭头,光标离开时隐藏左右箭头。
2.声明变量Timer代表轮播一次图片所用的时间。
3.声明变量TimerLittle代表轮播一小次图片所用时间。因为图片的移动都是一点点移动的!
4.声明MoveImage(dis);函数,并给予参数,参数代表轮播一次图片的距离,即:一张图片的宽度,dis为负值 代表向右移动,为正值代表向左移动。
5.声明变量LittleDis代表图片移动一小次的距离,计算公式为:dis/(Timer/TimeLittle)l;
6.声明变量TargetDis代表目标距离,计算公式为:图片当前的距离左边的距离 + 传进来的参数dis;
7.使用定时器Setinterval();方法对图片进行过渡动画操作。
8.进行判断 当当前位置小于目标距离 并且 目标距离小于等于0 代表向左移动,当当前位置大于目标距离 并且目标距离小于0 代表向右移动。当当前位置等于目标距离时 代表移动完毕!!!
不好的地方还请各位大神提出!!!
**还有一些细节 请各位自行理解吧!源码注释的很详细!!!**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页轮播图</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div class="Imagelunbo" id="Image_lunbo">
<div class="jiantou" id="jiantou">
<img id="left_jiantou" src="img/left.png" >
<img id="right_jiantou" src="img/right.png" >
</div>
<div class="main" id="main">
<img src="img/3.jpg" >
<img src="img/1.jpg" >
<img src="img/2.jpg" >
<img src="img/3.jpg" >
<img src="img/1.jpg" >
</div>
<div style="width: 100px; margin: 0 auto;">
<ul class="list" id="list">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.Imagelunbo{
width: 1100px;
height: 600px;
position: relative;
margin: 50px auto;
overflow: hidden;
}
.Imagelunbo .main{
position: absolute;
left: -1100px;
width: 5500px;
height: 600px;
}
.Imagelunbo .main img{
width: 1100px;
height: 600px;
float: left;
}
.jiantou img{
position: absolute;
z-index: 2;
width: 1100px;
top: 50%;
margin-top: -65px;
background-color: rgba(0,0,0,0.2);
width: 100px;
height: 110px;
cursor: pointer;
}
.jiantou img:hover{
background-color: rgba(0,0,0,0.3);
}
#right_jiantou{
right: 0;
}
.list{
position: absolute;
bottom: 10px;
width: 100px;
height: 15px;
border-radius: 15px;
background-color:rgba(255,255,255,0.3);
}
.list li{
width: 9px;
height: 9px;
border-radius: 10px;
background-color: #ccc;
float: left;
margin:3px 12px;
cursor: pointer;
}
.active{
background-color: orangered !important;
}
var jiantou = document.getElementById('jiantou'),//获取左右箭头
Imagelunbo = document.getElementById('Image_lunbo');//获取最大的父盒子
window.onload = function(){//网页打开时页面的状态
jiantou.style.display = 'none';//默认为左右箭头隐藏
jiantouShow();//调用左右箭头显示与隐藏的放法
if(Timer == null){
Timer = setInterval(AutoCut,2000);//自动轮播的延时
}
}
function jiantouShow(){//将左右箭头显示与隐藏封装成方法
Imagelunbo.onmouseenter = function(){//光标移上时
jiantou.style.display = 'block';//左右箭头显示
clearInterval(Timer);//停止自动轮播
Timer = null;
}
Imagelunbo.onmouseleave = function(){//光标离开时
jiantou.style.display = 'none';//左右箭头隐藏
if(Timer == null){//开始自动轮播
Timer = setInterval(AutoCut,2000);
}
}
}
var left_jiantou = document.getElementById('left_jiantou'),//获取左箭头
right_jiantou = document.getElementById('right_jiantou');//获取右箭头
left_jiantou.onclick = function(){
ImageMove(1100);//向左移动
};
right_jiantou.onclick = function(){
ImageMove(-1100);//向右移动
};
var Time = 1000,//轮播一次所需时间
LittileTime = 20,//一小次所需时间
interval = null,//定时器
main = document.getElementById('main');
function ImageMove(Dis){
var LittleDis = Dis/(Time/LittileTime),//轮播一小次所需距离
TargetDis = Dis + main.offsetLeft;//目标距离
function MoveTo(){
if(main.offsetLeft < TargetDis && TargetDis <= 0){//目标在左侧
main.style.left = main.offsetLeft + LittleDis + 'px';
}else if(main.offsetLeft > TargetDis && TargetDis < 0){//目标在右侧
main.style.left = main.offsetLeft + LittleDis + 'px';
}else{//到达目标点
main.style.left = TargetDis + 'px';
clearInterval(interval);//清空计时器
interval = null;//将计时器设置为null节约资源
ImageContinue();//调用图片切换的连续性方法
ChanageColor();//调用改变索引颜色方法
}
}
if(interval == null){//启动定时器
interval = setInterval(MoveTo,LittileTime);
}
}
function ImageContinue(){//将图片切换的连续性封装成方法
if(main.offsetLeft == 0){
main.style.left = -3300 + 'px';
}else if(main.offsetLeft == -4400){
main.style.left = -1100 + 'px';
}
}
var value = 0,//设置代表上一个索引的下标
list = document.getElementById('list').getElementsByTagName('li');//获取所有索引点
for(var i = 0;i < list.length;i++){
(function(j){//立即执行函数,直接获得点击的下标。
list[j].onclick = function(){
var num = (j - value) * -1100;//计算当前下标与点击下标的距离差
value = j;//将当前下标赋值给上一个下标
ImageMove(num);//传进距离差执行轮播
}
})(i);
}
function ChanageColor(){//将根据图片该变索引颜色封装成方法
var ArrayLocation = [-1100,-2200,-3300];//三张图片目标距离
for(var i= 0;i < ArrayLocation.length;i++){
if(main.offsetLeft == ArrayLocation[i]){//如果当前距离等于第i个距离
list[i].className = 'active';//就给list第i个添加类,因为下标和图片是相对的关系。
}else{
list[i].className = '';//否则删除类
}
}
}
function AutoCut(){//将图片的自动切换封装成方法
ImageMove(-1100);
}
var Timer = null;//控制自动切换图片的定时器