<!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. 记录一点自己写的Php代码（1）取得任意种类，无限级下线

    //获取所有下线 function get_all_heeler($user_id,$user_rank = 0){ $user_id_array = $user_id; while (true) { ...

  2. Qt之图标切分与合并

    有些时候会将多张有相同功能的图片绘制成一张,不管是使用或者绘制上都会方便很多.对美工与开发者来说也都是一件省事.省力.更省心的方式.二全其美,又何乐而不为呢... 例如:QQ等级     0-9可以组 ...

  3. 切取图片的一部分（利用CCRenderTexture）

    转自:http://blog.csdn.net/wcjwdq/article/details/37932769 显示图片时,在项目中经常会用只读取图片的一部分,而不是全部. 错误方式:很多人这时候会采 ...

  4. PostgreSQL的注释嵌套的例子

    pgsql=# -- Multiline comments pgsql=# SELECT 'Multi' /* This comment extends across pgsql*# * number ...

  5. radvd.conf RADVD配置文件内容部分解析

    interface eth0{ AdvSendAdvert on; #启用路由器公告(RA)功能 MinRtrAdvInterval ; #每隔30-100秒间隔发送公告消息 MaxRtrAdvInt ...

  6. C#基本线程同步

    0 概述 所谓同步,就是给多个线程规定一个执行的顺序(或称为时序),要求某个线程先执行完一段代码后,另一个线程才能开始执行. 第一种情况:多个线程访问同一个变量: 1. 一个线程写,其它线程读:这种情 ...

  7. unity3d脚本编程

    一 创建和使用脚本 1 概述 GameObject的行为都是被附加到其上面的组件控制,脚本本质上也是一个组件. 在unity中创建一个脚本,默认内容例如以下: using UnityEngine; u ...

  8. [MongoDB] Query, update, index and group

    /* 1. Query Operators */ db.posts.find({ viewsCount: {$get: 1000, $lte: 3000} }, {_id: 0, viewsCount ...

  9. IOS编程之相机和相册

    概述 IOS设备中的相机和相册,是我们在项目开发中经常会使用到的多媒体元素,使用相机可以获得最新想要的照片,而使用相册则可以访问IOS设备中的图片资源 使用IOS设备中的相机/相册获得图片资源 是否允 ...

  10. ip协议的数据分片备忘

    总结: 不仅tcp协议能对数据段进行分割,ip协议也具备这个功能,之所以会这样是两者都受到底层MTU的限制(虽说tcp是根据MSS限制来分割数据包,由于MTU＝tcp包头+ip包头+MSS,所以其实也 ...