6-2作业
来源：6-1 案例总结
慕婉清8012359
2017-08-30 15:18:24
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>实例</title> <link rel="stylesheet" href="css/css.css"> </head> <body> <!-- 切换项标题 --> <div class="main" id="main"> <div class="changeTitle" id="title-active"> <div class="Items" id="items"> <a href="#"><div class="Item item-active">首页</div></a> <a href="#"><div class="Item ">点击看看</div></a> <a href="#"><div class="Item">会自动的</div></a> <a href="#"><div class="Item">我的网站</div></a> </div> </div> <!-- 图片轮播 --> <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> <a href="#"> <div class="banner-slide slide4 "></div> </a> </div> </div> </body> <script src="js/js.js"></script> </html>
*{
padding: 0;
margin:0;
font-family: "Microsoft YaHei";
font-size: 22px;
}
.main{
width: 1200px;
height: 514px;
margin: 0 auto;
}
.changeTitle{
width: 1200px;
height: 54px;
background-color: #FFF;
margin: 0 auto;
position: relative;
border-left:1px dashed;
border-right:1px dashed;
border-top: 1px dashed;
border-radius: 5px;
}
a:link,a:visited{
text-decoration: none;
color: #333;
}
.Items{
width: 1200px;
height: 54px;
line-height: 54px;
text-align: center;
}
.Item{
width: 300px;
float: left;
}
.item-active{
background-color: #FFCC00;
}
/*图片轮播*/
.banner{
width: 1200px;
height: 460px;
margin: 0 auto;
}
.banner-slide{
width: 1200px;
height: 460px;
background-repeat: no-repeat;
/*通过定位来实现图片的重叠:此时图片要相对父本banner来定位*/
position: absolute;
/*先要隐藏所有的图片，因为交互效果的实现就是通过显示和隐藏*/
display: none;
}
.slide-active{
display: block;
}
/*由于添加的轮播的图片都不一样 因此各自再次添加类*/
.slide1{
/*此时不能再使用background-repeat:url("")来设置图片，因为父元素用过了，会被覆盖，所以使用background-image来设置*/
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");
}function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
var timer = null,
index = 0,
main = byId("main"),
banners = byId("banner").getElementsByTagName("div"),
titleActive = byId("items").getElementsByTagName("div"),
len = banners.length;
console.log(titleActive)
function slideTitle(){
// 鼠标滑过盒子清除定时器
main.onmouseover = function(){
if (timer) clearInterval(timer);
}
//鼠标离开main继续，图片每秒钟切换一次
main.onmouseout = function(){
timer =setInterval(function(){
index++;
//超过元素总长度3的时候就回到第一个div
if (index>=len) { //len:0 1 2 3 0
index=0;
}
//切换图片 封装一个函数
changeImg();
},1000);
}
//自动轮播
main.onmouseout ();
}
function changeImg(){
//现在的index是多少就显示当前的类，以及了该index以外的元素隐藏起来，达到元素显示的效果
//遍历banner下所有的div，将其隐藏
for (var i = 0; i <len; i++) {
banners[i].style.display = "none";
titleActive[i].className = "Item";
}
//1s间歇调用---根据index索引将当前的div显示出来
banners[index].style.display = "block";
titleActive[index].className = "Item item-active";
}
slideTitle();
老师最后那个联动的效果呈现想不出来 试了好多次都错误 ，请问我这个代码能怎么实现
1回答
-
小丸子爱吃菜
2017-08-31
你说的效果是，点击导航项时也切换到相关图片这个效果么？
可以参考案例中的这部分代码：
祝学习愉快！
0
相似问题