原生原生js实现网易轮播图效果实现网易轮播图效果
一、实现效果图一、实现效果图
二、分析布局二、分析布局
主盒子里分上下两个小盒子(1和2)。
包含图片的盒子占两张图片的宽(3),处于上盒子中,当前图片在上盒子(1)中,其它图片在盒子(3)的右侧等待播放。
下边的盒子(2)包括了六个小方块及定位在主盒子上的两个箭头。
三、三、html部分部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wangyi</title>
<link type="text/css" rel="stylesheet" href="css/guide.css"/>
<script type="text/javascript" src="../animate.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="w-slider">
<div class="slider">
<div class="slider-main" id="slider_main_block">
<div class="slider-main-img"><a href="#"><img src="images/1.jpg"/></a></div>
<div class="slider-main-img"><a href="#"><img src="images/2.jpg"/></a></div>
<div class="slider-main-img"><a href="#"><img src="images/3.jpg"/></a></div>
<div class="slider-main-img"><a href="#"><img src="images/4.jpg"/></a></div>
<div class="slider-main-img"><a href="#"><img src="images/5.jpg"/></a></div>
<div class="slider-main-img"><a href="#"><img src="images/6.jpg"/></a></div>
</div>
</div>
<div class="slider-ctrl" id="slider_ctrl">
<span class="slider-ctrl-pre"></span>
<span class="slider-ctrl-next"></span>
</div>
</div>
</body>
</html>
四、四、CSS部分部分
* {
margin: 0;
padding: 0;
}
.w-slider {
width:310px;
height:265px;
margin:100px auto;