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

原理很简单：

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. bzoj1004: [HNOI2008]Cards(burnside引理+DP)

    题目大意:3种颜色,每种染si个,有m个置换,求所有本质不同的染色方案数. 置换群的burnside引理,还有个Pólya过几天再看看... burnside引理:有m个置换k种颜色,所有本质不同的染 ...

  2. 使用restClient工具发送post请求并带参数

    运行 restClient 点 Method选项卡,选中post方法 然后切换到 Body选项卡,点右边的 倒三角,选 String body 出现如下窗口: 点击右边红圈里的按钮,弹出窗口: 点是, ...

  3. [mysql]mysql弱密码字典检测

    1.如何定义弱密码 和用户名一致 连续字符 连续数字 空密码 2.生成弱密码字典 3.检测脚本 4.结果

  4. uva 11424

    uva 11424 GCD - Extreme (I) 题意:思路:(见http://www.cnblogs.com/Duahanlang/p/3184994.html ) 差别在于数据规模和时间,其 ...

  5. 手脱ACProtect V2.0(无Stolen Code)

    1.载入PEID ACProtect V2.0 -> risco 2.载入OD > 00A04000 push ACP_Feed.0040A000 ; //入口点 0B104000 pus ...

  6. CentOS 下安装 LEMP 服务(nginx、MariaDB/MySQL 和 php)

    转载自:https://linux.cn/article-4314-1.html 编译自:http://xmodulo.com/install-lemp-stack-centos.html 作者: D ...

  7. 第一篇 关于Android Studio的快捷键

    公司最近要培训Android的课程,但是发现现在官方网站上已经不提供了Eclipse ADT的下载了,都变成了Android Studio,可能是悲催了! 对于很多Eclipse转过来的同学,不适应的 ...

  8. 51Nod 1067 Bash游戏 V2 | 博弈论 Bash

    n的数据范围非常大,所以不能用标准SG函数 找规律 #include "iostream" #include "cstdio" using namespace ...

  9. flask 自定义url转换器

    from werkzeug.routing import BaseConverter app = Flask(__name__) class TeleConveter(BaseConverter): ...

  10. Jenkenis报错：该jenkins实例似乎已离线[转]

    解决方法: 安装插件那个页面,就是提示你offline的那个页面,不要动.然后打开一个新的tab,输入网址http://localhost:8080/pluginManager/advanced. 这 ...