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

原理很简单：

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. 2017 ccpc哈尔滨 A题 Palindrome

    2017 ccpc哈尔滨 A题 Palindrome 题意: 给一个串\(T\),计算存在多少子串S满足\(S[i]=S[2n−i]=S[2n+i−2](1≤i≤n)\) 思路: 很明显这里的回文串长 ...

  2. Jsp电子商务之七 订单篇2

    从View页面,点击超链接查询订单,进入到控制器 OrderlistServlet package com.cart.web; import java.io.IOException; import j ...

  3. vector去除重复的元素

    vector<int> v; sort(v.begin(),v.end()); v.erase(unique(v.begin(), v.end()), v.end());

  4. TiXmlHandle的使用-简化tinyxml的代码

    借鉴于:http://www.cppblog.com/elva/archive/2008/04/24/47907.html 例如: <?xml version="1.0" s ...

  5. [Android问答] px、dp和sp，这些单位有什么区别？

    相信每个Android新手都会遇到这个问题,希望这篇帖子能让你不再纠结. px: 即像素,1px代表屏幕上一个物理的像素点: px单位不被建议使用,因为同样100px的图片,在不同手机上显示的实际大小 ...

  6. Sublime Text 3 一些简单使用

    1.注释 选中需要注释的代码,“Ctrl+/”单行注释,“Ctrl+Shift+/”多行注释.同样操作,可以取消注释. 2.查找 “Ctrl+F”,在底部会出现快速搜索框,在搜索框中输入需要搜索的变量 ...

  7. 组合数学--约瑟夫环问题 Josephus

    约瑟夫斯问题(有时也称为约瑟夫斯置换),是一个出现在计算机科学和数学中的问题.在计算机编程的算法中,类似问题又称为约瑟夫环. 有n个囚犯站成一个圆圈,准备处决.首先从一个人开始,越过k-2个人(因为第 ...

  8. Flask中使用mysql

    Flask中使用mysql 先安装相关模块: pip  install  Flask-MySQL 先准备一下数据库 登录: mysql  -u  root  -p 创建Database和创建Table ...

  9. Android中Handler导致的内存泄露

    http://www.androiddesignpatterns.com/2013/01/inner-class-handler-memory-leak.html Consider the follo ...

  10. Spring注解概览（数漫江湖）

    从Java5.0开始,Java开始支持注解.Spring做为Java生态中的领军框架,从2.5版本后也开始支持注解.相比起之前使用xml来配置Spring框架,使用注解提供了更多的控制Spring框架 ...