目前还没有开始PHP的学习,最近在慕课网上的JS课程快听完了,国庆假期回去之后开始PHP学习进阶之路。在JS基础课程的最后要求实现一个图片轮播的效果,要求是打开后,隔1秒自动播放,鼠标滑过导航菜单,标题字会出现背景色,就像下图这样
我写的代码中,没有实现“点击标题切换到相应的图片”,这个应该是在JS中修改,哎~先把我的代码附上~
<!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 id="main" class="main">
<!--导航菜单-->
<div class="menu" id="menu">
<ul id="menu-ul">
<li><a href="">首页</a></li>
<li><a href="">点击查看</a></li>
<li><a href="">会自动的</a></li>
<li><a href="">我的网站</a></li>
</ul>
</div>
<!--图片轮播-->
<div class="banner" id="banner">
<a href="">
<div class="banner-side slide1 slide-active"></div>
</a>
<a href="">
<div class="banner-side slide2 "></div>
</a>
<a href="">
<div class="banner-side slide3 "></div>
</a>
<a href="">
<div class="banner-side slide4 "></div>
</a>
</div>
</div>
<script src="JavaScript/JAVASCRIPT.js"></script>
</body>
</html>
*{
margin:0;
padding: 0;
}
a{
text-decoration: none;
}
ul{
list-style:none;
}
body{
font-family: "微软雅黑";
color: #666;
}
.main{
width: 1200px;
height: 460px;
margin:30px auto;
position: relative;
overflow:hidden;
}
.banner{
width: 1200px;
height: 460px;
overflow:hidden;
position: relative;
}
.banner-side{
width: 1200px;
height: 460px;
background-repeat: no-repeat;
float: left;
display: none;
}
.slide-active{
display: block;
}
.slide1{
background-image:url(../img/1.jpg);
}
.slide2{
background-image:url(../img/3.jpg);
}
.slide3{
background-image:url(../img/4.jpg);
}
.slide4{
background-image:url(../img/5.jpg);
}
/*导航菜单*/
.menu{
width: 100%;
height:40px;
}
.menu ul{
width: 100%;
height: 40px;
}
.menu ul li{
float: left;
width: 300px;
}
.menu-active{
background-color:#ffcc00;
font-weight:bold;
border: transparent;
border-radius: 10px;
}
.menu ul li a{
display: inline-block;
width: 100%;
margin: 0 auto;
text-align: center;
line-height: 40px;
}
//封装一个代替getElementByID()的方法
function byId(id){
return typeof(id) === "string"?document.getElementById(id):id;
}
//console.log(byId("main"));
//全局变量
var index = 0,
timer = null,
pics = byId("banner").getElementsByTagName("div"),
menuUlli = byId("menu-ul").getElementsByTagName("a"),
len = pics.length;
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;
}
//console.log(index);
//切换图片
changeImg();
},1000);
}
//自动在main上触发鼠标离开的事件
main.onmouseout();
//点击文字,切换图片(遍历所有点击,且绑定点击事件,点击文字切换图片)
for(var m=0;m<len;m++){
//alert(m);
//给所有li添加一个id的属性,值为当前li的索引
menuUlli[m].id = m;
//console.log(m);
menuUlli[m].onclick = function(){
//alert("hello");
//改变index为当前li的id值
index = this.id;
console.log(this.id);
this.className = "menu-active";
//调用changeImg(),实现切换图片
changeImg();
}
}
}
//切换图片
function changeImg(){
//console.log(index);
//遍历banner下所有的div,将其隐藏,遍历ul下的里将其清除
for (var i=0;i<len;i++){
pics[i].style.display = "none";
menuUlli[i].className = "";
}
//根据index索引找到当前div,将其显示出来
pics[index].style.display = 'block';
menuUlli[index].className = "menu-active";
}
slideImg();