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 ...
随机推荐
- LR实战之Discuz开源论坛——登录场景设计
以下是根据个人项目经验,对登录场景的设计,如下步骤: 一.打开Controller,添加登录脚本,选择“手动场景”,一般我们项目中经常使用的是“手动场景”类型设计,如图 二.在“设计”部分,设置场景的 ...
- ssh登录命令（转）
转:http://blog.csdn.net/edward_qing_lee/article/details/23133331 常用格式:ssh [-l login_name] [-p port] [ ...
- Windows Live Writer针对CNBLOG的代码高亮插件
一,CodeHighlighter 1. 下载插件 下载地址:http://files.cnblogs.com/files/cmt/WindowsLiveWriter.CNBlogs.CodeHigh ...
- 从客户端(Content="<p>666</p>")中检测到有潜在危险的 Request.Form 值。
出现:从客户端(Content="<p>测试</p>")中检测到有潜在危险的 Request.Form 值. 一般是在线编辑器有HTML标签的,我是用的MV ...
- C#中Func<T,TResult>的用法和Lambda表达式
在C#3.0中引用了Limbda表达式,Limbda表达式实际上就是一个方法,只不过该方法是匿名方法(即没有名称的方法)代码片段: Func<int,string,string> t=(i ...
- javascript 算法
前段时间学习算法方面的知识看了一下用C语言写的一些简单的算法自己用js模拟实现一遍现在整理出来和大家分享一下. 河内塔 斐波那契数列 巴斯卡三角形 三色棋 河内之塔(Towers of Hanoi)是 ...
- 使用jquery插件uploadify上传文件的方法与疑问
我是学生一枚,专业也不是计算机,但又要用到很多相关技术,所以在技术基础不牢靠的情况下,硬着头皮在做.最近在做一个小项目需要上传图片,而且是需要用ajax的方式.但是利用jquery的ajax方法总会有 ...
- 使用PHP自动部署GIT代码
最近在使用Coding的代码托管,顺便设置了WebHook自动部署,过程还是挺艰辛的,主要还是没搞懂Linux的权限控制,不过好在弄好了,分享一下获益最深的一篇文章,供大家参考,原文是英文版的,我的英 ...
- python运维开发(十五)----JavaScript
内容目录: HTML补充 javascript HTML补充 1.display标签 display的inline-block 属性会自动带3px的宽度 <span style="di ...
- Repository仓储 UnitofWork
Repository仓储 UnitofWork 目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 本章我们来创建仓储类Repository 并且引入 UnitOfWork 我对 ...