js-03课 -04 两组图片的点击或滑动

1.

2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         ul { padding:0; margin:0; }
         li { list-style:none; }
         body { background:#333; }
        .box { width:400px; height:500px; position:relative; background:url(img/2.png) no-repeat center #fff; float:left; margin-right:60px; }
        .box img { width:400px; height:500px; }
        .box ul { width:40px; position:absolute; top:0; right:-50px; }
        .box li { width:40px; height:40px; margin-bottom:4px; background:#666; }
        .box .active { background:#FC3; }
        .box span { top:0; }
        .box p { bottom:0; margin:0; }
        .box p,.box span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
    </style>
<body>
<div id="pic1" class="box">
    <img src=""/>
    <span>数量正在加载中……</span>
    <p>文字说明正在加载中……</p>
    <ul></ul>
</div>

<div id="pic2" class="box">
    <img src=""/>
    <span>数量正在加载中……</span>
    <p>文字说明正在加载中……</p>
    <ul></ul>
</div>
<script>
    /*
     重用代码:
     1、尽量保证 HTML 代码结构一致,可以通过父级选取子元素
     2、把核心主程序实现,用函数包起来
     3、把每组里不同的值找出来,通过传参实现
     4. 通用方法的形参名最好不要与调用的实参名一致, 严重注意!有时候会出现莫名的错误还发现不了!!!
     */

    window.onload = function (){
        var arrImg1 = [ ‘img/1.png‘, ‘img/2.png‘, ‘img/3.png‘, ‘img/4.png‘ ];
        var arrtext1 = [ ‘小宠物‘, ‘图片二‘, ‘图片三‘, ‘面具‘ ];
        fnTab( ‘pic1‘, arrImg1, arrtext1, ‘onclick‘ );
        fnTab( ‘pic2‘, arrImg1, arrtext1, ‘onmouseover‘ );
    };

    //注意 oImg等元素是从oDiv中找的,不是从document中找的!!!
    function fnTab( id, arrUrl, arrText, evt ){
        var oDiv = document.getElementById(id);
        var oImg = oDiv.getElementsByTagName(‘img‘)[0];
        var oSpan = oDiv.getElementsByTagName(‘span‘)[0];
        var oP = oDiv.getElementsByTagName(‘p‘)[0];
        var oUl = oDiv.getElementsByTagName(‘ul‘)[0];
        var aLi = oUl.getElementsByTagName(‘li‘);
        var num = 0;

        createLi(oUl); // 根据图片数量在ul下创建对应数量的li装载图片用
        init(num); // 通过图片的下标改变图片的显示
        listenEvent();

        //创建子节点 li
        function createLi(parentObj) {
            var liHTML = ‘‘;
            for( var i=0; i<arrUrl.length; i++ ){
                liHTML += ‘<li></li>‘;
            }
            parentObj.innerHTML = liHTML;
        }
        // 初始化
        function init(index){
            oImg.src = arrUrl[index];
            oSpan.innerHTML = 1+index+‘ / ‘+arrUrl.length;
            oP.innerHTML = arrText[index];
            for( var i=0; i<aLi.length; i++ ){
                aLi[i].className = ‘‘;
            }
            aLi[index].className = ‘active‘;
        }
        //监听事件
        function listenEvent() {
            for( var i=0; i < aLi.length; i++ ){
                aLi[i].index = i;            // 索引值
                aLi[i][evt] = function (){
                    init(this.index); // num = this.index; init(num);
                };
            }
        }
    }
</script>
</body>
</html>
时间: 2024-11-05 17:29:03

js-03课 -04 两组图片的点击或滑动的相关文章

js -03课 -03 js中的真假判断

真假的问题:数据类型-数字(NaN).字符串.布尔.函数.对象(elem.[].{}.null).未定义 真:非0的数字.非空字符串.true.函数.能找到的元素.[].{} 假:0.NaN.空字符串''.false.不能找到的元素.null.未定义

js - 03课-01 隔行变色, 鼠标移入移出变色

1. 效果图 2. 源码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> li { height:24px; margin-bottom:3px; list-style:none; } </style> </head> <body

JS函数传参实例应用:多组图片切换实例

之前的博客有一个图片切换的例子,实现了简单轮播图的点击切换的案例,今天就说一下多组轮播切换,前提是布局差不多,通过函数传参的形式减少代码应用,但是同时还能实现效果.先来看一下之前那个例子的实现图片: 那么今天我来实现两组这样的图片切换,通过传参数来实现,这样分可以减少js代码: <div class="box" id="pic1"> <img src="" /> <span>数量正在加载中--</span

js多组图片无缝滚动

原文:js多组图片无缝滚动 源代码下载地址:http://www.zuidaima.com/share/1550463717608448.htm

做了一个js的拉动遮罩层,两个图片分别显示的效果

想做成车修好了和没修好的对比,所以需要两个图片.需要用到的知识点, 1.定位 2.mouse 的事件(代码中体现) 3.鼠标指针的移动距离算法 4.css中,cursor的应用 好了,废话不多说 ,直接上代码 网站需要的素材,接着往下看下载 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 &l

代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到合意的,所以根据网上找的一段代码,进行了较大改动. 需引用 zepto 或 jquery. 我这个是应用于手机上的,两列瀑布流,图片高度未知——等图片的onloaded事件触发后,才对容器进行计算和定位. 大容器是 $("#imgList"),容器格子是$(".pin"

jquery多组图片层次切换的焦点图

效果: 一.知识点: JS闭包.作用域: jQuery.transit插件使用: 图片旋转动画及中心点的设置: 二维数组的使用: 定时器setTimeout和setInterval的使用: 按钮连续点击问题的解决方案. jQuery.transit插件下载地址.参考文档: http://www.htmleaf.com/jQuery/Layout-Interface/201501281289.html http://demo.newhtml.net/jQuery%20Transit%20-%20C

【华为OJ】201301 JAVA 题目0-1级 将数组分为相等的两组

描述:  编写一个函数,传入一个int型数组,返回该数组能否分成两组,使得两组中各元素加起来的和相等,并且,所有5的倍数必须在其中一个组中,所有3的倍数在另一个组中(不包括5的倍数),能满足以上条件,返回true:不满足时返回false. 知识点: 语言基础,字符串,循环,函数,指针,枚举,位运算,结构体,联合体,文件操作,递归    题目来源: 内部整理  练习阶段: 初级  运行时间限制: 10Sec 内存限制: 128MByte 输入: 输入输入的数据个数 输入一个int型数组 输出: 返

js效果笔记:怎样实现图片的懒加载以及jquery.lazyload.js的使用

在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟加载插件jquery.lazyload.js以及怎样实现一个延迟加载的插件. 一:jquery.lazyload.js插件 lazyload是jQuery写的延迟加载插件,在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 实现原理 首