要实现如下图的效果

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

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

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. C语言中，宏和全局变量的区别是什么？

    全局变量 是可以在程序中任何地方使用 而且是可以修改的 宏定义也可以在任何地方使用 但是不能在之后修改 数据类型没有限制的 宏的例子:#define 宏名 宏体 #define PI 3.141592 ...

  2. 4KB对齐

    4KB是固态硬盘的读写基本block size的大小也就是说读写的基本单位是4KB,哪怕1B的内容读写实际操作也是操作了4KB的块实际操作是以块为单位的 假设我的读写起始点刚好定在两个4KB大小的物理 ...

  3. js:数据结构笔记4--队列

    队列是一种特殊的列表,数据结构为FIFO: 定义: function Queue() { this.dataStore = []; this.enqueue = enqueue; this.deque ...

  4. 错误详情：CL : fatal error C1033: cannot open program database ''

    在网上找了好多方法都不行,最后用下面方法解决了. 修改VS目录下的\VC\bin\cl.exe 的兼容性设置,取消兼容模式和以管理员身份运行即可.

  5. python+pygame游戏开发之使用Py2exe打包游戏

    最近在用python+pygame 开发游戏,写完以后在分享给朋友玩的时候遇到了很大的问题,只有搭建了环境才能运行python脚本. 这会吓退99%以上的人……所以把我们的游戏打包(注意是打包而不是编 ...

  6. BZOJ3322 : [Scoi2013]摩托车交易

    求出最大生成树,则两点间的最大容量为树上两点间的边权的最小值. 设$lim[i]$表示第$i$个订单的城市允许携带的黄金上限,则 $lim[i]=\min(lim[i+1],a[i]和a[i+1]点间 ...

  7. BZOJ1508 : [NOI2003]Game

    a[i][j]:i移动一根变成j是否可能 b[i][j]:i增加一根变成j是否可能 枚举在一个数字中移动的情况以及在两个数字中移动的情况 #include<cstdio> #include ...

  8. Insert Function before and after main function

    Source code: 1: #include<stdio.h> 2: void myStartupFun (void) __attribute__ ((constructor)); 3 ...

  9. NodeJS中form上传附件中针对表单的multiple attribute出现的问题总结

    在express中上传附件需要在表单中添加enctype="multipart/form-data"属性,并且在新的4.0.1版本中需要手动添加中间件app.use(connect ...

  10. Hashtable和Dictionary<T,K>的使用

    由于Hashtable内部自带有排序(根据Key的HashCode来进行的),因此有时在使用Hashtable时就会造成数据顺序不可控的情况,有两种办法可以解决, 测试代码: Dictionary&l ...