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. [ mysql优化一 ] explain解释select语句

    NOSQL  没有什么数据表, 只是一些变量,key_value  ,redis 支持的变量比较多.可以持久化文件到硬盘上. mysql 关系型数据库 ,表和表中间有各种id的关系. 缺点  高并发读 ...

  2. div套div 里面div有浮动 外面div自适应高度

    <div style="background-color:red;"> <div style="float:left;background-color: ...

  3. MPMoviePlayerController

    属性 说明 @property (nonatomic, copy) NSURL *contentURL 播放媒体URL,这个URL可以是本地路径,也可以是网络路径 @property (nonatom ...

  4. LeetCode #139. Word Break C#

    Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...

  5. Qt对ini文件的读写

    研究了以下Qt下ini文件的读写,不废话,上干货. 写入ini文件 WriteIni.cpp void WriteIni::writeSettings() { QSettings settings(& ...

  6. centos7内核升级

    默认centos7的内核版本是3.10,升级的原因是为了测试openvswitch的vlan技术,默认openvswitch的2.3版本是允许centos7默认内核3.10支持,下面是软件与内核版本对 ...

  7. js 的四种设计模式的优缺点

    原始模式: var Car = new Object; Car.color = "blue"; Car.door = 4; Car.showColor = function() { ...

  8. php 微信 自定义分享接口

    <?php class JSSDK { private $appId; private $appSecret; public function __construct($appId, $appS ...

  9. FireFox的配置文件的引用

    1.firefox的配置文件的实际路径:C:\Users\Administrator\AppData\Roaming\Mozilla\Firefox\Profiles\oviavula.default ...

  10. oracle之nomount、mount、open三种状态

    1.先来看下外国网站上的资料怎么说 Nomount – The database instance has been started (processes and memory structures ...