要实现如下图的效果

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

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

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. x264测试代码

    建立一个工程,将头文件,库文件加载到工程,测试代码如下:#include <iostream>#include <string>#include "stdint.h& ...

  2. Effective C++笔记：设计与声明

    条款18:让接口容易被正确使用,不易被误用 1,好的接口很容易被正确使用,不容易被误用.你应该在你的所有接口中努力达成这些性质. 2,“促进正使用”的办法包括接口的一致性,以及与内置类型的行为兼容. ...

  3. Excel文件导入SQL Server数据库表

    --office 2003--如果接受数据导入的表已经存在insert into DemoTable select * from OPENROWSET('MICROSOFT.JET.OLEDB.4.0 ...

  4. GC日志介绍

    每一种收集器的日志形式都是由它们自身的实现所决定的,换而言之,每个收集器的日志格式都可以不一样.但虚拟机设计者为了方便用户阅读,将各个收集器的日志都维持一定的共性,例如以下两段典型的GC日志: 33. ...

  5. js:数据结构笔记6--字典

    Dictionary类的基础是数组不是对象:字典的主要用途是通过键取值: 基本定义: function Dictionary() { this.dataStore = new Array(); thi ...

  6. Xamarin.Android提示aapt退出，代码为255

    Xamarin.Android提示aapt退出,代码为255 错误信息:”aapt.exe”已退出,代码为255.出现这种问题,通常是由于该项目所使用Android SDK不完整.通过SDK Mana ...

  7. 在Unity3D 4中关联Visual Studio 2012来编写C#

    Unity3D自带的MonoDevelop编辑器无论是js还是c#代码提示都很差,很诡异的就是变量名和方法名有的时候提示有的时候不提示.不过用Visual Studio代替MonoDevelop这个问 ...

  8. BZOJ3939 : [Usaco2015 Feb]Cow Hopscotch

    设f[i][j]表示到(i,j)的方案数,则有 $f[i][j]=\sum f[x][y](x<i,y<j,a[x][y]!=a[i][j])=\sum f[x][y](x<i,y& ...

  9. HDU 1180 (BFS搜索)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1180 题目大意:迷宫中有一堆楼梯,楼梯横竖变化.这些楼梯在奇数时间会变成相反状态,通过楼梯会顺便到达 ...

  10. TYVJ P1083 分糖果 Label：bfs

    描述 童年的我们,将和朋友分享美好的事物作为自己的快乐.这天,C小朋友得到了Plenty of candies,将要把这些糖果分给要好的朋友们.已知糖果从一个人传给另一个人需要1 秒的时间,同一个小朋 ...