要实现如下图的效果

点击可以选择图片；不点击的时候自动轮播；并且点击完后再次自动轮播。

思路：如同在房子里透过窗子看路过的火车一样，窗子是不动的，但火车是陆续经过窗子的，所以透过窗子可以看到依次看完所有的火车。

1. 让将图片排成一列“火车”：ul中li（li中放着轮播图片）漂浮起来后，就排列成一溜了

2. 要有一个“窗口”，把“火车”放到“窗口”里：设置div的固定长度，使它宽度等于ul中一个li的宽度

3. 让“火车”动起来：利用margin-left样式可以选择要在“窗口”显示的图片。

代码如下：

<!DOCTYPE html>

<html>

<head>

<title>图片轮播效果</title>

<link rel="stylesheet" type="text/css" href="./css/reset.css" />

<style>

.container{

    width:100%;

    margin:0 auto;

}

/* 轮播容器 */

.img_wrap{

    width:440px;

    height:440px;

    margin:0 auto;

    position:relative;

}

.img_wrap ul li{

    float:left;

}

/* 轮播索引 */

.img_wrap .img_index{

    position:absolute;

    right:20px;

    bottom:20px;

}

.img_wrap .img_index ul li{

    width:16px;

    height:16px;

    background:gray;

    border-radius:8px;

    cursor:pointer;

    margin-right:4px;

}

.img_wrap .img_index ul li.on{

    background:#fd4b4b;

}

/* 轮播图片容器 */

.img_wrap .img_lunbo{

    width:440px;

    height:440px;

    overflow:hidden;

}

</style>

<script>

window.onload = function(){

    var currentIndex = 1; //当前索引

    var time = 2000; //时间间隔

    var length = 5; //几个索引

    var timer = null; //定时器

    indexBindClick();

    //自动轮播

    autoPlay();

    //给索引绑定事件

    function indexBindClick(){

        var lis = document.getElementsByClassName("img_index")[0].getElementsByTagName("li");

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

            lis[i].onclick = function(){

                //换图片显示

                currentIndex = getIndex(this);

                clearInterval(timer);

                showImg();

                autoPlay();

            };

        }

    }

    function autoPlay(){

        timer = setInterval(function(){

            showImg();

            currentIndex++;

        },time);

    }

    //显示图片

    function showImg(){

        if(currentIndex >= 5){

            currentIndex = 0;

        }

        //改变小图标样式

        var lis = document.getElementsByClassName("img_index")[0].getElementsByTagName("li");

        for(var j=0; j<lis.length; j++){

            lis[j].className = "";

        }

        lis[currentIndex].className = "on";

        //显示当前图片

        var ul = document.getElementsByClassName("img_lunbo")[0].getElementsByTagName("ul")[0];

        var li_width = ul.getElementsByTagName("li")[0].scrollWidth;

        var marginLeft = -currentIndex * li_width;

        ul.style.marginLeft = marginLeft + "px";

    }

    /* 获取对象在父节点中索引 */

    function getIndex(obj){

        var children = obj.parentNode.children;

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

            if(children[i] == obj){

                return i;

            }

        }

    }

};

</script>

</head>

<body>

<div class="container">

<div class="img_wrap">

    <div class="img_index">

        <ul>

            <li class="on"></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

    <div class="img_lunbo">

        <ul>

            <li><img src="./images/lunbo1.jpg" /></li>

            <li><img src="./images/lunbo2.jpg" /></li>

            <li><img src="./images/lunbo3.jpg" /></li>

            <li><img src="./images/lunbo4.jpg" /></li>

            <li><img src="./images/lunbo5.jpg" /></li>

        </ul>

    </div>

</div>

</div>

</body>

</html>

reset.css初始化代码和图片要自己准备。

html轮播效果的实现的更多相关文章

  1. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  2. Android使用ViewPager实现左右循环滑动及轮播效果

    边界的时候会看到一个不能翻页的动画,可能影响用户体验.此外,某些区域性的ViewPager(例如展示广告或者公告之类的ViewPager),可能需要自动轮播的效果,即用户在不用滑动的情况下就能够看到其 ...

  3. JQuery实现图片轮播效果源码

    ======================整体结构======================== <div class="banner"> <ul class ...

  4. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

  5. 调用MyFocus库，简单实现二十几种轮播效果

    一.首先点击这里下载myFocus库文件,标准文件库就行了,很小仅仅1.4M. myFocus库有以下的好处: a . 文件小巧却高效强大,能够实现二十几种轮播的效果. b . 极其简单的使用,只需要 ...

  6. viewPager+Handler+Timer简单实现广告轮播效果

    基本思想是在Avtivity中放一个ViewPager,然后通过监听去实现联动效果,代码理由详细的解释,我就不说了. MainActivity.java package com.example.adm ...

  7. Bootstrap插件之Carousel轮播效果（2015年-05月-21日）

    <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...

  8. 常见的仿Flash图片轮播效果

    现在基本在很多网站上都能看到轮播效果,虽然有点烂大街的赶脚,但是这个效果确实很好看,很时尚,今天分享下代码相对较少的轮播框架,望采纳 . ①向左滑动: 思路: 将几个图片用分别用几个 li 包住,并且 ...

  9. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

随机推荐

  1. ffmpeg 中添加264支持

    转自:http://blog.sina.com.cn/s/blog_513f4e8401011yuq.html ffmpeg 中带有264的解码,没有编码,需要添加x264: 参考百度上的“windo ...

  2. 简单修改hosts文件加快打开网页速度

    这个电脑小技巧的帖子菲菲博客分享如何通过简单一招利用修改系统的hosts文件来实现有效加快浏览器打开网页的速度.尤其是网络繁忙时DNS服务器负担加重的时候效果特别明显,有兴趣就和菲菲一起来学习一下吧, ...

  3. js:语言精髓笔记6----作用域

    js基础语法:由语句.表达式和变量构成:   语句是主要表达方式:单语句->复合语句(代码块)->程序片段(函数):js中没有单元和程序的概念: 作用域: 语法作用域与变量作用域的区别:前 ...

  4. ASP.NET MVC 模型和数据对象映射实践

    在使用 MVC 开发项目的过程中遇到了个问题,就是模型和数据实体之间的如何快捷的转换?是不是可以像 Entity Framework 的那样 EntityTypeConfiguration,或者只需要 ...

  5. .net4.5 await async 简化之后的异步编程模型

    步骤核心: 方法签名包含一个  async 修饰符. 按照约定,异步方法的名称以“Async”后缀结尾. 返回类型为以下之一: Task<TResult> 如果您的方法有操作数为 TRes ...

  6. HDU4057 Rescue the Rabbit（AC自动机+状压DP）

    题目大概是给几个DNA片段以及它们各自的权值,如果一个DNA包含某个片段那么它的价值就加上这个片段的权值,同时包含多个相同DNA片段也只加一次,问长度l的DNA可能的最大价值. 与HDU2825大同小 ...

  7. POJ2570 Fiber Network（Floyd）

    d[i][j]表示从i点到j点可以全程提供光纤的公司的集合,集合用26位的二进制压缩. 那么状态转移方程就是dk[i][j]|=dk-1[i][k]&dk-1[k][j]. #include& ...

  8. Cyclic Nacklace[HDU3746]

    Cyclic Nacklace Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  9. BZOJ4134 : ljw和lzr的hack比赛

    设$f[x]$为$x$子树里的子游戏的sg值,$h[x]$为$x$所有儿子节点$f[x]$的异或和,则: $f[x]=mex(y到x路径上所有点的h的异或和\ xor\ y到x路径上所有点的f的异或和 ...

  10. BZOJ 1001 & SPFA

    1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec  Memory Limit: 162 MB Description 现在小朋友们最喜欢的"喜羊羊与灰太狼 ...