仿淘宝幻灯片,基础版,后期效果是要做到每次点击小圆点,切换都无缝

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>4.淘宝幻灯片</title>

         <meta name="author" content="Administrator" />

         <!-- Date: 2014-12-11 -->

         <style>

             *{margin:0;padding:0}

             #div1{width:400px;height:215px;  border:1px solid red;margin:40px auto; overflow:hidden;position:relative }

             ul{position:absolute;left:0;top:0}

             li{list-style:none;float:left; position: relative}

             li.active{background:red}

             li.active2{border:1px solid red}

             li img{width:400px;}

             ol{position:absolute}

             ol li{width:15px;height:15px;border-radius:10px;background:#808080;margin:0 3px}

             .t{position:absolute;font-size:80px;z-index:2;left:200px;top:100px;color:red;width:100px;height:100px;background:#fff;text-align:center; border:1px solid black}

         </style>

         <script>

             window.onload=function(){

                  var oDiv1=document.getElementById('div1');

                  var oUl=oDiv1.getElementsByTagName('ul')[0];

                  var aLi=oUl.getElementsByTagName('li');

                  var arr=['3-images/1.jpg','3-images/2.jpg','3-images/3.jpg','3-images/4.jpg','3-images/5.jpg'];

                  var arr1=['1','2','3','4','5'];

                  oUl.style.width = aLi.length * aLi[0].offsetWidth +'px';

                  var oL=document.createElement('ol');

                  var str='';

                  for( var i=0;i<aLi.length;i++ ){

                      str += '<li></li>'

                  }

                  oL.innerHTML=str;

                  oDiv1.appendChild( oL );

                  document.title = oDiv1.offsetWidth +'-'+oL.offsetWidth;

                  oL.style.left = (oDiv1.offsetWidth - oL.offsetWidth)/2 +'px';

                  oL.style.bottom='0px';

                  var aLi1=oL.getElementsByTagName('li');

                  var timer=null;

                  var num=0;

                  function init(){

                      for(var i=0;i<aLi1.length;i++){

                          aLi1[i].className=''

                      }

                      aLi1[num].className='active'

                  }

                  init();

                  function slide(){

                      num++;

                      if(num>=aLi.length) {

                            num=0;

                            oUl.style.left = 0;

                      }

                      init();

                      hcMove(oUl,{

                          'left':-400*num

                      })

                  }

                  timer=setInterval(function(){

                      slide()

                  },1000)

                   oDiv1.onmouseover=function(){

                          clearInterval(timer)

                      }

                  oDiv1.onmouseout=function(){

                      timer=setInterval(function(){

                          slide()

                      },1000)

                  }

                 for(var i=0;i<aLi.length;i++){

                     aLi1[i].index=i;

                     aLi1[i].onclick=function(){

                          num = this.index;

                          init();

                          hcMove(oUl,{'left':-400*num})

                     }

                 }

             }

             function css(obj,attr) {

                 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]

             }

             /**完美 缓冲运动 带opacity**/

 function hcMove(obj,json,fn){

                 clearInterval( obj.timer );

                 obj.timer=setInterval(function(){

                     var iBtn=true;  

                     for(var attr in json){

                         var target=json[attr];

                         if( attr == 'opacity' ){

                             var iSpeed = (target-Math.round(css(obj,attr))*100)/6;

                         }else{

                             var iSpeed = (target-parseInt(css(obj,attr)))/6;

                         }

                          iSpeed = iSpeed > 0 ? Math.ceil(iSpeed)  : Math.floor(iSpeed);//速度取整,因为js中的小数是经过计算的,默认四舍五入,但是不够0.5的就不会动了

                          if( parseInt(css(obj,attr)) != target ){

                               iBtn=false;//如果有运动没到达目标点,iBtn为false

                               if( attr == 'opacity' ){

                                   var sNow=Math.round(css(obj,attr)*100) + iSpeed;

                                   //先做处理 再赋值

                                   if( sNow > target && iSpeed >0 || sNow < target && iSpeed <0 ){

                                       sNow = target

                                   }

                                   obj.style[attr] = sNow/100;

                                   obj.style.filter = 'alpha(opacity='+sNow+')';

                               }else{

                                   var sNow = parseInt(css(obj,attr)) + iSpeed;

                                   //先做处理 再赋值

                                   if( sNow > target && iSpeed >0 || sNow < target && iSpeed <0 ){

                                       sNow = target

                                   }

                                   obj.style[attr] = sNow +'px';

                               }

                          }

                         }

                         if(iBtn){ //如果运动全部完成,iBtn为true

                             clearInterval(obj.timer);

                             fn && fn()

                         }

                 },30)

             }

         </script>

     </head>

     <body>

          <div id="div1">

              <ul>

                 <li mars='1'><img src="3-images/1.jpg"><span    class="t">1</span></li>

                 <li mars='2'><img src="3-images/2.jpg"><span    class="t">2</span></li>

                 <li mars='3'><img src="3-images/3.jpg"><span    class="t">3</span></li>

                 <li mars='4'><img src="3-images/4.jpg"><span    class="t">4</span></li>

                 <li mars='5'><img src="3-images/5.jpg"><span    class="t">5</span></li>

             </ul>

          </div>

     </body>

 </html>

JS 仿淘宝幻灯片 非完整版 小案例的更多相关文章

  1. JS仿淘宝详情页菜单条智能定位效果

    类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...

  2. 原生js仿淘宝手机购买选项代码

    这是一款基于原生js实现仿淘宝手机信息购买选项效果源码,界面整体效果仿照淘宝购物选项设计,点击不同选项还可实时显示不同的价格计算结果,界面简洁大方.美观实用.可兼容目前最新的各类主流浏览器. 在线演示 ...

  3. JS仿淘宝星星评价

    //直接复制过去就可以了(你也可以吧css和js封装成css和js文件导入). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit ...

  4. JS仿淘宝左侧菜单

    http://www.webdm.cn/webcode/1c724a06-06f4-4c4f-931a-c683285fa700.html

  5. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  6. js 实现淘宝放大镜功能，可更改配置参数 带完整版解析代码[magnifier.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝放大镜效果 基本功能: 运 ...

  7. 基于Bootstrap仿淘宝分页控件实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  8. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  9. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

随机推荐

  1. [Swift通天遁地]二、表格表单-(6)创建美观的表格弹性下拉刷新效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. VB.NET学习体会

    注:本文写于2018年01月28日,首先发表于CSDN博客"aopstudio的博客"上 下学期要学习VB.NET程序设计课程,这几天在家开始自习.在自习的过程中发现VB.NET和 ...

  3. css选择器---继承,优先级,层叠

    CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  4. Codeforces 763A

    乍看之下感觉有点无从下手,,其实是个很简单的水题,陷入僵局 题目大意:给一棵树,树上每个节点都染色,问能否取下一个节点,使得剩余所有子树上的点的颜色都相同.能输出YES和取下的节点编号,否则输出NO. ...

  5. STMP服务器发送邮件，本地可以发送但是服务器一直发送不成功；

    在官网上查看到信息 考虑到部分云服务商封禁了其内网对外 25 端口的访问, xxxxx 端口号: 2525 xxxxx 端口号: 587 然后,我换了一下端口号就行了,浪费了我三个小时时间,贼尴尬:

  6. [ NOIP 2002 ] TG

    \(\\\) \(\#A\) 均分纸牌 有\(N\)堆纸牌,每堆有若干张,但纸牌总数必为\(N\)的倍数.可以在任一堆上取若干张纸牌,然后移动给其左右任意一侧的纸牌堆,求将所有的牌堆牌数都变为平均值最 ...

  7. TCP协议滑动窗口(一)——控制大批量数据传输速率

    窗口大小:TCP头中一个16位的域,表示当前可用接受缓冲区大小.在每个TCP对等段连接初始化时,告诉对方自己的窗口大小(不一定是满额,假如满额65201字节,可能暂时通告5840字节).若客户端接受数 ...

  8. JS高级——变量提升

    JS执行过程 1.首先是预解析:预解析过程最重要的是提升,在JavaScript代码在预解析阶段,会对以var声明的变量名,和function开头的语句块,进行提升操作 2.执行操作 全局中解析和执行 ...

  9. ABP生成错误：必须添加对程序集“netstandard”的引用

    当前使用ABP版本为:4.6.0 升级vs2017到15.4版本,升级framework到4.7版本 如果Core版本请升级到net core 2

  10. GCD & Operation queues & Thread

    One of the technologies for starting tasks asynchronously is Grand Central Dispatch (GCD). This tech ...