在线项目 :  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. 评教数据整理专用VBA小程序
			
    这次评教的所有数据存放在两个数据库中,比如说给某教师评论的学生有100个,可是结果有40个的数据在数据库A中,另外60人的数据在数据库B中.那么,如何将两个库中的数据整合,最后得到教师的准确成绩成为了 ...
    
			
    2. 
						
  2. python 笔记2--函数
			
    函数变量 >>> a = abs # 变量a指向abs函数 >>> a(-1) # 所以也可以通过a调用abs函数 1 定义函数 def my_abs(x): if ...
    
			
    3. 
						
  3. JVM 垃圾回收机制( 一) 回收对象的判定
			
    关于JVM 的垃圾回收机制,我们一般都没过多深入,因为JAVA 和 C++ 的一个很大区别就是,JAVA 帮我们做了垃圾回收,而不用像C++ 那么样手动进行回收,当然任何自动的东西都存在一定弊端,比如 ...
    
			
    4. 
						
  4. winform  —— 连接数据库SQL Server 2008
			
    using System.Data.SqlClient;命名空间sqlconnection:数据连接类sqlcommand:数据库操作类sqldatareader:读取 using System; u ...
    
			
    5. 
						
  5. [转]C++实现系统服务暂停、停止、启动
			
    /* 名称:系统服务管理 语言:C++ 介绍:对Windows系统服务的状态获取,服务暂停,开启,停止操作代码 */ void CStartServiceDlg::OnBnClickedButton1 ...
    
			
    6. 
						
  6. 开启MongoDB 脚本和设置window自启
			
    wwchen: D: cd D:\Program Files\MongoDB\Server\3.2\bin mongod --dbpath=D:\mongodb\db----------------- ...
    
			
    7. 
						
  7. Entity Framework 利用 Database.SqlQuery<T> 执行存储过程，并返回Output参数值
			
    做个记录: var pCount = this._dataProvider.GetParameter(); pCount.ParameterName = "totalCount"; ...
    
			
    8. 
						
  8. 移动网页版Meta 标签
			
    viewport 大部分移动浏览器都接受,比如 Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox 最基本的例子,在 ...
    
			
    9. 
						
  9. python解析xml
			
    python解析xml import xml.dom.minidom as minidom dom = minidom.parse("aa.xml") root = dom.get ...
    
			
    10. 
						
  10. MySQL命令记录1
			
    mysql命令行 开启:net start mysql56关闭:net start mysql56(这两种情况必须有管理员权限) 登陆:mysql -h localhost -u root -p(lo ...
    
			
    11.