在线项目 :  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">&lt;</a>

         <a href="javascript:;" class="fr" id="rBtn">&gt;</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 切换的更多相关文章
	

    
								
  1. 基于jquery仿天猫分类导航banner切换
		
    分享一款基于jquery天猫分类导航banner切换.这是一款仿最新天猫商品分类导航控制banner图片切换代码.效果图如下: 在线预览   源码下载 部分代码: <div class=&quo ...
    
		
    2. 
						
  2. Android 深入ViewPager补间动画,实现类京东商城首页广告Banner切换效果
		
    如有转载,请声明出处: 时之沙: http://blog.csdn.net/t12x3456 某天看到京东商城首页的滑动广告的Banner,在流动切换的时候有立体的动画效果,感觉很有意思,然后研究了下 ...
    
		
    3. 
						
  3. Android 轮播图Banner切换图片的效果
		
    Android XBanner使用详解 2018年03月14日 08:19:59 AND_Devil 阅读数:910   版权声明:本文为博主原创文章,未经博主允许不得转载. https://www. ...
    
		
    4. 
						
  4. jQuery banner切换插件
		
    今天学写了一个基于jQuery焦点图切换插件,有不对的地方还请多多指教,不多说下面是代码: 1.引jQuery库 <script src="http://code.jquery.com ...
    
		
    5. 
						
  5. JQuery淡入淡出 banner切换特效
		
    附件中提供另一种实现方式 基本类似 主要的实现方法如下: var ShowAD=function(i){   showImg.eq(i).animate({opacity:1},settings.sp ...
    
		
    6. 
						
  6. 原生态JS实现banner图的常用所有功能
		
    虽然,用jQuery实现banner图的各种效果十分简单快捷,但是我今天用css+js代码实现了几个banner图的常用功能,效果还不错. 此次,主要想实现以下功能: 1. banner图循环不间断切 ...
    
		
    7. 
						
  7. iOS开发——高级技术&广告功能的实现
		
    广告功能的实现 iPhone/iPad的程序,即使是Free的版本,也可以通过广告给我们带来收入.前提是你的程序足够吸引人,有足够的下载量.这里,我将介绍一下程序中集成广告的方法.主要有两种广告iAd ...
    
		
    8. 
						
  8. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战：个人博客第一版(axios+router)
		
    前言 今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时 ...
    
		
    9. 
						
  9. CSS3、SVG、Canvas、WebGL动画精选整理
		
    一.CSS3动画 名称 用途 链接 阴影波纹特效 1.元素hover效果 2.突出表现效果 http://www.jq22.com/code80 横板导航菜单动画 导航菜单 http://www.jq ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Stones（优先队列）
			
    Stones Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Subm ...
    
			
    2. 
						
  2. 【Heritrix基础教程之3】Heritrix的基本架构
			
    Heritrix可分为四大模块: 1.控制器CrawlController 2.待处理的uri列表  Frontier 3.线程池 ToeThread 4.各个步骤的处理器 (1)Pre-fetch  ...
    
			
    3. 
						
  3. 用Unity做的一个小游戏，仿照一个样例写的，个人认为文章写的不错，哈哈
			
    
			
    4. 
						
  4. C# winfrom 模拟ftp文件管理
			
    从网上找到的非常好用的模拟ftp管理代码,整理了一下,希望对需要的人有帮助 using System; using System.Collections.Generic; using System.T ...
    
			
    5. 
						
  5. 实现接口IDisposable的示例
			
    想使用using(...), 如: using (Getter process = new Getter()) { //... } 就必须给类实现接口IDisposable public sealed ...
    
			
    6. 
						
  6. WPF学习记录1：ListView的一个模板
			
    在网上找的一个模板,放在这里,作为笔记,收集 <ListView Grid.Column=" Name="ListmuLu" > <ListView.I ...
    
			
    7. 
						
  7. 池化 - Apache Commons Pool
			
    对于那些创建耗时较长,或者资源占用较多的对象,比如网络连接,线程之类的资源,通常使用池化来管理这些对象,从而达到提高性能的目的.比如数据库连接池(c3p0, dbcp), java的线程池 Execu ...
    
			
    8. 
						
  8. HDU 2458 - Kindergarten
			
    有一堆男孩和女孩,男孩和男孩之间,女孩和女孩之间互相认识,给出一堆男孩女孩之间认识的关系, 问一个组里最多多少人相互都认识 那么 二分图里 将不认识的连线 那么 相互认识的人最多 就为 最大独立点集  ...
    
			
    9. 
						
  9. ctype.h库函数
			
    头文件ctype.h声明了一组用于分类和转换单个字符的函数.所有的函数都接收一个int型的参数,并返回一个int——返回的int可能代表一个字符,也可能代表的是bool值(0为假,非0为真). 你可能 ...
    
			
    10. 
						
  10. CodeForces 203C Photographer
			
    简单贪心.注意内存够大,能满足所有顾客的特殊情况. #include <iostream> #include <cstring> #include <algorithm& ...
    
			
    11.