Banner 切换
在线项目 : 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();
}
<--图片-->
Banner 切换的更多相关文章
- 基于jquery仿天猫分类导航banner切换
分享一款基于jquery天猫分类导航banner切换.这是一款仿最新天猫商品分类导航控制banner图片切换代码.效果图如下: 在线预览 源码下载 部分代码: <div class=&quo ...
- Android 深入ViewPager补间动画,实现类京东商城首页广告Banner切换效果
如有转载,请声明出处: 时之沙: http://blog.csdn.net/t12x3456 某天看到京东商城首页的滑动广告的Banner,在流动切换的时候有立体的动画效果,感觉很有意思,然后研究了下 ...
- Android 轮播图Banner切换图片的效果
Android XBanner使用详解 2018年03月14日 08:19:59 AND_Devil 阅读数:910 版权声明:本文为博主原创文章,未经博主允许不得转载. https://www. ...
- jQuery banner切换插件
今天学写了一个基于jQuery焦点图切换插件,有不对的地方还请多多指教,不多说下面是代码: 1.引jQuery库 <script src="http://code.jquery.com ...
- JQuery淡入淡出 banner切换特效
附件中提供另一种实现方式 基本类似 主要的实现方法如下: var ShowAD=function(i){ showImg.eq(i).animate({opacity:1},settings.sp ...
- 原生态JS实现banner图的常用所有功能
虽然,用jQuery实现banner图的各种效果十分简单快捷,但是我今天用css+js代码实现了几个banner图的常用功能,效果还不错. 此次,主要想实现以下功能: 1. banner图循环不间断切 ...
- iOS开发——高级技术&广告功能的实现
广告功能的实现 iPhone/iPad的程序,即使是Free的版本,也可以通过广告给我们带来收入.前提是你的程序足够吸引人,有足够的下载量.这里,我将介绍一下程序中集成广告的方法.主要有两种广告iAd ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战：个人博客第一版(axios+router)
前言 今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时 ...
- CSS3、SVG、Canvas、WebGL动画精选整理
一.CSS3动画 名称 用途 链接 阴影波纹特效 1.元素hover效果 2.突出表现效果 http://www.jq22.com/code80 横板导航菜单动画 导航菜单 http://www.jq ...
随机推荐
- 如何对应用服务性能问题诊断（Tomcat、Weblogic中间件）
在我们web项目中,我们常见的web应用服务器有Tomcat.Weblogic.WebSphere.它们是互联网应用系统的基础架构软件,也叫“中间件”,负责处理动态在页面请求,并为应用提供了名字.事务 ...
- C# 数据的序列化存取
1,什么是序列化? 序列化 (Serialization)将对象的状态信息转换为可以存储或传输的形式的过程.在序列化期间,对象将其当前状态写入到临时或持久性存储区.以后,可以通过从存储区中读取或反序列 ...
- UNIX下解压缩文件
用法示例以Sun Solaris (其他unix如linux.aix大体相同)为例=========================================================== ...
- Oracle11g客户端安装及plsql配置
1,项目使用的是oracle11g数据库,安装个客户端访问服务器. 到oracle官方下载: http://www.oracle.com/technology/global/cn/software/t ...
- mac版gif格式录屏工具下载和使用
下载链接: http://pan.baidu.com/s/1geeRmtd 密码: rstv ps:如果失效可以联系发邮件至chenruichn@163.com联系我 [以下教程为转载]本帖最后由 S ...
- ps 网页布局
910 1680 找一个页面作为参考 双击小手回到正常视角 新建组 把他们放到一个组里 新建组改名(创意专家) 放入一个图片 内发光投影 Shiftalt 复制 新建组 改名创意案 ...
- primary key与unique的区别
定义了 UNIQUE 约束的字段中不能包含重复值,可以为一个或多个字段定义 UNIQUE 约束.因此,UNIQUE 即可以在字段级也可以在表级定义, 在UNIQUED 约束的字段上可以包含空值.ORA ...
- python运维开发(十三)----SQLalchemy和paramiko续
内容目录: ORM架构SQLalchemy Paramiko SQLalchemy对表的操作 使用 ORM/Schema Type/SQL Expression Language/Engine/Con ...
- 补丁惹的祸-ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService
未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService...匹配的导出 问题: 重新安装了VS2012,结 ...
- 构建混合云：配置Azure site to site VPN连接(1)
用户在构建自己云计算解决方案的时候,往往会选择私有云或者公有云来做部署,但在一些场景下,用户更加希望通过混合云的方案来满足自己的业务需求.Azure为混合云的部署提供多种不同的连接方案,最常见的是 ...