在线项目 : Banner 切换
时间 : 2个小时 (15:00 - 17:00)
满分 : 100分
---------------------------------------------------
工具 : sublime , webstorm , 记事本 , hbuilder
---------------------------------------------------
技术 : 使用jq html5 完成
---------------------------------------------------
禁止 : 查看以往的案例去做 , 询问旁边的小伙伴 , 教做
允许 : 查看手册
---------------------------------------------------
文件 /image /css /js 10
---------------------------------------------------
布局 :
图片布局 10
导航点 10
左右翻页按钮 10
---------------------------------------------------
效果 :
动态生成导航点 10
实现定时切换图片 10
鼠标悬停时暂停计时器松开后继续切换 10
实现导航点切换 10
实现左右切换 10
实现定时无缝切换和左右按钮无缝切换 10
---------------------------------------------------
html结构部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>考试内容</title>
<link rel="stylesheet" href="css/base.css">
<script SRC="js/jquery-1.9.1.js"></script>
<script src="js/js.js"></script>
</head>
<body>
<div class="container" >
<ul id="silder">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<!--<li>6</li>-->
</ul>
<a href="javascript:;" class="fl" id="lBtn"><</a>
<a href="javascript:;" class="fr" id="rBtn">></a>
<div id="circle"> </div>
</div>
<!--动态生成导航点-->
<script type="text/javascript">
var _ul=document.getElementById('silder');
var Ali=_ul.children;
var circleBox=document.getElementById('circle');
for(var i=0;i<Ali.length;i++){
var newCircle=document.createElement('span');
circleBox.appendChild(newCircle);
}
var Aspan=circleBox.children;
Aspan[0].classList.add('active');
</script>
</body>
</html>
css样式部分
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.fl{
float: left;
}
.fr{
float: right;
}
/*------------------*/
.container{
width: 900px;
height: 500px;
overflow: hidden;
margin: 45px auto;
border: 1px solid #000;
position: relative;
}
.container ul{
width: 1000%;
height: 500px;
position: absolute;
left: 0;
top: 0;
}
.container ul li{
float: left;
width: 900px;
height: 500px;
background-size: cover;
}
.container ul li:nth-child(1){
background-image: url(../image/1.jpg);
}
.container ul li:nth-child(2){
background-image: url(../image/2.jpg);
}
.container ul li:nth-child(3){
background-image: url(../image/3.jpg);
}
.container ul li:nth-child(4){
background-image: url(../image/4.jpg);
}
.container ul li:nth-child(5){
background-image: url(../image/5.jpg);
}
.container ul li:nth-child(6){
background-image: url(../image/1.jpg);
}
.container a {
display: block;
width: 20px;
height: 100px;
border: 1px solid #ccc;
font: 400 30px/100px 'microsoft YaHei';
color: #f5f5f5;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.container a:nth-child(2){
left: 0;
}
.container a:nth-child(3){
right: 0;
}
.container #circle{
position: absolute;
left: 50%;
bottom:0;
transform: translateX(-50%);
}
.container #circle span{
float: left;
width: 40px;
height: 10px;
border-radius:5px;
border: 1px solid #000;
margin: 5px;
cursor: pointer;
}
.active {
background-color: cornsilk;
}
js部分
/**
* Created by ASUS on 2016/5/30.
*/
window.onload=function(){
var container=document.getElementsByTagName('div')[0];
console.log(container.offsetWidth);
var ul=document.getElementById('silder');
// var ulWidth=ul.offsetWidth;
var Ali=ul.children;
var liWidth=Ali[0].offsetWidth;
var circlebox=document.getElementById('circle');
var Aspan=circlebox.children;
/*导航点切换*/
container.onmouseenter=function () {
clearInterval(timer)
}
container.onmouseleave=function () { timer =setInterval(function () {
if(num<Ali.length){
changeImg(ul,-num*liWidth);
changes(num);
num++; // console.log(num-1);
// console.log(num);
}else{
num=0;
}
},1000);
} function changes(num){
// console.log(Aspan.length);
for(var k=0;k<Aspan.length;k++){
Aspan[k].classList.remove('active');
}
Aspan[num].classList.add('active');
}
//changes(3);
var timer=null;
/*图片轮播*/
function changeImg(obj,target) {
//clearInterval(timer)
var speed=obj.offsetLeft>target?-15:15;
// obj.style.left=target+speed+"px";
obj.style.left=target+"px";
var res=target-obj.offsetLeft;
if(Math.abs(res)<5){
obj.style.left=target+"px";
}
}
/*定时器*/
var num=0;
var timer =setInterval(function () {
if(num<Ali.length){
num++;
// console.log(num-1);
// console.log(num);
}else{
num=0;
}
changes(num);
changeImg(ul,-num*liWidth); },1000);
/*鼠标悬停*/
function mouseChange(){
console.log(Aspan.length);
for(var i = 0;i< Aspan.length;i++){
Aspan[i].index=i;
Aspan[i].onmouseover=function (){
console.log(Aspan.length);
for(var j=0;j<Aspan.length;j++){
Aspan[j].classList.remove('active');
}
Aspan[this.index].classList.add('active');
changeImg(ul,-this.index*liWidth);
} }
}
mouseChange();
/*左右切换*/
var leftBnt=document.getElementById('lBtn');
var rightBtn=document.getElementById('rBtn');
function btnchange() {
var number=5;
leftBnt.onmousedown=function () {
if(number>0){
number--;
console.log(number);
//clearInterval(timer);
ul.style.left=-number*liWidth+"px";
}
else{
number=4;
ul.style.left=-number*liWidth+"px";
}
for(var j=0;j<Aspan.length;j++){
Aspan[j].classList.remove('active');
}
Aspan[number].classList.add('active');
} rightBtn.onmousedown=function () {
if(number>3){
number=0;
ul.style.left=number*liWidth+"px";
}
else{
number++;
console.log(number);
ul.style.left=-number*liWidth+"px";
}
for(var j=0;j<Aspan.length;j++){
Aspan[j].classList.remove('active');
}
Aspan[number].classList.add('active');
}
}
btnchange();
}
<--图片-->
