javascript 代码:

<script type="text/javascript">

    function select_play() {

        var select_play_box = document.getElementById("select_play_box");

        var aUl = select_play_box.getElementsByTagName("ul");

        var aImg = aUl[0].getElementsByTagName("li");

        var aNum = aUl[1].getElementsByTagName("li");

        var timer = play = null;

        var i = index = 0;

        //切换按钮

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

            aNum[i].index = i;

            aNum[i].onmouseover = function () {

                show(this.index)

            }

        }

        //鼠标划过关闭定时器

        select_play_box.onmouseover = function () {

            clearInterval(play)

        };

        //鼠标离开启动自动播放

        select_play_box.onmouseout = function () {

            autoPlay()

        };

        //自动播放函数

        function autoPlay() {

            play = setInterval(function () {

                index++;

                index >= aImg.length && (index = 0);

                show(index);

            }, 2500);

        }

        autoPlay();//应用

        //图片切换, 淡入淡出效果

        function show(a) {

            index = a;

            var alpha = 0;

            for (i = 0; i < aNum.length; i++)aNum[i].className = "";

            aNum[index].className = "current";

            clearInterval(timer);

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

                aImg[i].style.opacity = 0;

                aImg[i].style.filter = "alpha(opacity=0)";

            }

            timer = setInterval(function () {

                alpha += 2;

                alpha > 100 && (alpha = 100);

                aImg[index].style.opacity = alpha / 100;

                aImg[index].style.filter = "alpha(opacity = " + alpha + ")";

                alpha == 100 && clearInterval(timer)

            }, 20);

        }

    }

</script>

html代码:

<div id="select_play_box">

    <ul class="select_play_list">

        <li class="select_play_current"><img src="d/a.jpg"/></li>

        <li><img src="d/b.jpg"/></li>

        <li><img src="d/c.jpg"/></li>

        <li><img src="d/d.jpg"/></li>

    </ul>

    <ul class="select_play_count">

        <li class="select_play_current">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

</div>

css代码:

 #select_play_box {

     position: relative;

     width: 315px;

     height: 272px;

     background: #fff;

     border-radius: 5px;

     border: 8px solid #fff;

     margin: 5px auto;

 }

 #select_play_box ul {

     list-style-type: none;

 }

 #select_play_box ul, li {

     margin:;

     padding:;

 }

 #select_play_box .select_play_list {

     position: relative;

     width: 100%;

     height: 100%;

     overflow: hidden;

     border: 1px solid #ccc;

 }

 #select_play_box .select_play_list li {

     position: absolute;

     top:;

     margin-left: 15px;

     margin-top: 5px;

     width: 300px;

     height: 170px;

     opacity:;

     filter: alpha(opacity=0);

 }

 #select_play_box .select_play_list img {

     width:250px;

     height: 250px;

 }

 #select_play_box .select_play_list li.select_play_current {

     opacity:;

     filter: alpha(opacity=100);

 }

 #select_play_box .select_play_count {

     position: absolute;

     right:;

     bottom: 5px;

 }

 #select_play_box .select_play_count li {

     text-align: center;

     color: #fff;

     float: left;

     width: 20px;

     height: 20px;

     cursor: pointer;

     margin-right: 5px;

     overflow: hidden;

     background: #F90;

     opacity: 0.7;

     filter: alpha(opacity=70);

     border-radius: 20px;

 }

 #select_play_box .select_play_count li.select_play_current {

     color: #fff;

     opacity:;

     filter: alpha(opacity=100);

     font-weight:;

     background: #f60;

 }

完整html页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>javascript - 图片的幻灯片效果</title>

    <link type="text/css" href="sy/select_auto_image.css" rel="stylesheet"/>

</head>

<body onload="select_play()">

<div id="select_play_box">

    <ul class="select_play_list">

        <li class="select_play_current"><img src="d/a.jpg"/></li>

        <li><img src="d/b.jpg"/></li>

        <li><img src="d/c.jpg"/></li>

        <li><img src="d/d.jpg"/></li>

    </ul>

    <ul class="select_play_count">

        <li class="select_play_current">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

</div>

<script type="text/javascript">

    function select_play() {

        var select_play_box = document.getElementById("select_play_box");

        var aUl = select_play_box.getElementsByTagName("ul");

        var aImg = aUl[0].getElementsByTagName("li");

        var aNum = aUl[1].getElementsByTagName("li");

        var timer = play = null;

        var i = index = 0;

        //切换按钮

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

            aNum[i].index = i;

            aNum[i].onmouseover = function () {

                show(this.index)

            }

        }

        //鼠标划过关闭定时器

        select_play_box.onmouseover = function () {

            clearInterval(play)

        };

        //鼠标离开启动自动播放

        select_play_box.onmouseout = function () {

            autoPlay()

        };

        //自动播放函数

        function autoPlay() {

            play = setInterval(function () {

                index++;

                index >= aImg.length && (index = 0);

                show(index);

            }, 2500);

        }

        autoPlay();//应用

        //图片切换, 淡入淡出效果

        function show(a) {

            index = a;

            var alpha = 0;

            for (i = 0; i < aNum.length; i++)aNum[i].className = "";

            aNum[index].className = "current";

            clearInterval(timer);

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

                aImg[i].style.opacity = 0;

                aImg[i].style.filter = "alpha(opacity=0)";

            }

            timer = setInterval(function () {

                alpha += 2;

                alpha > 100 && (alpha = 100);

                aImg[index].style.opacity = alpha / 100;

                aImg[index].style.filter = "alpha(opacity = " + alpha + ")";

                alpha == 100 && clearInterval(timer)

            }, 20);

        }

    }

</script>

</body>

</html>

javascript - 图片的幻灯片效果的更多相关文章

  1. 《JavaScript 实战》：JavaScript 图片滑动切换效果

    看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧.由于有了做图片滑动展示效果的经验,做这个就容易得多了. 效果预览 仿淘宝/alibaba图片切换: 默 ...

  2. javascript 图片淡入淡出效果 实例源代码

    代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...

  3. javascript图片切换

    JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 ...

  4. 超实用的JavaScript代码段 Item3 --图片轮播效果

    图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...

  5. 【javascript/css】Javascript+Css实现图片滑动浏览效果

    今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...

  6. 特殊例子--JavaScript代码实现图片循环滚动效果

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

  7. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  8. JavaScript函数实现鼠标指向后带图片的提示效果

    转载:http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html 当我们在写一个网页程序的时候,很多方法可以提供页面的动态显示,从 ...

  9. 原生 JavaScript 图片裁剪效果

    图片裁剪程序效果如下,可鼠标操作.   拖动左边小方框时在右侧实时显示对应的裁剪图片,同时左侧的拖动框里图片完全显示,拖动框外部图片模糊显示.8个控制点可以对显示区域大小进行控制. HTML 和 CS ...

随机推荐

  1. 一起啃PRML - 1.2.3 Bayesian probabilities 贝叶斯概率

    一起啃PRML - 1.2.3 Bayesian probabilities 贝叶斯概率 @copyright 转载请注明出处 http://www.cnblogs.com/chxer/ 这一节简单讲 ...

  2. WordPress Quick Paypal Payments插件HTML注入漏洞

    漏洞名称: WordPress Quick Paypal Payments插件HTML注入漏洞 CNNVD编号: CNNVD-201310-491 发布时间: 2013-10-22 更新时间: 201 ...

  3. WordPress Sharebar ‘page’参数跨站脚本漏洞

    漏洞名称: WordPress Sharebar ‘page’参数跨站脚本漏洞 CNNVD编号: CNNVD-201309-468 发布时间: 2013-09-26 更新时间: 2013-09-26 ...

  4. HDOJ --- 1176 免费馅饼

    免费馅饼 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  5. CodeForces 573A Bear and Poker

    题目链接:http://codeforces.com/problemset/problem/573/A 题目大意:此题要求一组数中的元素乘以2或者乘以3后得到的数都一样,其实就是判断这些数除去2和3这 ...

  6. maven构建带版本号和日期的war包名

    21166312 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !import ...

  7. storm spout的速度抑制问题

    转发请注明原文地址:http://www.cnblogs.com/dongxiao-yang/p/6031398.html 最近协助同事优化一个并发消费kafka数据用来计算的任务,压测过程中发现有两 ...

  8. jQuery.validate 中文API

      名称 返回类型 描述 validate(options) 返回:Validator 验证所选的FORM valid() 返回:Boolean 检查是否验证通过 rules() 返回:Options ...

  9. Python数据类型转换

    Python数据类型之间的转换 函数 描述 int(x [,base]) 将x转换为一个整数 long(x [,base] ) 将x转换为一个长整数 float(x) 将x转换到一个浮点数 compl ...

  10. 兔子--R.java丢失原因及解决的方法

    R.jar丢失原因: a:eclipse指向的adk路径有中文,或者是workspace路径有中文 b:xml文件里有错误或者引用的资源不存在 c:xml或者drawable下资源文件不能够有大写字母 ...