在线项目 :  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. RMAN备份各种物理文件
			
    RMAN运行脚本的方式:RMAN TARGET / @backup_db.rmanRMAN TARGET / cmdfile=backup_db.rman在RMAN中执行操作系统中保存的脚本:RMAN ...
    
			
    2. 
						
  2. JAVA  HashMap与HashTable 区别
			
    HashTable和HashMap区别 第一,继承不同. public class Hashtable extends Dictionary implements Mappublic class Ha ...
    
			
    3. 
						
  3. Javascript基础学习笔记
			
    什么是变量?变量是用于存储信息的容器变量的声明语法: var 变量名 变量名 = 值;变量要先声明再赋值变量可以重复赋值变量的命名规则变量必须以字母开头:变量也能以$和_符号开头(不过我们不推荐这么做 ...
    
			
    4. 
						
  4. thinkphp+redis实现秒杀功能
			
    好久没来整理文章了,闲了没事写篇文章记录下php+redis实现商城秒杀功能. 1,安装redis,根据自己的php版本安装对应的redis扩展(此步骤简单的描述一下) 1.1,安装 php_igbi ...
    
			
    5. 
						
  5. 配置Apache2 管理 SVN
			
    软件环境:CentOS-7-x86_64 1.安装 mod_dav_svn   模块 2.在Apache2下增加管理配置,如: cd /etc/httpd/conf.d vim subversion. ...
    
			
    6. 
						
  6. MySQL查询优化之explain
			
    在分析查询性能时,考虑EXPLAIN关键字同样很管用.EXPLAIN关键字一般放在SELECT查询语句的前面,用于描述MySQL如何执行查询操作.以及MySQL成功返回结果集需要执行的行数.expla ...
    
			
    7. 
						
  7. Python 整理一
			
    ---恢复内容开始--- Python (pailen)最近学习这个语言,其实早在几年前学习perl的时候就知道有这个语言了,在讲perl的那本书后面就推荐学习python,并且还附加了二章的入门.当 ...
    
			
    8. 
						
  8. make clean与make distclean的区别
			
    make clean仅仅是清除之前编译的可执行文件及配置文件. 而make distclean要清除所有生成的文件. Makefile 在符合GNU Makefiel惯例的Makefile中,包含了一 ...
    
			
    9. 
						
  9. PHP字符编码问题-总结
			
    今天在网上看到一个人的对于php开发中字符编码的总结,感觉不错,摘录如下: 一,php编码转换        1.通过iconv()函数实现编码转换                语法:iconv(s ...
    
			
    10. 
						
  10. Android反编译APK
			
    http://blog.csdn.net/vipzjyno1/article/details/21039349/ 关于被加壳工具添加我的apk如何脱壳 http://www.blogfshare.co ...
    
			
    11.