js 图片轮转

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

<html>
<head>
    <title></title>
<style  type="text/css" >
a  { text-decoration:none; color:blue;}
#div1 {  width:400px; height:298px; background-color:Blue; overflow:hidden; position:absolute; top:50px; left:40px;}
#div2 {  filter: alpha(opacity=50); width:400px; height:20px; color:Orange; background-image: url(‘img/bg.jpg‘); background-repeat:repeat-x;  position:absolute; left:40px;  top :330px; }
#div3 {  width:400px; height:20px; color:Blue;   background-color:yellow; position:absolute; left:40px;  top :350px; }
img   {  filter: alpha(opacity=100); width:400px; height:300px;}
#div2 span{ cursor:pointer;}
</style>

<script type="text/javascript" src="my_js.js"></script>
<script type="text/javascript" language="javascript">

    //初始化图片
    var img_Array = new Array();
    for (var i = 0; i < 4; i++) {
        img_Array[i] = new Image();
    }
    img_Array[0].src = "img/1.jpg";
    img_Array[0].text = "<a href=‘http://www.baidu.com‘>这是第1个</a>";
    img_Array[0].index = 1;

    img_Array[1].src = "img/2.jpg";
    img_Array[1].text = "这是第2个";
    img_Array[1].index = 2;

    img_Array[2].src = "img/3.jpg";
    img_Array[2].text = "这是第3个";
    img_Array[2].index = 3;

    img_Array[3].src = "img/4.jpg";
    img_Array[3].text = "这是第4个";
    img_Array[3].index = 4;

    //初始化时赋值,添加事件
    window.onload = function () {
        var j = 0;
        var timer = null;
        var oimg = document.getElementById("img1");
        var odiv_txt = document.getElementById("div3");
        oimg.src = img_Array[0].src;
        odiv_txt.innerHTML = img_Array[0].text;

        timer = setInterval(function () {
            auto(j++);
            if (j >= 3) { j = -1; }
        }, 3000);

        var ospans = document.getElementsByTagName("span");
        for (var i = 0; i < ospans.length; i++) {
            ospans[i].index = i;
            ospans[i].onmouseover = function () { this.style.backgroundColor = "black"; }
            ospans[i].onmouseout = function () { this.style.backgroundColor = ""; }

            ospans[i].onclick = function () {
                oimg.src = img_Array[this.index].src;
                odiv_txt.innerHTML = img_Array[this.index].text;
                clearInterval(timer);
                j = this.index>=3?-1:this.index;
                timer = setInterval(function () {
                    auto(j++);
                    if (j >= 3) { j = -1; }
                }, 3000);

            }

        }

    }

    function auto(index) {
        var oimg = document.getElementById("img1");
        var odiv_txt = document.getElementById("div3");
        oimg.src = img_Array[index + 1].src;
        odiv_txt.innerHTML = img_Array[index + 1].text;
    }

</script>

</head>

<body >

<div  id="div1">
    <img id="img1" alt="" src="" />
    </div>
    <div id="div2" align="right">
   <span>  1   </span>
   <span>  2   </span>
    <span>  3   </span>
    <span>  4   </span> </div>
   <div id="div3" align="center">

</div>
</body>

</html>
时间: 2024-11-07 16:40:03

js 图片轮转的相关文章

JS实现简单的图片轮转

+(UIImage*)createImageFromView:(UIView*)view { //obtain scale CGFloat scale = [UIScreen mainScreen].scale; 开始绘图,下面方法,第一个参数表示区域大小.第二个参数表示是否是非透明的.如果需要显示半透明效果,需要传NO,否则传YES.第三个参数就是屏幕密度了 UIGraphicsBeginImageContextWithOptions(CGSizeMake(view.frame.size.wi

图片轮转切换效果

图片轮转切换效果 简介: CSS3动画相关的几个属性有:transition, transform和 animation.分别理解为过渡,变换和动画. transition指过渡,就是从a点都b点,是有时间的,是连续的,一般针对常规CSS属性: transform指变换,如:旋转.缩放,偏移,与transition使用,但是,效果是机械的旋转移动,如果配合transition属性,就会很平滑. animation指动画,详见:http://www.cnblogs.com/Michelle2018

js图片轮播与索引变色

<!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-

JS 图片转Base64

JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决这个问题. 废话不多说直接上代码.不知道什么是Base64的请自行百度. 图片转Base64 示例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS

JS图片Switchable切换大集合

JS图片切换大集合 利用周末2天把JS图片切换常见效果封装了下,比如:轮播,显示隐藏,淡入淡出等.废话不多说,直接看效果吧!JSFiddler链接如下: 想看JS轮播切换效果请点击我! 当然由于上传图片时候 png图片自动转换成jpg 所以左右按钮有透明,但是也没有关系,我们最主要的是看看效果是什么样的,至于图片大家可以替换.下面看看默认配置项吧!   container '',     外层容器 必填项 默认为空  contentCls  '.list',     内容所在的容器 默认为'.l

js图片延迟加载

http://stylechen.com/imglazyload2.html [译]页面加载中的图片性能优化 2013年05月26日 吴 天豪 性能优化  原文地址:http://www.stevesouders.com/blog/2013/04/26/i/ 我的大部分性能优化工作都集中在JavaScript和CSS上,从早期的Move Scripts to the Bottom和Put Stylesheets at the Top规则.为了强调这些规则的重要性,我甚至说过,"JS和CSS是页面

js图片放大镜

JS图片放大镜效果. 应用场景:各大电商网站. (附件) <!-- Author: XiaoWen Create a file: 2017-01-13 12:28:36 Last modified: 2017-01-13 17:16:46 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <me

图片切换特效(1):原生JS图片切换效果

转自:http://www.codefans.net/jscss/code/4699.shtml <!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">

常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全

常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 今天刚网上看的 不多说直接帖代码---- <head><-----></head><body> <!--向下滚动代码开始--><div id="colee" style="overflow:hidden;height:253px;width:410px;"><div id="colee1"><p>&