<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>POLO360练习</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<style type="text/css">
/*设置banner*/
.banner {
background: url(img/banner-bg.png) no-repeat bottom center;
height: 356px;
position: relative;
}
/* 设置多张图片，重叠在一起，透明 */
.banner>img {
border-radius: 5px;
position: absolute;
width: 940px;
height: 345px;
top: 0px;
left: 0px;
opacity: 0;
/* 过度效果:不透明度 0.5秒 线性渐变 */
transition: opacity 0.5s linear;
}
/*设置不透明样式*/
.banner>img.active {
opacity: 1;
}
.pointerDIV {
position: absolute;
top: 314px;
left: 15px;
}
.pointerDIV a {
float: left;
height: 20px;
width: 20px;
background: url(img/pointer.png) no-repeat;
margin-left: 4px;
cursor: pointer;
}
/* 圆点的选中或者鼠标经过样式 */
.pointerDIV a.active,
.pointerDIV a:hover {
background: url(img/pointer-active.png) no-repeat;
}
/* 上一页 下一页 样式 */
.banner-page {
width: 25px;
height: 50px;
position: absolute;
top: 45%;
background-color: rgba(0, 0, 0, 0.3);
font-size: 28px;
line-height: 1.5;
color: #b5b5b5;
text-align: center;
cursor: pointer;
}
.banner-page.left {
left: 0;
}
.banner-page.right {
right: 0;
}
.banner-page:hover {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
}
</style>
</head>
<body>
<!--创建头部-->
<div class="header w">
<ul class="nav">
<li>
<a href="#">HOME</a>
<p>Back to home</p>
</li>
<li>
<a href="#">PRODUCTS</a>
<p>What we have for you</p>
</li>
<li>
<a href="#">SERVICES</a>
<p>Things we do</p>
</li>
<li>
<a href="#">BLOG</a>
<p>Follow our updates</p>
</li>
<li>
<a href="#">CONTACT</a>
<p>Ways to reach us</p>
</li>
</ul>
<div class="logo">
<a href="#" title="网站">
<img src="img/logo.png" alt="网站logo">
</a>
</div>
</div>
<!--banner轮播图-->
<div class="banner w">
<img class="active" src="img/banner/banner01.png" alt="banner轮播图">
<img src="img/banner/banner02.png" alt="banner轮播图">
<img src="img/banner/banner03.png" alt="banner轮播图">
<img src="img/banner/banner04.png" alt="banner轮播图">
<div class="pointerDIV">
<a data-name="point" data-value="0" class="active"></a>
<a data-name="point" data-value="1"></a>
<a data-name="point" data-value="2"></a>
<a data-name="point" data-value="3"></a>
</div>
<div data-name="left" class="banner-page left">
<
</div>
<div data-name="right" class="banner-page right">
>
</div>
</div>
<!--content内容区-->
<div class="content w clearfix">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<div class="pl">
<h2>Perfect Logic</h2>
<p class="p1">All you want your website to do.</p>
<div class="imgDIV">
<img src="img/pic/pic1.jpg" alt="">
</div>
<p class="p2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.</p>
<a class="lm" href="#">Learn More</a>
</div>
<div class="cs">
<h2>Complete Solution</h2>
<p class="p1">A tool anything and everything you can think</p>
<div class="imgDIV">
<img src="img/pic/pic2.jpg" alt="">
</div>
<p class="p2">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat
voluptatem.</p>
<a class="lm" href="#">Learn More</a>
</div>
<div class="uc">
<h2>Uber Culture</h2>
<p class="p1">Fresh. Modern and ready for future</p>
<div class="imgDIV">
<img src="img/pic/pic3.jpg" alt="">
</div>
<p class="p2">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.</p>
<a class="lm" href="#">Learn More</a>
</div>
</div>
<!--联系我们-->
<div class="contact w clearfix">
<div class="sc">
<h2>Social Connection</h2>
<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
<div class="icon">
<a href="#"><img src="img/rss.png"></a>
<a href="#"><img src="img/fb.png"></a>
<a href="#"><img src="img/in.png"></a>
<a href="#"><img src="img/yt.png"></a>
<a href="#"><img src="img/tw.png"></a>
</div>
<h2 class="nl">News Letters</h2>
<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
<form action="#" method="post">
<input class="txt" type="text" id="" value="" placeholder="your email address" />
<input class="btn" type="submit" value="Send it" />
</form>
</div>
<div class="co">
<h2>Contact</h2>
<form action="#" method="post">
<input class="txt" type="text" id="" value="" placeholder="your name" />
<input class="txt" type="text" id="" value="" placeholder="your email address" />
<textarea class="tarea" rows="" cols="" placeholder="message"></textarea>
<input class="btn" type="submit" value="Send it" />
</form>
</div>
<div class="nu">
<h2>News Updates</h2>
<div class="n1">
<p>
<img src="img/pic/1.png">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</p>
<p>
<img src="img/pic/2.png">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</p>
<p class="no-margin">
<img src="img/pic/3.png">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</p>
<input class="btn" type="submit" value="Visit our Blog" />
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<div class="footer-DIV w">
<p class="copy">Copyright 2010. Studio VIVROCKS. All Rights Reserved.</p>
<p>Site Powered by Wordpress. Design and Developed by VIVROCKS.</p>
<p>
<a href="">Home</a> |
<a href="">About</a> |
<a href="">Products</a> |
<a href="">Services</a> |
<a href="">Contact</a>
</p>
<p>
<a href="">Privacy Policy</a> |
<a href="">Terms of use</a>
</p>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var banner = document.querySelector('.banner');
var imgs = document.querySelectorAll('.banner img');
// console.log(imgs)
var points = document.querySelectorAll('.pointerDIV a');
// console.log(points)
var index = 0; //标识当前是第几张图片，默认是0
var interval; //定义一个定时器
function changeOne(type) {
window.clearInterval(interval); //清除一下定时器，切换图后重新启动
//清除当前张的样式，让其消失
imgs[index].className = '';
points[index].className = '';
//type为true表示下一张，type为false表示上一张，type为数字时表示显示的索引
if (type === true) {
index++;
} else if (type === false) {
index--;
} else {
index = type;
}
//点击下一页或者上一页时，判断是否超出界限
if (index >= imgs.length) {
index = 0;
}
if (index < 0) {
index = imgs.length - 1;
}
//给当前页添加样式，让其显示
imgs[index].className = 'active';
points[index].className = 'active';
//重新启动定时器
interval = setInterval(function() {
changeOne(true)
}, 5000)
}
//轮播图区域绑定点击事件
banner.onclick = function(e) {
//点击的是圆点
if (e.target.dataset.name === 'point') {
var i = e.target.dataset.value;
changeOne(i);
}
//点击的是左边箭头
if (e.target.dataset.name === 'left') {
changeOne(false);
}
//点击的是右边箭头
if (e.target.dataset.name === 'right') {
changeOne(true);
}
}
//定时器 每隔5秒切换下一张
interval = setInterval(function() {
changeOne(true)
}, 5000)
</script>
07-05
785
785
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
