<!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. 8.实现（Realization)

    实现关系是用来描述接口和实现接口的类或者构建结构之间的关系,接口是操作的集合,而这些操作就用于规定类或者构建结构的一种服务. 在接口和类之间的实现关系中,类实现了接口,类中的操作实现了接口中所声明的操 ...

  2. UVA1151

    //感觉刘汝佳老师的思维真的太厉害了orz /*摘录书上的一段话: 只需一个小小的优化即可降低时间复杂度:先求一次原图(不购买任何套餐)的最小生 成树,得到n-1条边,然后每次枚举完套餐后只考虑套餐中 ...

  3. Flex随笔

    -keep-generated-actionscript=true 默认的情况在flex中 对label进行字体加粗的时候,只能对英文的字体加粗,而中文的就不可以加粗: 为了能够使中文能够加粗,需要将 ...

  4. 配置Outlook Anywhere2010

    防火墙只需要开放CAS的443端口,其他硬件防火墙也是如此,不需要开放其他额外端口(80也没有必要开通,如果都使用https的话) 1.CAS:服务器配置-申请证书(内部.外部CAS名称)2.CAS: ...

  5. linux下oracle11g R2的启动与关闭监听、数据库

    su - oracle           切换到oracle账户 lsnrctl start          启动监听 sqlplus /nolog     登陆sqlplus conn /as  ...

  6. [置顶] ios 网页中图片点击放大效果demo

    demo功能:点击网页中的图片,图片放大效果的demo.iphone6.1 测试通过. demo说明:通过webview的委托事件shouldStartLoadWithRequest来实现. demo ...

  7. C#中Thread类中Join方法的理解(转载)

    指在一线程里面调用另一线程join方法时,表示将本线程阻塞直至另一线程终止时再执行      比如 using System; namespace TestThreadJoin { class Pro ...

  8. OS_TASK.C

    /*************************************************************************************************** ...

  9. [ES6] 12. Shorthand Properties in ES6

    Where destructuring in ES6 allows you to easily get properties out of an object, this shorthand prop ...

  10. angularJs项目实战！02：前端的页面分解与组装

    自从上一篇文章到现在已经有将近一个月的时间,我将精力放在了前端页面分解与组装,和angularjs如何与jquery.bootstrap.D3等一系列其他类库结合使用的经验总结上.由于公司新招了一些员 ...