<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#ccc;
overflow:hidden;
}
#carousel {
width:800px;
height:400px;
margin:25px auto;
position:relative;
border:1px solid #fff;
border-radius:5px;
cursor:pointer;
overflow:hidden;
}
#carousel ul {
width:100%;
height:100%;
}
#carousel ul li {
display:block;
width:100%;
height:100%;
list-style:none;
position:absolute;
top:0px;
left:0px;
}
#carousel ul li:nth-child(1) {
background:#F5F5DC;
}
#carousel ul li:nth-child(2) {
background: #F8F8FF;
}
#carousel ul li:nth-child(3) {
background: #E0FFFF;
}
#carousel ul li:nth-child(4) {
background:#AFEEEE;
}
#carousel ul li:nth-child(5) {
background:#98FB98;
}
/*#carousel ul li img {
width:100%;
height:100%;
}*/
#carousel .btnleft, #carousel .btnright {
width:55px;
height:80px;
font-size:50px;
line-height:80px;
font-weight:bold;
font-family:"楷体";
text-align:center;
cursor:pointer;
border-radius:5px;
outline:none;
border:0px;
box-shadow:0 0 55px 0 rgba(0,0,0,.6) inset;
position:absolute;
top:160px;
z-index:20;
opacity:0;
transition:all .5s linear;
-webkit-transition:all .5s linear;
}
#carousel .btnleft {
left:15px;
}
#carousel .btnright {
right:15px;
}
#carousel .btnleft:hover, #carousel .btnright:hover {
color:#fff;
box-shadow:0 0 55px 0px rgba(100,100,255,1) inset;
}
#carousel:hover .btnleft , #carousel:hover .btnright {
opacity:1;
}
#carousel .btnpage {
width:100%;
height:20px;
position:absolute;
bottom:15px;
z-index:20;
}
#carousel .btnpage > div {
width:160px;
height:22px;
margin:0px auto;
}
#carousel .btnpage span {
display:inline-block;
float:left;
width:22px;
line-height:22px;
margin:0px 5px;
font-size:15px;
font-weight:bold;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
text-align:center;
border-radius:2px;
box-shadow:0 0 20px 0 rgba(0,0,0,1) inset;
cursor:pointer;
transition:all .2s linear;
-webkit-transition:all .2s linear;
}
#carousel .btnpage span:hover {
box-shadow:0 0 25px 0 rgba(0,0,255,1) inset;
color:#fff;
}
#carousel .btnpage .btnnow {
box-shadow:0 0 25px 0 rgba(0,0,255,1) inset;
color:#fff;
transition:all 1.5s linear;
-webkit-transition:all 1.5s linear;
}
#carousel .btnpage .btnnow:hover {
box-shadow:0 0 25px 0 rgba(0,0,255,1) inset;
color:#fff;
}
</style>
</head>
<body>
<div id="carousel">
<ul id="carUl">
<li><a href="#"><img src="" alt="">1</a></li>
<li><a href="#"><img src="" alt="">2</a></li>
<li><a href="#"><img src="" alt="">3</a></li>
<li><a href="#"><img src="" alt="">4</a></li>
<li><a href="#"><img src="" alt="">5</a></li>
</ul>
<!-- 左按钮 -->
<input class="btnleft" id="carBtnLeft" type="button" value="<" onclick="carBtnLeft()" />
<!-- 右按钮 -->
<input class="btnright" id="carBtnRight" type="button" value=">" onclick="carBtnRight()" />
<!-- 数字按钮 -->
<div class="btnpage" id="carBtnPage">
<div>
<span class="btnnow">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
</div>
<script type="text/javascript">
var $carousel = document.getElementById("carousel");//轮播框
var $carBtnLeft = document.getElementById("carBtnLeft");//左按钮
var $carBtnRight = document.getElementById("carBtnRight");//右按钮
var $carBtnPage = document.getElementById("carBtnPage");//数字按钮框
var $carBtnPages = $carBtnPage.getElementsByTagName("span");//数字按钮
var $carUl = document.getElementById("carUl");//ul
var $carLis = $carUl.getElementsByTagName("li");//li
var lislength = $carLis.length; //li个数
var carWidth = Number($carUl.offsetWidth);//轮播框宽度
var nowindex = 0;//当前的下标
var quondamindex = nowindex;//原来的下标
window.onload = function(){
//初始化样式
$carLis[0].style.left = 0+"px";
for(var i=1;i<lislength;i++) {
$carLis[i].style.left = carWidth+"px";
}
timerFn();//自动轮播
setCarouselListener();//轮播框监听器
setPageListener();//数字按钮监听器
}
//添加数字按钮监听器 (carBtnPage)
function setPageListener() {
if($carBtnPage.addEventListener){//DOM
$carBtnPage.addEventListener("click",setPageEvent,false);
}
if($carBtnPage.attachEvent){//IE
$carBtnPage.attachEvent("onclick",setPageEvent);
}
}
var setPageEvent = function(ev) {//event事件对象
if(window.event) {//IE
carBtnPage(Number(window.event.srcElement.innerHTML)-1);
}
else {//DOM
carBtnPage(Number(ev.target.innerHTML)-1);
}
}
//分离 数字按钮监听器
function clearPageListener() {
if($carBtnPage.removeEventListener){//DOM
$carBtnPage.removeEventListener("click",setPageEvent,false);
}
if($carBtnPage.detachEvent){//IE
$carBtnPage.detachEvent("onclick",setPageEvent);
}
}
//左按钮
var carBtnLeft = function() {
clearBtn();
quondamindex = nowindex;
nowindex--;
if(nowindex<0) {
nowindex = lislength-1;
}
executeMover(-carWidth);
//alert("左");
}
//右按钮
var carBtnRight = function() {
clearBtn();
quondamindex = nowindex;
nowindex++;
if(nowindex>=lislength) {
nowindex = 0;
}
executeMover(carWidth);
//alert("右");
}
//数字按钮
function carBtnPage(index) {
clearBtn();
quondamindex = nowindex;
nowindex = index;
if(index>quondamindex){
executeMover(carWidth);
}
if(index<quondamindex) {
executeMover(-carWidth);
}
}
//执行动画
function executeMover(num) {
if(num==null) {num = 0;}
$carLis[nowindex].style.left = num+"px";
$carBtnPages[quondamindex].className = "";
$carBtnPages[nowindex].className = "btnnow";
startMover();//开始执行动画
}
//js匀速动画
var timer = null;
var sumPx= 0;//移动的总距离
var spellPx = 2;//每秒移动几px
function startMover(){
clearInterval(timer);//清除上次为完成的动画
var oldEle = $carLis[quondamindex];//原来的li节点
var nowEle = $carLis[nowindex];//现在的li
timer = setInterval(function(){
var speed = 0;
if(nowEle.offsetLeft > sumPx){
speed = -spellPx;
}
else {
speed = spellPx;
}
if(nowEle.offsetLeft == sumPx){
clearInterval(timer);//清除本次动画
//动画结束后对齐
var lsnum = carWidth-(2*carWidth);
if(oldEle.style.left > sumPx) {
lsnum = sumPx+carWidth;
}
oldEle.style.left = lsnum+"px";
}
else{
nowEle.style.left = nowEle.offsetLeft+speed+'px';
oldEle.style.left = oldEle.offsetLeft+speed+'px';
}
},1);
}
//让按钮失效会
function clearBtn() {
$carBtnLeft.disabled = true;
$carBtnRight.disabled = true;
clearPageListener();//分离数字按钮监听
var lstimerId = setInterval(function() {
clearInterval(lstimerId);
$carBtnLeft.disabled = false;
$carBtnRight.disabled = false;
setPageListener();
},2000);
}
//定时器 自动轮播
var timerId = null;
function timerFn() {
timerId = setInterval(function () {
carBtnRight();
}, 5000);
}
//轮播框监听器
function setCarouselListener() {
if($carousel.addEventListener){//DOM
$carousel.addEventListener("mouseover",function(ev){//移入
clearInterval(timerId);
},true);
$carousel.addEventListener("mouseout",function(ev){//移出
timerFn();
},true);
}
if($carousel.attachEvent){//IE
$carousel.attachEvent("onmouseover",function(){//移入
clearInterval(timerId);
});
$carousel.attachEvent("onmouseout",function(){//移出
timerFn();
});
}
}
</script>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » js 实现轮播图
前端ABC