精华内容
下载资源
问答
  • 主要介绍了js图片轮播效果实现原理,帮助大家更好地实现图片轮播效果,真正理解图片轮播原理,感兴趣的朋友可以参考下
  • JS实现图片轮播原理

    千次阅读 2016-11-27 23:13:12
    一个简单的图片轮播案例 图片轮播 .box1 { width: 100px; height: 100px; background: red; position: absolute; top: 100px; left: 200px; } .box2 { width: 100px; height: 100px; ...

    一个简单的图片轮播案例


    <head>
    <title>图片轮播</title>
    <meta charset="utf-8" />

    <style type="text/css">
    .box1 {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top: 100px;
    left: 200px;
    }
    .box2 {
    width: 100px;
    height: 100px;
    background: green;
    position: absolute;
    top: 50px;
    left: 350px;
    }
    .box3 {
    width: 100px;
    height: 100px;
    background: blue;
    position: absolute;
    top: 100px;
    left: 500px;
    }
    </style>
    </head>
    <body>
    <script>
    window.onload = function(){
    var oDiv = document.getElementsByTagName('div');
    var oInput = document.getElementsByTagName('input');
    var arr = [];

    for (var i=0; i<oDiv.length; i++) {
    arr.push([getStyle(oDiv[i],'top'), getStyle(oDiv[i],'left') ]);//复合数组
    };

    // console.log(arr);


    //点击第一个按钮
    oInput[0].onclick = function(){
    arr.push(arr[0]); //尾部添加
    arr.shift(); //头部删除

    for (var i=0; i<oDiv.length; i++) {
    oDiv[i].style.top = arr[i][0];
    oDiv[i].style.left = arr[i][1];
    };
    };

    //点击第二个按钮
    oInput[1].onclick = function(){
    arr.unshift(arr[oDiv.length-1]); //头部添加
    arr.pop(); //尾部删除

    for (var i=0; i<oDiv.length; i++) {
    oDiv[i].style.top = arr[i][0];
    oDiv[i].style.left = arr[i][1];
    };
    };


    //获取style属性,通过封装成一个函数来获取
    function getStyle(obj, attr){
    if (obj.currentStyle) { //IE识别currentStyle
    return obj.currentStyle[attr];
    } else{
    return getComputedStyle(obj, false)[attr];//非IE识别getComputedStyle(obj,false)
    };
    };

    };

    </script>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <input type="button" value="<" />
    <input type="button" value=">" />
    </body>


    展开全文
  • 图片轮播是怎么做的呢?素材:你要轮流播放的图片1,图片2,图片3,。。。代码:要怎么实现图片轮播呢?图片是怎么放到网上的呢?使用<img>标签这个标签里面可以放1张图片,在一个时间间隔之后,改变为另外...

    图片轮播是怎么做的呢?

    素材:你要轮流播放的图片1,图片2,图片3,。。。

    代码:

    要怎么实现图片轮播呢?

    图片是怎么放到网上的呢?

    使用<img>标签

    这个标签里面可以放1张图片,

    在一个时间间隔之后,

    改变为另外一张图片。

    怎么更改<img>标签内容呢?

    怎么停留一段时间间隔呢?

    setInterval(ChangeImg,2000);

    使用这个函数,可以每隔2秒就调用ChangeImg函数,实现停留一段间隔。

    怎么更改图片内容呢?

    如果图片刚开始播放图片1

    怎么换到图片2,图片3呢

    首先,要获得所有的图片,所有的图片放入一个集合里面。

    然后按下标顺序显示图片。

    下标从0开始,先显示下标为0的图片,

    隔了1段时间,再显示下标是1的图片,

    依次实现轮播。

    代码:

    <

    还有一个方法:

    参考:

    <!DOCTYPE html>
    

    这份代码来自:

    html + js 简单实现轮播图​www.jianshu.com
    6e05c34fdac74aa8764c610a863a7e48.png

    读者可以比较2份代码,从中体会学习。

    展开全文
  • 本文实例讲述了js图片轮播效果实现原理,分享给大家供大家参考,具体内容如下Insert title herevar timeID;var image;var current = 0;var images = new Array(5);function init(){for (var i=1;i<=5;i++){images...

    本文实例讲述了js图片轮播效果实现原理,分享给大家供大家参考,具体内容如下

    Insert title here

    var timeID;

    var image;

    var current = 0;

    var images = new Array(5);

    function init(){

    for (var i=1;i<=5;i++){

    images[i] = new Image(450,550);

    images[i].src = "pictures/"+i+".jpg";

    }

    image = document.images[0];

    }

    function setSrc(i){

    current = i;

    //设置图片src的属性,实现图片的切换

    image.src = images[i].src;

    }

    function pre(){

    if (current <= 0){

    alert('已经是第一张了');

    }else{

    current--;

    setSrc(current);

    }

    }

    function next(){

    if (current >= 5){

    alert('已经是最后一张了');

    }else{

    current++;

    setSrc(current);

    }

    }

    function play(){

    if (current >= 5){

    current = 0;

    }

    setSrc(++current);

    }

    1.jpg

    原理在这呐

    首先init()函数用于初始化images数组和image的值,本例中主要是利用setSrc()设置图片的src属性值,这样就达到了图片的切换,图片的轮播是使用定时器来时显的!setInterval('play()',500)的意思是每0.5s调用一次play()函数!

    以上就是js图片轮播效果代码,以及实现js图片轮播效果的原理简介,希望能够帮助大家,真正的做到学以致用。

    展开全文
  • 图片轮播原理

    2018-06-25 23:35:39
    //定义定时器函数 定时器函数主要是用来执行图片轮播的效果 //显示哪一张图片是由变量n来决定 //当n=1的时候 就应该给第一个li标签设置class属性值 //当n=2的时候 就应该给第二个li标签设置class属性值 ...
    <!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" xml:lang="zh-cn">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>网页标题</title>
        <meta name="keywords" content="关键字列表" />
        <meta name="description" content="网页描述" />
        <link rel="stylesheet" type="text/css" href="" />
        <style type="text/css">
            *{margin:0;padding:0;}
            body{color:#333;font-size:12px;line-height:20px;}
            ul,li{list-style:none;}
            #content{margin:0 auto;width:540px;}
            #content .scroll_top{width:540px;height:51px;background:url(images/dd_scroll_top.gif) no-repeat;}
            #content .scroll_mid{
                width:533px;
                padding:5px 0 5px 5px;
                border-left:1px solid #d6d5d6;
                border-right:1px solid #d6d5d6;
                background:#f2f2f3;
            }
            #scroll_number{
                float:right;
                padding-right:10px;
            }
            #scroll_number li{
                margin-top:5px;
                width:13px;
                height:13px;
                line-height:16px;
                border:1px solid #999;
                cursor:pointer;
                text-align:center;
            }
            #content .scroll_end{
                width:540px;
                height:8px;
                background:url(images/dd_scroll_end.gif) no-repeat;
                margin-bottom:10px;
            }
            .scroll_number_out{
            }
            .scroll_number_over{
                background-color:#f00;
                color:#FFF;
            }
        </style>
        <script type="text/javascript">
            /*  思路分析:
             1、开启一个定时器
             2、定时器函数主要是用来 执行图片轮播的效果
             3、当鼠标放在图片上面时 ,图片就停止了轮播的效果 清除了定时器
             4、当鼠标离开图片上面时,图片继续在执行轮播的效果  重新开启了定时器功能
             5、当鼠标放在li标签上面时,图片就停止了轮播的效果 清除了定时器
             6、当鼠标放在li标签上面时,还会显示li标签上面对应的数字的图片
             7、当鼠标离开li标签上面时,图片就会继续开始轮播的效果  重新开启了定时器功能
             8、li标签上面的高亮效果,它是随着图片滚动而滚动。
             我们先要获取到所有的li标签
    
             */
            //当页面加载完成后
            var imgObj;
            var timer;
            var lis_obj;
            var lis_length;
            window.onload = function(){
                //1、开启一个定时器
                timer = setInterval("scrollImg()",1000);
                //获取img标签对象
                imgObj = document.getElementById("dd_scroll");
                //先获取到id=scroll_number这个标签对象
                var divObj = document.getElementById("scroll_number");
                lis_obj = divObj.getElementsByTagName('li');
                lis_length = lis_obj.length
    
    
            }
    
            //定义定时器函数 定时器函数主要是用来执行图片轮播的效果
            //显示哪一张图片是由变量n来决定
            //当n=1的时候 就应该给第一个li标签设置class属性值
            //当n=2的时候 就应该给第二个li标签设置class属性值
            //变量n 是从 1开始  1到6
            //但是li的下标是从0开始  0到5
            //现在变量n与li标签对象的下标之间的变量是 n-1
            var n = 2;
            function scrollImg(){
                //还存在一个问题 高亮显示只需要显示当前的 不需要所有的都显示
                //先将所有的li标签上面的className的值清空
                for(var i=0;i<lis_length;i++){
                    lis_obj[i].className = "";
                }
                //给当前的li标签对象设置class属性值
                lis_obj[n-1].className = "scroll_number_over";
                imgObj.src = "images/dd_scroll_"+n+".jpg";
                n++;
                //判断n的值 如果大于6就让n=1
                if(n > 6){
                    n = 1;
                }
            }
    
            //3、当鼠标放在图片上面时 ,图片就停止了轮播的效果 清除了定时器
            function stopScroll(imgNumber){
                if(imgNumber){
                    //现在需要将imgNumber的值赋值给变量n
                    n = imgNumber;
                    //这里要马上就要调用scrollImg()这个函数
                    scrollImg();
                }
    
                clearInterval(timer);
            }
    
            //4.当鼠标离开图片上面时,图片继续在执行轮播的效果  重新开启了定时器功能
            function goon(){
                timer = setInterval("scrollImg()",1000);
            }
    
    
    
        </script>
    </head>
    <body>
    <div id="content">
        <!--轮换显示的横幅广告图片-->
        <div class="scroll_top"></div>
        <div class="scroll_mid">
            <img src="images/dd_scroll_1.jpg" alt="轮换显示的图片广告" id="dd_scroll" onmouseover="stopScroll()" onmouseout="goon()"/>
            <div id="scroll_number">
                <ul>
                    <li class="scroll_number_over" onmouseover="stopScroll(1)"  onmouseout="goon()">1</li>
                    <li   onmouseover="stopScroll(2)" onmouseout="goon()">2</li>
                    <li  onmouseover="stopScroll(3)" onmouseout="goon()">3</li>
                    <li  onmouseover="stopScroll(4)" onmouseout="goon()">4</li>
                    <li  onmouseover="stopScroll(5)" onmouseout="goon()">5</li>
                    <li  onmouseover="stopScroll(6)" onmouseout="goon()">6</li>
                </ul>
            </div>
        </div>
        <div class="scroll_end"></div>
    </div>
    </body>
    </html>
    
    

    这里写图片描述

    /*  思路分析:
             1、开启一个定时器
             2、定时器函数主要是用来 执行图片轮播的效果
             3、当鼠标放在图片上面时 ,图片就停止了轮播的效果 清除了定时器
             4、当鼠标离开图片上面时,图片继续在执行轮播的效果  重新开启了定时器功能
             5、当鼠标放在li标签上面时,图片就停止了轮播的效果 清除了定时器
             6、当鼠标放在li标签上面时,还会显示li标签上面对应的数字的图片
             7、当鼠标离开li标签上面时,图片就会继续开始轮播的效果  重新开启了定时器功能
             8、li标签上面的高亮效果,它是随着图片滚动而滚动。
             我们先要获取到所有的li标签
    
    */
    展开全文
  • 图解js图片轮播效果

    2020-10-23 03:08:00
    主要以图片展示的方式向大家讲解了js图片轮播效果的实现方法,对图片轮播实现原理进行了详细介绍,感兴趣的朋友可以参考一下
  • 详细:用js制作切换动画,js切换图片。 看运行效果需复制代码到相关文件,浏览器运行查看效果。轮播图html、css、JavaScript源码及效果图呈上*注 块宽度590px;块高度470px;效果图html文件<>●●●●css文件*...
  • 原生JS实现图片轮播切换效果2019-01-06编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。首先来分析...
  • 首先来分析一下轮播图效果的实现原理: 1、父元素作为显示窗口,大小固定超出部分隐藏,即设置overflow:hidden; 2、子元素存放图片列表用ul,ul固定定位,参照为父元素,即父元素position:relative;ul元素position:...
  • 现在很多javascript的插件都可以实现图片轮播的功能,这篇文章,主要是通过这个domo来解析javascript图片轮播原理。 老规矩,先上代码。至于代码中的图片,随便找三张即可,最核心的还是理解其思想。 html: &...
  • 主要为大家详细介绍了基于JavaScript实现轮播原理及示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 0.最终效果预览鼠标未触及区域时(自动滚动中)鼠标触及区域后 (停止滚动,显示按钮)基本功能自动无缝滚动左右按钮控制滚动点击圆点切换图片1.整体结构与思路Html部分<>三个div,最外层id为parent的大div内包含...
  • 最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西来实现。最后我用...
  • 自动轮播图的原理:加入定时器,自动触发事件更换图片 图片存储在一个数组内,更换图片就是更换数组索引从而达到效果 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <...
  • js实现图片切换原理

    2012-05-07 12:23:01
    如上图所示的图片切换效果,样式部分已经完成了,现在求大侠们告知,js实现图片切换原理或者有没有一些框架性的可重用代码 <div class="banner"> <ul class="Slides"> <li> <img src=...
  • 图片轮播大多应用在商品展示中。实现方法:主要通过原生javascript编写。实现原理:上图中看到中间的图片就是要展示的图片,只要将所有图片并排放到一个div中然后再放到展示固定大少的窗口当中,让带所有图片的div...
  • js和CSS写图片切换效果(轮播图)、** 学习前提...清楚图片切换原理。CSS3轮播图body{background:#ccc;}#wrap{width:640px;margin:100px auto;position:relative;padding-top:320px;overflow: hidden;}#wrap>img{...
  • 今天给大家介绍下怎么用 JS 实现图片轮播效果。 原理描述: 使用JS实现轮播的原理是这样的: 假设初始的情况,下图一个网格代表一个图,初始时,显示1 : 当进行一次轮播后,显示变为下图 显示2: 依次类推。 代码...
  • 本文实例介绍了js焦点图片层叠轮播切换滚动效果,分享给大家供大家参考,具体内容如下 效果图:   功能描述: 自定义图片尺寸; 每隔一段时间自动滚动图片; 每次动画执行的时候改变图片的位置,宽高以及其它...
  • Js图片轮播功能DEMO

    2019-04-23 16:58:50
    Js图片轮播功能DEMO
  • // An highlighted block var foo = 'bar';
  • JavaScript 实现图片轮播

    万次阅读 多人点赞 2018-08-11 18:02:53
    今天给大家介绍下怎么用 JS 实现图片轮播效果。 原理描述: 使用JS实现轮播的原理是这样的:  假设初始的情况,下图一个网格代表一个图,初始时,显示1 : 当进行一次轮播后,显示变为下图 显示2: 依次类...
  • 图片轮播是网页上一个比较常见的功能,下面我们来实现他吧 原理很简单: 1:固定的区域,所有的图片重叠,一次只能显示一张图片 2:通过改变图片的zIndex属性改变显示的图片,就可以达到切换的效果了 <!-- ...
  • 轮播图片原理

    2019-09-22 04:13:55
    设置图片src的属性,实现图片切换 image.src = images[i].src; } function pre(){ if (current 0 ){ alert( ' 已经是第一张了 ' ); } else { current -- ; setSrc(current); } } function...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,085
精华内容 11,634
关键字:

js图片轮播原理