学习了一段时间的JavaScript总觉得并不是非常熟练，写一个轮播图练练手。
轮播图在许多网站上都可以看到，像淘宝，京东等电商网站的首页，是不可或缺的页面元素。
先来看看实现效果吧~
轮播图效果
要求：
-
点击左右箭头可以切换图片
-
点击底部小圆点可以切换图片
-
轮播图默认自动播放，鼠标移入后停止自动播放，鼠标移出重新开始播放
文件结构：
代码部分：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="main" id="main">
<!-- 图片轮播 -->
<div class="banner" id="banner">
<a href="">
<div class="banner-slide slide1 slide-active"></div>
</a>
<a href="">
<div class="banner-slide slide2"></div>
</a>
<a href="">
<div class="banner-slide slide3"></div>
</a>
</div>
<!-- 箭头按钮 -->
<a href="javascript:void(0)" class="button prev" id="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>
<!-- 圆点按钮 -->
<div class="dots" id="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
body{
font-family: "微软雅黑";
color: #000;
}
/*根据图片大小定义*/
.main{
width: 1200px;/*图片宽度*/
height: 460px;/*图片高度*/
margin: 30px auto;/*图片居中*/
overflow: hidden;/*隐藏图片超出范围的部分*/
position: relative;
}
/*图片*/
.banner{
width: 1200px;/*图片宽度*/
height: 460px;/*图片高度*/
overflow: hidden;/*隐藏图片超出范围的部分*/
position: relative;
}
.banner-slide{
width: 1200px;
height: 460px;
position: absolute;/*相对于父元素.banner的绝对定位*/
background-repeat: no-repeat;/*图片平铺*/
display: none;/*隐藏图片*/
}
.slide-active{
display: block;/*设置图片显示*/
}
.slide1{
background-image: url(../image/bg1.jpg);
/*
如果直接使用backgroung属性
会将.banner-slide中的background-repeat属性覆盖
所以应该使用background-image属性定义背景图片
*/
}
.slide2{
background-image: url(../image/bg2.jpg);
}
.slide3{
background-image: url(../image/bg3.jpg);
}
/*箭头按钮*/
.button{
position: absolute;/*相对父元素.main绝对定位*/
width: 40px;
height: 80px;
/*left: 244px;*/
top: 50%;
margin-top: -40px;
background: url(../image/arrow.png) no-repeat center center;
}
.button:hover{
background-color: #333;
opacity: 0.2;
filter: alpha(opacity=80);/*浏览器兼容*/
}
.prev{
transform: rotate(180deg);/*图片旋转180度*/
}
.next{
right: 0;
}
/*圆点按钮*/
.dots{
position: absolute;/*相对父元素.main绝对定位*/
left: 50%;
margin-left: -35px;
bottom: 20px;
text-align: right;
}
.dots span{
display: inline-block;
width: 12px;
height: 12px;
line-height: 12px;
border-radius: 50%;
background: rgba(7,17,27,0.4);
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;/*添加阴影*/
margin-left: 8px;
cursor: pointer;
}
.dots span.active{
background-color: #fff;
box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;/*添加阴影*/
}
active.js
//封装一个代替getElementById()的函数
function byId(id){
return typeof(id)
=== "string"?document.getElementById(id):id;
}
// 全局变量
var index = 0,//图片索引
timer = null,//定时器
pics = byId("banner").getElementsByTagName("div"),//图片dom对象数组
dots = byId("dots").getElementsByTagName("span"),//圆点数组
len = pics.length//图片总数;
// console.log(len);
function slideImg(){
var main = byId("main");
//鼠标划过 清除定时器
main.onmouseover = function(){
if(timer)
clearInterval(timer);
}
//鼠标离开 开启定时器
main.onmouseout = function(){
timer = setInterval(function(){
index++;
if(index >= len){
index = 0;
}
//切换图片
changeImg();
// console.log(index);
},2000);//每2秒执行一次
}
//自动触发鼠标离开事件
main.onmouseout();
//点击圆点事件
for(var d = 0;d < len;d++){
//给所有span添加值为d的id属性，用作span的索引
dots[d].id = d;
dots[d].onclick = function(){
// console.log("clicked!");
//改变index,为当前span的索引,即id
// alert(this.id);
index = this.id;
//调用changImg()实现切换图片
changeImg();
}
}
//点击箭头事件
//下一张
next.onclick = function(){
index++;
if(index >= len) index = 0;
changeImg();
}
//上一张
prev.onclick = function(){
index--;
if(index < 0) index = len-1;
changeImg();
}
}
//切换图片
function changeImg(){
//遍历banner下所有的div 全部隐藏
for(var i = 0;i < len;i++){
pics[i].style.display = "none";
dots[i].className = "";
}
pics[index].style.display = 'block';
dots[index].className = 'active';
}
slideImg();
总结：
- 使用css属性时要注意属性的优先级
- JavaScript代码中可以将重复率高的代码块写成函数，以减少代码的冗余
- 这只是一个小小的例子，同志还需努力啊
网友评论