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. MVC之联动学习

    一,数据库表设计 CREATE TABLE [dbo].[HY_Province]( [id] [INT] NOT NULL, [province] [NVARCHAR]() NOT NULL, CO ...

  2. do{...}while(0)的意义和用法(转载)

    linux内核和其他一些开源的代码中,经常会遇到这样的代码: do{ ... }while(0) 这样的代码一看就不是一个循环,do..while表面上在这里一点意义都没有,那么为什么要这么用呢? 实 ...

  3. C# 语言规范_版本5.0 (第7章 表达式)

    1. 表达式 表达式是一个运算符和操作数的序列.本章定义语法.操作数和运算符的计算顺序以及表达式的含义. 1.1 表达式的分类 一个表达式可归类为下列类别之一: 值.每个值都有关联的类型. 变量.每个 ...

  4. JDOM与DOM主要有两方面不同

    我这丝毫没有吐槽的意思哟,只是想说作为一个合格的程序员大家最起码需要做到思维严谨这点,在有能力的情况下对用户体验能提点建议最好.自己写的代码一定要经过严格测试再交付,不要指望测试人员帮你测试再去修改, ...

  5. drupal7 开发自定义上传、下载模块的上传功能

    关键点有两个:1.在页面上显示出上传的控件,2.代码实现文件上传到服务器的功能 一.显示控件: 先来看关键点1: 实现页面显示出上传控件, 关键代码: $form['my_file_field'] = ...

  6. Oracle Day 08 游标与例外的总结

    1.游标的使用(cursor) 基本格式: 定义游标:  cursor 游标名 is select语句; 打开游标:  open 游标名; loop(循环) fetch ... into ...;   ...

  7. JavaScript 作用域 匿名函数 模仿块级作用域（私有作用域）

    作用域 对于有块级作用域的语言来说,for语句中定义并初始化的变量i在循环外是无法访问的. 而javascript没有块级作用域,for语句中定义的变量i在循环结束后,依旧会存在于循环外部的执行环境( ...

  8. js 对象类型 （对象的属性 ，对象的方法） this 关键字

    $(function () { var observation = { init: function () { this.render();//断点:this bind :function() che ...

  9. 利用commons-io.jar包中FileUtils和IOUtils工具类操作流及文件

    1.String IOUtils.toString(InputStream input),传入输入流对象,返回字符串,有多重重载,可按需要传参 用例: @Test public void showIn ...

  10. Maxwell顺态求解器电磁力分析

    文源:技术邻 问题描述:求解一段通有正弦交流电的直导线在某一稳态磁场中的受力情况,并简单验证仿真结果. 模型介绍: 如上几何模型中10mm边长立方体代表永磁体,材料属性为材料库中的NdFe35,修改磁 ...