html代码布局,需要用到定位,不细说了

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

             font-size: 12px;

         }

         #Div {

             width: 100px;

             height: 300px;

             margin: 100px auto 0;

             position: relative;

             overflow: hidden;

         }

         #ptoBox {

             width: 100px;

             height: 400px;

             top: -100px;

             position: absolute;

         }

         #ptoS {

             list-style-type: none;

         }

         .base {

             width: 100px;

             height: 100px;

         }

         .base1 {

             background: red;

         }

         .base2 {

             background: blue;

         }

         .base3 {

             background: pink;

         }

         .base4 {

             background: red;

         }

         #btn1 {

             position: absolute;

             width: 30px;

             height: 20px;

             background: yellow;

             top: 0px;

             left: 35px;

             opacity: 0.5;

             filter: alpha(opacity=50);

             cursor: pointer;

         }

         #btn2 {

             position: absolute;

             width: 30px;

             height: 20px;

             background: yellow;

             bottom: 0px;

             right: 35px;

             opacity: 0.5;

             filter: alpha(opacity=50);

             cursor: pointer;

         }

     </style>

 </head>

 <body id="one">

     <div id="Div">

         <div id="ptoBox">

             <ul id="ptoS">

                 <li class="base base3">three</li>

                 <li class="base base1">one</li>

                 <li class="base base2">two</li>

                 <li class="base base3">three</li>

                 <li class="base base4">one</li>

                 <li class="base base2">two</li>

                 <li class="base base3">three</li>

                 <li class="base base4">one</li>

             </ul>

         </div>

         <span id="btn1"></span>

         <span id="btn2"></span>

 </body>

 </html>

javascript的代码记得放在 body里面,也就是html代码下方

这个是垂直滚动的焦点图,用的是onmousedown,鼠标按住图片会一直循环滚动

因为同时显示三张图片,所以需要一套图片需要备两组用来循坏

 <script type="text/javascript">

             function $(id) {

                 return typeof id === "string" ? document.getElementById(id) : id;

             }

             //自定义变量

             var Div = $("Div");

             var ptoBox = $("ptoBox");

             var ptoS = $("ptoS").getElementsByTagName("li");

             var btnTop = $("btn1");

             var btnBottom = $("btn2");

             var time = null;

             var index = 1;

             //alert("body");

             //鼠标点下绑定事件

             btnBottom.onmousedown = function() {

                 //调用自定义函数,并传参

                 rolling1(ptoBox, 'top', 1);

             }

             //鼠标松开绑定事件

             btnBottom.onmouseup = function() {

                 //清除定时器

                 clearInterval(timer);

                 //调用自定义函数,并传参

                 nowPto(ptoBox, 'top');

             }

             /*body.onmouseup = function() {

                 clearInterval(timer);

             }*/

             btnTop.onmousedown = function() {

                 rolling(ptoBox, 'top', -1);

             }

             btnTop.onmouseup = function() {

                 clearInterval(timer);

                 nowPto(ptoBox, 'top');

             }

             //判定当前显示图片

             function nowPto(obj, iStyle) {

                 //获得传入参数的属性的数值

                 var iTop = parseInt(getStyle(obj, iStyle));

                 //取余数

                 var value = iTop % 100;

                 //当余数大于-50则,显示当前整张图片

                 //当小于-50时,则跳过本张图片

                 if (value > -50) {

                     obj.style[iStyle] = iTop - value + 'px';

                 } else {

                     obj.style[iStyle] = iTop - (value + 100) + 'px';

                 }

             }

             //自减函数

             function rolling(obj, iStyle, speed) {

                 //设置定时器,每10毫秒执行一次

                 timer = setInterval(function() {

                     //获取当前ptoBox的top值

                     var iValue = parseInt(getStyle(obj, iStyle));

                     //当top值小于-500,则当前的top值变成-200

                     if (iValue <= -500) {

                         obj.style[iStyle] = -200 + 'px';

                     } else {

                         //否则,减少1像素

                         obj.style[iStyle] = iValue + speed + 'px';

                     }

                 }, 10);

             }

             //自增函数

             function rolling1(obj, iStyle, speed) {

                 //定时器

                 timer = setInterval(function() {

                     //获取当前ptoBox的top值

                     var iValue = parseInt(getStyle(obj, iStyle));

                     //当top值大于0,则当前的top值变成0

                     if (iValue >= 0) {

                         obj.style[iStyle] = -300 + 'px';

                     } else {

                         //否则,增加1像素

                         obj.style[iStyle] = iValue + speed + 'px';

                     }

                 }, 10);

             }

             function start() {

                 btnBottom.onmousedown();

             }

             function stop() {

                 clearInterval(timer);

             }

             //鼠标进入,则清除定时器

             Div.onmouseenter = stop;

             //鼠标离开,则开始执行循环

             Div.onmouseleave = start;

             start();

             function getStyle(obj, attr) {

                 if (obj.currentStyle) {

                     //currentStyle获取样式的值，对应的是ie浏览器

                     return obj.currentStyle[attr];

                 } else {

                     //同理，对应的是其他浏览器

                     return getComputedStyle(obj, false)[attr];

                 }

             }

         </script>

     </div>

     <script src="changfunction.js"></script>

javascript焦点图之垂直滚动的更多相关文章

  1. javascript焦点图之缓冲滚动无缝切换

    在用于实现无缝切换四张图,所以设置了6个图片就是 4,0,1,2,3,4,0 <!DOCTYPE html> <html> <head> <meta char ...

  2. javascript焦点图自动缓冲滚动

    html中调用的js库,之前的随笔中有写,就不细说了,不明白的可以留言给我 <!DOCTYPE html> <html> <head> <meta chars ...

  3. javascript焦点图自动播放

    这次是完整版,网页点开就能自动播放 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  4. javascript焦点图（能够自己主动切换 ）

    /* 思路总结: 1.实现图片滚动的function.鼠标经时候获取当前li的index.设置ndex自己主动递增的函数.实现淡入淡出效果的函数 2.整个实现效果一传递index为主线 3.我的编写代 ...

  5. javascript焦点图(根据图片下方的小框自动播放)

    html和css就不详细说明了,也是简单布局,通过定位把跟随图片的小框,定位到图片下方 <!DOCTYPE html> <html> <head> <meta ...

  6. javascript焦点图左右按钮简单自动轮播

    这里把css和html合在一块写了,这块代码只是布局和样式不是重点 <!DOCTYPE html> <html> <head> <meta charset=& ...

  7. 使用 iscroll 实现焦点图无限循环

    现在大家应该都看到过焦点图轮播的效果,这个效果是什么样我就不截图了.昨天做练习,练习要求是使用iscroll实现焦点图的无限循环滚动,并且当手指触摸焦点图后,停止焦点图的循环滚动.第一次接触iscro ...

  8. 使用jQuery仿淘宝商城多格焦点图滚动切换效果

    1.效果及功能说明 图片滚动切换特效,高仿2012淘宝商城首页多格子焦点图切换,鼠标滑过焦点图片各个格子区域聚光灯效果展示 2.实现原理 在显示div的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞 ...

  9. JavaScript基础 -- 焦点图轮播(转载)

    首先将HTML结构搭建好: <div id="container"> <div id="list" style="left: -60 ...

随机推荐

  1. 数据库中Schema、Database、User、Table的关系[转]

    数据库的初学者往往会对关系型数据库模式(schema).数据库(database).表(table).用户(user)之间感到迷惘,总感觉他们的关系千丝万缕,但又不知道他们的联系和区别在哪里,对一些问 ...

  2. Angular React 和 Vue的比较

    Angular(1&2),React,Vue对比 一 数据流 数据绑定 Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面. 实现原理: $scope变量中 ...

  3. Chapter 17_1 弱引用table

    Lua采用了自动内存管理.所以不用担心新创建的对象需要的内存如何分配出来,也不用考虑对象不再被使用后怎样释放它们所占用的内存. Lua实现了一个增量标记-扫描收集器.它使用这两个数字来控制垃圾收集循环 ...

  4. ASP.NET使用ImageMap控件

    文章来自:http://www.baike369.com/content/?id=5773

  5. iOS 最新App提交上架流程及部分问题的解决方案2016.12.21，感谢原博主！！！

    内容摘自http://www.cocoachina.com/bbs/3g/read.php?tid=330302,原博特别详细,下面我对部分地方进行了修改,主要是对在打包验证和上传的时候遇到的问题进行 ...

  6. 无法创建链接服务器 "xxx" 的 OLE DB 访问接口 "OraOLEDB.Oracle" 的实例。 (Microsoft SQL Server，错误: 7302)

    出现这个错误,有两个最常见的两个原因 1.注册表 <1>按下WIN+R,打开“运行”窗口,输入“regedit”,回车 <2>在打开的注册表编辑器的左侧按如下路径依次展开: H ...

  7. es6--(二)变量的解构赋值

    1.数组的解构赋值 //数组解析 let [a,b,c] = [1,2,3]; //a=1;b=2;c=3 //嵌套数组 let [a,[b,c]] = [1,[2,3]];//a=1;b=2;c=3 ...

  8. swift 图像的压缩上传

    func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [Str ...

  9. vs2008编译FileZilla服务端源码

    vs2008编译FileZilla服务端源码 FileZilla服务端下载地址:https://download.filezilla-project.org/server/.FileZilla服务端源 ...

  10. 转: Executor类

    Executor框架是指java 5中引入的一系列并发库中与executor相关的一些功能类,其中包括线程池,Executor,Executors,ExecutorService,Completion ...