<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>幻灯片效果</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        body{

           padding: 50px 10%;

        }

        .slider .main,.slider{

            width: 100%;

            height: 400px;

            position: relative;

        }

        /*幻灯片*/

        .slider .main{

            overflow: hidden;

        }

        .slider .main .main_i{

            width: 100%;

            position: absolute;

            right: 50%;

            top:0px;

            -webkit-transition:all 0.5s;

            opacity: 0;

        }

        .slider .main .main_i img{

            width: 100%;

            position: absolute;

            left: 0;

            top: 0;

            z-index: 1;

        }

        /*控制*/

        .slider .ctrl {

            width: 100%;

            height: 13px;

            line-height: 13px;

            text-align: center;

            position: absolute;

            left: 0;

            bottom: -13px;

            background: #ccc;

        }

        .slider .ctrl .ctrl_i{

            display: inline-block;

            width: 150px;

            height: 13px;

            background: #ccc;

            border: 1px solid;

            position: relative;

            margin-left: 1px;

        }

        .slider .ctrl .ctrl_i img{

            width: 100%;

            position: absolute;

            left: 0;

            bottom:50px ;

            z-index: 1;

          opacity: 0;

            -webkit-transition:all 0.2s ;

        }

        /*hover 控制按钮样式*/

        .slider .ctrl .ctrl_i:hover{

            background-color:#f0f0f0 ;

        }

        .slider .ctrl .ctrl_i:hover img{

            bottom:13px ;

            /*倒影*/

            -webkit-box-reflect:below 0px -webkit-gradient(

                linear,

                0 0,

                0 100%,

                from(transparent),

                color-stop(50%,transparent),

                to(rgba(255, 255, 255, 0.3))

            );

            opacity: 1;

        }

        /*active 当前状态*/

        .slider .ctrl .ctrl_i_active img:hover,

        .slider .ctrl .ctrl_i_active{

            background-color: #ccc;

        }

        .slider .ctrl .ctrl_i_active:hover img{

            opacity: 0;

        }

        .slider .main .main_i_active{

            right: 0;

            opacity:1;

        }

    </style>

</head>

<body>

    <div class="slider">

        <div class="main" id="template_main">

            <div class="main_i" id="main_{{index}}">

                <img src="data:images/{{index}}.jpg" alt=""/>

            </div>

        </div>

        <div class="ctrl" id="template_ctrl">

            <a class="ctrl_i " id="ctrl_{{index}}" href="javascript:switchSlider({{index}});">

                <img src="data:images/{{index}}.jpg" alt=""/>

            </a>

        </div>

    </div>

</body>

<script>

    //1. 数据定义

    var data = [

        {img:1},

        {img:2},

        {img:3},

        {img:4},

        {img:5}

    ]

    //定义通用函数

    var g = function(id){

        if(id.substr(0,1) == "."){

            return document.getElementsByClassName(id.substr(1))

        }

        return document.getElementById(id);

    }

    //添加幻灯片

    function addslider(){

       var tpl_main = g('template_main').innerHTML;

       var tpl_ctrl = g('template_ctrl').innerHTML;

        var out_main = [];

        var out_ctrl = [];

        for(i in data){

            var _html_main = tpl_main

                    .replace(/{{index}}/g,data[i].img)

                    .replace(/{{index}}/g,data[i].img)

            var _html_ctrl = tpl_ctrl

                    .replace(/{{index}}/g,data[i].img);

            out_main.push(_html_main);

            out_ctrl.push(_html_ctrl);

        }

        //把html 写到对应的dom 中

        g("template_main").innerHTML = out_main.join("");

        g("template_ctrl").innerHTML = out_ctrl.join("");

    }

    //幻灯片切换

    function switchSlider(n){

        // 获得要展现的幻灯片& 控制按钮

        var main = g("main_" + n);

        var ctrl = g("ctrl_" + n);

        //  获得所有的幻灯片&控制按钮 dom

        var clear_main = g(".main_i")

        var clear_ctrl = g(".ctrl_i")

        //清除样式

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

            clear_main[i].className = clear_main[i].className.replace("main_i_active");

            clear_ctrl[i].className = clear_ctrl[i].className.replace("ctrl_i_active");

        }

        //为当前幻灯片&按钮添加样式

        main.className += " main_i_active";

        ctrl.className += " ctrl_i_active";

    }

    //何时处理幻灯片

    window.onload = function(){

        addslider();

        switchSlider(1)

    }

</script>

</html>

　　

css+js 控制幻灯片效果的更多相关文章

  1. 简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  2. 隔行变色---简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  3. 伪元素after,before，css/js控制样式

    CSS<style> body { font: 200%/1.45 charter; } ref::before { content: '\00A7'; letter-spacing: . ...

  4. 使用CSS实现一个简单的幻灯片效果

    方法一: 简单的CSS代码实现幻灯片效果 方法二: 使用CSS3 Animation来制作幻灯片 方法一: 简单的CSS代码实现幻灯片效果 话不多说,直接上代码 <!DOCTYPE html&g ...

  5. 纯css实现幻灯片效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  6. gulp为css,js添加版本号

    由于cdn缓存,更改样式后会有一段时间不生效,解决方法就是给css,js加上版本号效果如下: 1.安装gulp插件 npm install --save-dev gulp-rev (version:9 ...

  7. 通过jquery js 实现幻灯片切换轮播效果

    观察各个电商网址轮播图的效果,总结了一下主要突破点与难点 1.->封装函数的步骤与具体实现 2->this关键字的指向 3->jquery js函数熟练运用 如animate 4-& ...

  8. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

  9. 用JS控制CSS基本样式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { ...

随机推荐

  1. Ehcache（04）——设置缓存的大小

    http://haohaoxuexi.iteye.com/blog/2116749 设置缓存的大小 目录 1     CacheManager级别 2     Cache级别 3     大小衡量 4 ...

  2. （4）html表格

    本节解说 :html的表格 表格: *<table></table> 标签定义 HTML 表格. *简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 t ...

  3. C#完成超酷的图像效果 (附demo)

    如果您觉得C#制作的艺术字比较好玩, 但是还觉得没看够,不过瘾,那么我今天就让您一饱眼福, 看看C#如何制作的效果超酷的图像. (注: 我之前曾写过类似的文章, 但没有原理说明, 代码注释不够详细, ...

  4. Ajax的常用框架有哪些？

    AJAX(Asynchronous JavaScript and XML,异步JavaScript和XML),是创建交互式Web应用的主要开发技术.互联网中也有大量的关于AJAX的框架,本文汇总了最常 ...

  5. IPv6 相关的工作简介

    这里说明下,仅仅是IPv6在开发板上的相关的工作简介,没有很详细,都是自己一边积累,一边实践的.能帮助其他人最好,也算是给自己做个备忘录. 一.首先说下DHCPv6相关的.这里我使用的是DHCP6s. ...

  6. Swift学习笔记十四

    Deinitialization 当类的实例对象即将要被释放时,会立即调用deinitializer,通过deinit关键字来定义deinitializer,和initializer一样,它也只存在于 ...

  7. [MySQL登录错误] ERROR1045 (28000): Access denied for user 'omonroy'@'20.112.251.19' (using password:YES)

    收到美国那边同事carl的call说用户登录不上去了,不过2个礼拜前他还用的好好的,他给我发email了,他有急事需要处理麻烦我记尽快协助,他在email有截取错误信息: root@xxxxx:/ho ...

  8. Cocos2d-html5 笔记4: 粒子

    今天看了cocos2d-html5里面的粒子系统相关的代码,首先看了代码中引用的两篇文章, 这两篇文章google上都可以搜到pdf的. The Ocean Spray in Your Face [j ...

  9. CF 335A(Banana-贪心-priority_queue是大根堆)

    A. Banana time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...

  10. 架构设计：负载均衡层设计方案（7）——LVS + Keepalived + Nginx安装及配置

    1.概述 上篇文章<架构设计:负载均衡层设计方案(6)——Nginx + Keepalived构建高可用的负载层>(http://blog.csdn.net/yinwenjie/artic ...