图片轮播是网页上一个比较常见的功能，下面我们来实现他吧

原理很简单：

1：固定的区域，所有的图片重叠，一次只能显示一张图片

2：通过改变图片的zIndex属性改变显示的图片，就可以达到切换的效果了

<!-- cycle_pic.html -->

<!DOCTYPE html>

<html>

<head>

    <title>cycle_pic</title>

    <meta charset="utf-8">

    <meta content="text/html" http-equiv="Content-Type">

    <style type="text/css">

        #slideshow_wrapper {

            POSITION: relative;

            PADDING-BOTTOM: 0px;

            BACKGROUND-COLOR: #121212;

            PADDING-LEFT: 0px;

            WIDTH: 650px;

            PADDING-RIGHT: 0px;

            HEIGHT: 400px;

            OVERFLOW: hidden;

            PADDING-TOP: 0px

        }

        #slideshow_footbar {

            Z-INDEX: 5;

            POSITION: absolute;

            FILTER: alpha(opacity=50);

            WIDTH: 100%;

            BOTTOM: 0px;

            HEIGHT: 30px;

            background-color: black;

            opacity:0.5;

        }

        #slideshow_photo {

            POSITION: absolute;

            WIDTH: 100%;

            HEIGHT: 100%;

            CURSOR: pointer

        }

        #slideshow_photo A {

            Z-INDEX: 1;

            BORDER-BOTTOM: 0px;

            POSITION: absolute;

            BORDER-LEFT: 0px;

            MARGIN: 0px;

            DISPLAY: block;

            BORDER-TOP: 0px;

            TOP: 0px;

            BORDER-RIGHT: 0px;

            LEFT: 0px

        }

        #slideshow_footbar .slideshow-bt {

            BACKGROUND-COLOR: #d2d3d4;

            MARGIN: 10px 10px 0px 0px;

            WIDTH: 10px;

            DISPLAY: inline;

            FLOAT: right;

            HEIGHT: 10px;

            FONT-SIZE: 0px

        }

        #slideshow_footbar .bt-on {

            BACKGROUND-COLOR: red;

        }

</style>

<script type="text/javascript" charset="utf-8">

    var curIndex=1;//初始换显示第一张

    function slideTo (index) {

        var index = parseInt(index);

        var pic = document.getElementById("slideshow_photo").childNodes;

        for(var i=0;i<pic.length;i++){//改变zIndex属性

            if(pic[i].attributes && pic[i].attributes['index'] && parseInt(pic[i].attributes['index'].value)==index){

                pic[i].style.zIndex=2;

                curIndex=index;

            }

            else if(pic[i].attributes && pic[i].attributes['index']) {

                pic[i].style.zIndex=1;

            }

        }

        var bts = document.getElementsByClassName("slideshow-bt");

        for(var i=0;i<bts.length;i++){//改变显示的效果

            if(parseInt(bts[i].attributes['index'].value)==index){

                bts[i].className="slideshow-bt bt-on";

            }

            else bts[i].className = "slideshow-bt";

        }

    }

    window.onload = function  () {    //为按钮初始化onclick事件

        var bts = document.getElementsByClassName("slideshow-bt");

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

            bts[i].onclick = function  () {

                slideTo(this.attributes['index'].value);

            }

        }

    }

    setInterval(function  () {//循环切换

        if(curIndex+1>5) curIndex=0;

        slideTo(curIndex+1);

    },2000);

</script>

</head>

<body>

    <div id="slideshow_wrapper">

        <div id="slideshow_photo">

            <a href="#" title="" index="1"><img src="./num/1.jpg" width="650px;" alt="1" border="0px;"></a>

            <a href="#" title="" index="2"><img src="./num/2.jpg" width="650px;" alt="2" border="0px;"></a>

            <a href="#" title="" index="3"><img src="./num/3.jpg" width="650px;" alt="3" border="0px;"></a>

            <a href="#" title="" index="4"><img src="./num/4.jpg" width="650px;" alt="4" border="0px;"></a>

            <a href="#" title="" index="5"><img src="./num/5.jpg" width="650px;" alt="5" border="0px;"></a>

        </div>

        <div id="slideshow_footbar">

            <div class="slideshow-bt" index="5"></div>

            <div class="slideshow-bt" index="4"></div>

            <div class="slideshow-bt" index="3"></div>

            <div class="slideshow-bt" index="2"></div>

            <div class="slideshow-bt" index="1"></div>

        </div>

    </div>

</body>

</html>

javascript 实现图片轮播和点击切换功能的更多相关文章

  1. jqs实现图片轮播--通过点击按钮来实现

    <!-- 布局思路:一个大的div,中有一个ul.和一个箭头的div css样似描述: 整个盒子距离顶部100px,又水平居中 盒子的宽高为图片的实际宽高 由于每次都是看见了一张图片:有两种方式 ...

  2. JavaScript实现图片轮播组件

    效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供 ...

  3. 原生Javascript实现图片轮播效果

    首先引入js运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ ...

  4. HTML——JAVASCRIPT练习题——图片轮播

    方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  5. Bootstrap3.0学习第二十六轮(JavaScript插件——图片轮播)

    详情请查看http://aehyok.com/Blog/Detail/32.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

  6. JavaScript实现图片轮播图

    <!DOCTYPE html><html> <head> <script > var time; function init(){ //设置定时操作 t ...

  7. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  8. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  9. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

随机推荐

  1. BZOJ1458 士兵占领 【带上下界网络流】

    题目链接 BZOJ1458 题解 对行列分别建边,拆点,设置流量下限 然后\(S\)向行连边\(inf\),列向\(T\)连边\(inf\),行列之间如果没有障碍,就连边\(1\) 然后跑最小可行流即 ...

  2. BZOJ4144 [AMPPZ2014]Petrol 【最短路 + 最小生成树】

    题目链接 BZOJ4144 题解 这题好妙啊,,orz 假设我们在一个非加油站点,那么我们一定是从加油站过来的,我们剩余的油至少要减去这段距离 如果我们在一个非加油站点,如果我们到达不了任意加油站点, ...

  3. BZOJ1597 土地购买 【dp + 斜率优化】

    1597: [Usaco2008 Mar]土地购买 Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 5466  Solved: 2035 [Submi ...

  4. A great tutorial with Jupyter notebook for ML beginners

    An end to end implementation of a Machine Learning pipeline SPANDAN MADAN Visual Computing Group, Ha ...

  5. STL之三：deque用法详解

    转载于:http://blog.csdn.net/longshengguoji/article/details/8519812 deque函数: deque容器为一个给定类型的元素进行线性处理,像向量 ...

  6. qt4+vs2010 环境搭建

    1.安装开发所需的软件: vs2010(包括VS2010SP1dvd1,Visual_Assist_X_10.9.2062.0_Crack等) QT: qt-win-opensource-4.8.5- ...

  7. 洛谷2944 [USACO09MAR]地震损失2Earthquake Damage 2

    https://www.luogu.org/problem/show?pid=2944 题目描述 Wisconsin has had an earthquake that has struck Far ...

  8. Python随机选择Maya场景元素

    之前在公司参与的一个与国外合作的项目中,有一景需要动态.随机地选取场景中的一些物体,同时显示指定材质,当时是用Houdini的节点+Hscript 解决的: 今天用简洁优雅的Python在Maya中写 ...

  9. freemarker中空值“”，null值的判断

    原文:http://zhousheng193.iteye.com/blog/1319772 <#if letVo.manageScore!=""> ${html('${ ...

  10. noip2012~2015刷题小记录

    2012d1t1 密码 模拟题 #include<cstdio> #include<cstdlib> #include<cstring> #include<c ...