<!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. plsql配置连接远程数据库

    一.首先安装PL/SQL Developer 下载地址:https://yunpan.cn/cM3njKpfK8MnT 访问密码 996a 二.再安装instantclient_11_2 下载地址:h ...

  2. ECharts地图中tooltip提示框通过formatter分别显示多个数值

    我原来的CSDN博客上写过这篇文章:http://blog.csdn.net/giscript/article/details/52162165 但是现在发现了代码中存在一个bug,在此更正. 按照原 ...

  3. PostQuitMessage, PostThreadMessage( WM_QUIT )

    http://blogs.msdn.com/b/oldnewthing/archive/2005/11/04/489028.aspx Why is there a special PostQuitMe ...

  4. vim复制多行<转>

    比如我要复制从第1行到第5行的数据,复制到第9行 光标移到第5行任意位置,输入ma光标移到第1行任意位置,输入y'a(这一定要打这个“'”单引号,否则就进入“INSERT”状态了光标移到需要复制的行, ...

  5. JDBC连接各种数据库的方法（经典）

    1)连接Oracle 8/8i/9i/10g/11g(thin模式) Class.forName("oracle.JDBC.driver.OracleDriver").newIns ...

  6. BP神经网络算法学习

    BP(Back Propagation)网络是1986年由Rumelhart和McCelland为首的科学家小组提出,是一种按误差逆传播算法训练的多层前馈网络,是眼下应用最广泛的神经网络模型之中的一个 ...

  7. Microsoft SQL Server 2008 基本安装说明

    Microsoft SQL Server 2008 基本安装说明 安装SQL2008的过程与SQL2005的程序基本一样,只不过在安装的过程中部分选项有所改变,当然如果只熟悉SQL2000安装的同志来 ...

  8. BZOJ 2038 [2009国家集训队]小Z的袜子 莫队

    2038: [2009国家集训队]小Z的袜子(hose) 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=2038 Descriptionw ...

  9. Android集成支付宝接口 实现在线支付

    手机的在线支付,被认为是2012年最看好的功能,我个人认为这也是移动互联网较传统互联网将会大放光彩的一个功能. 人人有手机,人人携带手机,花钱买东西,不再需要取钱付现,不再需要回家上网银,想买什么,扫 ...

  10. javascript实现单例模式

    1.简单实现单例模式: var singleTon = function(){ var _pria = 'private value'; var show_pria = function(){ con ...