zoukankan      html  css  js  c++  java
  • web前端之图片轮播特效

    这周用jquery来实现网页上常见的图片轮播效果,下边是效果图:

    当我们用鼠标点击上图中的向左以及向右按钮时候,图片会发生相应的切换效果,代码如下:

    index.html源代码:
    
    
    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus?">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>图片轮播</title>
      <link href='./index.css' type='text/css' rel='stylesheet'/>
      <script type="text/javascript" src="jquery-2.1.1.js"></script>
      <script type="text/javascript" src="index.js"></script>
     </head>
     
     <body>
     <div id="pox">
         
    	 <img id='pre' src='./imgs/pre1.png'/>
    	 
    	 <div id='box'>
    	 <ul id='ul1_1'>
    	 <li><a href=''><img src='./imgs/1.png'></a></li>
    	 <li><a href=''><img src='./imgs/2.png'></a></li>
    	 <li><a href=''><img src='./imgs/3.png'></a></li>
    	 <li><a href=''><img src='./imgs/4.png'></a></li>
    	 <li><a href=''><img src='./imgs/5.png'></a></li>
    	 <li><a href=''><img src='./imgs/6.png'></a></li>
    	 <li><a href=''><img src='./imgs/7.png'></a></li>
    	 <li><a href=''><img src='./imgs/8.png'></a></li>
    	 <li><a href=''><img src='./imgs/9.png'></a></li>
    	 <li><a href=''><img src='./imgs/10.png'></a></li>
    	 </ul>
    	 
    	 </div>
    	 <img id='next' src='./imgs/next1.png'/>
     </div>
     </body>
     </html>
    

      

    inindex.css源代码
    
    *{
    margin:0px;
    padding:0px;
    }
    
    li{
    list-style:none;
    }
    
    #pox{
    1000px;
    height:130px;
    border-top:2px solid blue;
    border-bottom:1px solid blue;
    border-left:1px solid blue;
    border-right:1px solid blue;
    margin:0px auto;
    }
    
    
    #ul1_1{
    1850px;
    height:110px;
    margin-left:0px;
    }
    
    #ul1_1 li{
    float:left;
    padding-left:12px;
    padding-right:12px;
    margin-top:5px;
    }
    
    #pre{
    float:left;
    margin-left:10px;
    margin-top:60px;
    }
    
    #next{
    float:right;
    margin-right:10px;
    margin-top:-115px;
    }
    
    
    #box{
    920px;
    height:160px;
    margin-left:40px;
    margin-top:15px;
    overflow: hidden;
    }
    #box #ul1_2{
    1850px;
    height:20px;
    float:left;
    margin-top:10px;
    }
    
    #box #ul1_2 li{
    float:left;
    padding-left:15px;
    line-height:20px;
    }
    #box #ul1_2 li a{
    color:black;
    
    }
    
    #box #ul1_2 li a:hover{
    text-decoration:underline;
    }
    

      

    index.js源代码
    
    $(function(){
    	
    $('#next').on('click',function(){
    	var res=$('#ul1_1').css('margin-left');
    	var leftNum=parseInt(res.substr(0,res.length-2));
    	if(leftNum<=0&&leftNum>=-860)
        $('#ul1_1').css('margin-left',((leftNum-183)+'px'));
    	});
    	
    $('#pre').on('click',function(){
    	var res=$('#ul1_1').css('margin-left');
    	var leftNum=parseInt(res.substr(0,res.length-2));
    	if(leftNum<0){	
    	   $('#ul1_1').css('margin-left',((leftNum+183)+'px'));
    	}
    });
    });
    

      特别说明:本实例采用jquery2.0以后的版本,如果是之前版本,可能部分函数无法使用,请自行改成之前对应函数。

       图片轮播原理:首先设置一个大的div盒子,用来包括图片(只需要包括呈现出来的图片就好),就如之上图片上显示出图片的那部分(还用边框包括起来了),对应index.html代码 里面id为pox的那个div。  之后呢,创建两个<img>标签来显示那两个向前向后的图片(不然没法点击怎么切换啊?),将对应位置设置好就可以。再然后就创建一个ul列表来存放需要展示的十张图片(吐槽:上边怎么只显示五张??  me:拜托,只有五张图片你切换你大头贴啊??),然后设置之前那个id为pox的div的一个属相为溢出隐藏,也就是:overflow:hidden。这个属性的意思就是当ul的图片超出之前div时候就隐藏了,也就是说,其实十张图片都是存在的,只是超出div盒子的部分被我们隐藏了。当我们点击那两个按钮时候,只需要改变ul中呈现在盒子里面的内容就可以了,简单来说,让ul的margin-left对应增加减少就可以了。

  • 相关阅读:
    hive与hbase整合
    待重写
    hive DML
    【知识强化】第六章 总线 6.1 总线概述
    【知识强化】第五章 中央处理器 5.1 CPU的功能和基本结构
    【知识强化】第四章 指令系统 4.3 CISC和RISC的基本概念
    【知识强化】第四章 指令系统 4.2 指令寻址方式
    【知识强化】第四章 指令系统 4.1 指令格式
    【知识强化】第三章 存储系统 3.6 高速缓冲存储器
    【知识强化】第三章 存储系统 3.5 双口RAM和多模块存储器
  • 原文地址:https://www.cnblogs.com/jakii/p/4439312.html
Copyright © 2011-2022 走看看