要实现如下图的效果

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

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

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. JSP Servlet 路径解析 路径设置

    转自:http://ethen.iteye.com/blog/800415 在用JSP和Servlet编写Web应用时,经常遇到的问题就是找不到.do路径,或者.do路径不能解析,其实归根到底就是Se ...

  2. java acm输入输出

    转自:http://wei.jian.fei.blog.163.com/blog/static/97300140201081425159217/ 下面说一下ACM-ICPC队员初用Java编程所遇到的 ...

  3. gui_mainfcn(gui_State, varargin{:});是什么意思

    gui_mainfcn函数执行过程中,要调用各个控件的CreateFcn函数(也就是控件创建的函数)来创建控件.如果对控件的一些属性设置不对,则控件就没法创建,gui_mainfcn函数就不能正确执行 ...

  4. 最短路(Bellman_Ford) POJ 3259 Wormholes

    题目传送门 /* 题意:一张有双方向连通和单方向连通的图,单方向的是负权值,问是否能回到过去(权值和为负) Bellman_Ford:循环n-1次松弛操作,再判断是否存在负权回路(因为如果有会一直减下 ...

  5. LightOJ1316 A Wedding Party（状压DP）

    这题事实上只需要关心15个商店和一个起点一个终点,预处理出这几个点之间的最短距离.Floyd会超时,用Dijkstra即可. 然后就是dp[u][S]表示已经经过商店集合S且当前在第u个商店所花的最少 ...

  6. Ubuntu 14.04 MySQL同步

    主服务器:192.168.2.212 从服务器:192.168.2.211   主服务器(192.168.2.212): 先到/etc/mysql/my.cnf下 将 bind-address 127 ...

  7. POJ 2342 (树形DP)

    题目链接: http://poj.org/problem?id=2342 题目大意:直属上司和下属出席聚会.下属的上司出现了,下属就不能参加,反之下属参加.注意上司只是指直属的上司.每个人出席的人都有 ...

  8. POJ 1177 Picture(求周长并)

    题目链接 看的HH的题解..周长有两部分组成,横着和竖着的,横着通过,sum[1] - last来计算,竖着的通过标记,记录有多少段. #include <cstdio> #include ...

  9. COJ 拯救瑞恩

    试题描述 在n行n列的字符方阵中I表示“我”最初所在位置,R是大兵瑞恩所在位置.4<n<11.“我”从当前位置可以向上.或下.或左.或右移动一格,只要新点无障碍且未出界.标有“.”的位置可 ...

  10. git 用Gitk /usr/bin/which: no wish

    /usr/bin/which: no wish 安装yum -y install tcl 和yum -y install tk 显示所有的分支 $gitk --all 显示所有的分支 $gitk -- ...