要实现如下图的效果

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

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

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. html5 canvas 标签

    <canvas id="board" width="500" height="400"></canvas> < ...

  2. Sql Server REPLACE函数的使用

    REPLACE用第三个表达式替换第一个字符串表达式中出现的所有第二个给定字符串表达式. 语法REPLACE ( ''string_replace1'' , ''string_replace2'' , ...

  3. 【maven 报错】maven项目update之后报错One or more constraints have not been satisfied.

    在右键项目Update Project之后报错:One or more constraints have not been satisfied.Spring 4.1 requires Java 1.6 ...

  4. Marvelous Mazes

    F - Marvelous Mazes Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submi ...

  5. DFS/BFS Codeforces Round #301 (Div. 2) C. Ice Cave

    题目传送门 /* 题意:告诉起点终点,踩一次, '.'变成'X',再踩一次,冰块破碎,问是否能使终点冰破碎 DFS:如题解所说,分三种情况:1. 如果两点重合,只要往外走一步再走回来就行了:2. 若两 ...

  6. Log4net源码View之Logger解析

    1.简介 Logger是Log4net的三大核心载体之一,搞清楚它的意义很重大.另外两个分别是Appender和Layout.其对应关系为一个Logger对应多个Appender,一个Appender ...

  7. 斐波那契数[XDU1049]

    Problem 1049 - 斐波那契数 Time Limit: 1000MS   Memory Limit: 65536KB   Difficulty: Total Submit: 1673  Ac ...

  8. 使用CSS 3创建不规则图形 文字围绕

    前言 CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中.本篇文章的目的是为大家开启它的冰山一角.我希望这篇文章能让你对不规则图形有一个初步的了解. 现在,我们已经可以使用CSS 3 常 ...

  9. 【BZOJ】1834: [ZJOI2010]network 网络扩容（最大流+费用流）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1834 我又思考人生了T_T,nd的数组开小了,一直wa,调了一个小时才发现啊!!!!!我一直以为我的 ...

  10. POJ 1724 ROADS(二维SPFA）

    题目链接 用STL实现超时了,用普通队列500+,看到spfa,反应太迟钝了. #include <cstring> #include <cstdio> #include &l ...