HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="main">
<!--轮播图-->
<div id="banner">
<a href="">
<div class="banner-item active"></div>
</a>
<a href="">
<div class="banner-item"></div>
</a>
<a href="">
<div class="banner-item"></div>
</a>
</div>
<!--左箭头-->
<div id="prev" class="arrow prev"><span></span></div>
<!--右箭头-->
<div id="next" class="arrow next"><span></span></div>
<!--圆点-->
<ul id="dots" class="dots">
<!-- <li></li> -->
</ul>
</div>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
css代码:
*{
padding:0;
margin:0;
list-style:none;
}
body{
font-family: "微软雅黑";
color:#14191e;
}
@font-face{
font-family: "myfont";
src:url('../img/font/iconfont.eot');
src:url('../img/font/iconfont.eot#iefix') format('embedded-opentype'),
url('../img/font/iconfont.woff') format('woff'),
url('../img/font/iconfont.ttf') format('truetype'),
url('../img/font/iconfont.svg#myfont') format('svg');
}
.main{
width:1200px;
height:460px;
margin:10px auto;
position: relative;
}
/*轮播图*/
#banner{
width:1200px;
height:460px;
overflow:hidden;
}
#banner .banner-item{
width:1200px;
height:460px;
display: none;
position:absolute;
left: 0;
top:0;
z-index:1;
}
#banner>a:nth-child(1) .banner-item{
background:url('../img/bg1.jpg');
}
#banner>a:nth-child(2) .banner-item{
background:url('../img/bg2.jpg');
}
#banner>a:nth-child(3) .banner-item{
background:url('../img/bg3.jpg');
}
#banner .active{
display:block;
}
/*箭头*/
.arrow{
width:30px;
height:80px;
background:url('../img/arrow.png') no-repeat center center;
z-index:10;
position:absolute;
right: 0;
top:50%;
margin-top:-40px;
cursor: pointer;
}
.arrow:hover{
background-color:rgba(0,0,0,.5);
}
.prev{
left:0;
transform:rotate(180deg);
}
.dots{
position:absolute;
bottom:10px;
z-index:100;
left:50%;
}
.dots li{
width:15px;
height:15px;
background:#fff;
border-radius:50%;
box-shadow:0 0 0 2px rgba(0,0,0,.1) inset;
cursor:pointer;
float:left;
margin:0 5px 0 0;
}
.dots li:last-child{
margin-right:0;
}
/*移动到点上的背景变化和第一个li样式变化*/
.dots li.liActive,.dots li:hover{
background:rgba(0,0,0,.1);
}
js代码:
var EventUtil ={
addHandler:function(element,type,handler){ //element是元素,type是事件处理类型,handler是事件句柄(处理函数)
if(element.addEventListener){
//DOM2级事件,除IE8以下浏览器外的事件
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
//IE8以下浏览器的事件
element.attachEvent("on"+type,handler);
}else{
//DOM0级事件
element["on"+type] = handler;
}
}
}
var index = 0, //index是索引
banner = byId("banner"),
prev = byId("prev"),
next = byId("next"),
dots = byId("dots"),
pics = banner.getElementsByTagName("div"),
lis = dots.getElementsByTagName("li"),
size = pics.length,
timer = null;
//图片定时自动切换
startAutoPlay();
//图片定时自动切换方法
function startAutoPlay(){
timer = setInterval(function(){
nextFunc();
},1000)
}
//图片停止自动切换方法
function stopAutoPlay(){
if(timer){
clearInterval(timer);
}
}
//按图片的张数添加圆点
for(var i=0;i<size;i++){
var li = document.createElement("li");
dots.append(li);
}
//让圆点居中
dots.style.marginLeft = -(15*size+(size-1)*5)/2+"px";
//给第一个li添加样式liActive
lis[0].className = "liActive";
//封装getElementById
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
//通过索引加减改变图片样式
function changeImg(index){
//遍历所有的图片,将图片隐藏,将圆点的类清除
for(var i=0;i<size;i++){
pics[i].style.display = "none";
lis[i].className = "";
}
//显示当前图片
pics[index].style.display = "block";
//当前圆点高亮显示
lis[index].className = "liActive";
}
//点击按钮向右切换图片
function nextFunc(){
index++;
//当index>=图片的长度时,让index=0回到第一张图片的索引
if(index>=size){
index = 0;
}
changeImg(index);
}
//点击按钮向左切换图片
function prevFunc(){
index--;
//当index<0时,让index=size-1回到最后一张图片的索引
if(index<0){
index = size-1;
}
changeImg(index);
}
//添加向右切换图片事件
EventUtil.addHandler(next,"click",nextFunc);
//添加向左切换图片事件
EventUtil.addHandler(prev,"click",prevFunc);
//鼠标移入时图片停止切换
EventUtil.addHandler(banner,"mouseover",stopAutoPlay);
//鼠标移出时图片自动切换
EventUtil.addHandler(banner,"mouseout",startAutoPlay);
//点击圆点切换图片
for(var i=0;i<size;i++){
lis[i].setAttribute("data-id",i);
//添加点击圆点切换图片事件
EventUtil.addHandler(lis[i],"click",function(){
index = this.getAttribute("data-id");
changeImg(index);
});
}
具体代码项目链接如下: