初学js之多组图片切换实例

需求是以上效果展示。话不多说，直接代码显示，不涉及代码优化。已实现功能为目的。

先看html部分：

<body>

    <div class="dream" id="dream">

        <div class="top">

            <input type="button" value="上一组">

            <input type="button" value="下一组">

        </div>

        <div class="footer">

            <div class="b_left" id="b_left">

                <img src="" alt="">

                <span>图片描述加载中...</span>

                <strong>图片数量计算中...</strong>

            </div>

            <div class="b_right" id="b_right">

                <img src="" alt="">

                <span>图片描述加载中...</span>

                <strong>图片数量计算中...</strong>

            </div>

        </div>

    </div>

</body>

然后是CSS部分：

     <style>

     body{

         background-color: #000;

     }

     *{

          margin: 0;

         padding: 0;

     }

     .dream{

         width: 875px;

         height: 500px;

         background: url(bg.jpg)no-repeat;

         margin: 50px auto;

     }

     .dream .top{

         padding-top: 50px;

         margin-left: 20px;

     }

     .dream .top input{

         width: 75px;

         border-radius: 5px;

         background: #fff;

     }

     .footer{

         width: 810px;

         height:350px;

         background-color: #ccc;

         margin: 10px 39px 0 25px;

     }

     .footer .b_left{

         float: left;

         width: 495px;

         height: 350px;

         background-color: #fff;

         text-align: center;

         position: relative;

     }

     .footer .b_left span,

     .footer .b_right span{

         position: absolute;

         width: 90px;

         bottom: 50px;

         left: 50%;

         margin-left:-45px;

         font: 600 13px "微软雅黑";

     }

     .footer .b_right{

         float:right;

         width: 300px;

         height: 350px;

         background-color: #fff;

         margin-left: 10px;

         text-align: center;

          position: relative;

     }

     .footer .b_left img{

         position: absolute;

         top:20px;

         left: 20px;

         width: 450px;

         height: 250px;

     }

     .footer .b_right img {

         position: absolute;

         top:20px;

         right: 20px;

         width: 250px;

         height: 250px;

     }

     .footer .b_left strong,

     .footer .b_right strong{

         position: absolute;

         bottom: 20px;

         left: 20px;

         font: 300 12px "宋体";

     }

     </style>

最后是JS部分：

 <script>

        window.onload = function(){

            var oDream = document.getElementById('dream');

            var aInp = oDream.getElementsByTagName('input');//找到所有input

            var oBlft = document.getElementById('b_left');

            var oImg = oBlft.getElementsByTagName('img')[0];

            var oSpan = oBlft.getElementsByTagName('span')[0];

            var oStrong = oBlft.getElementsByTagName('strong')[0];

            var oBright = document.getElementById('b_right');

             var oImg2 = oBright.getElementsByTagName('img')[0];

            var oSpan2 = oBright.getElementsByTagName('span')[0];

            var oStrong2 = oBright.getElementsByTagName('strong')[0];

            var arrUrl_l = ['img1/belle.jpg','img1/city.jpg','img1/flower.jpg','img1/rouse.jpg','img1/smail.jpg'];

            var arrUrl_r =['img2/load.jpg','img2/pencil.jpg','img2/watch.jpg','img2/water.jpg'];

            var arrText_l = ['第一组第1张', '第一组第2张', '第一组第3张', '第一组第4张', '第一组第5张'];

            var arrText_r = ['第二组第1张','第二组第2张','第二组第3张','第二组第4张'];

            var num = 0;

            //初始化左边

            oImg.src = arrUrl_l[num];

            oSpan.innerHTML = arrText_l[num];

            oStrong.innerHTML = (num+1) + ' / ' + arrUrl_l.length;

            oImg.onclick = function(){

                if(num == arrUrl_l.length){

                    num = 0;

                }

                oImg.src = arrUrl_l[num];

                oSpan.innerHTML = arrText_l[num];

                oStrong.innerHTML = (num + 1) + ' / ' + arrUrl_l.length;

                num++;

            }

            //初始化右边

            oImg2.src = arrUrl_r[num];

            oSpan2.innerHTML = arrText_r[num];

            oStrong2.innerHTML = (num + 1) + ' / ' + arrUrl_r.length;

            oImg2.onclick = function () {

                if (num == arrUrl_r.length) {

                    num = 0;

                }

                oImg2.src = arrUrl_r[num];

                oSpan2.innerHTML = arrText_r[num];

                oStrong2.innerHTML = (num + 1) + ' / ' + arrUrl_r.length;

                num++;

            }

            //关联左右图片联动

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

                aInp[i].index = i;

                aInp[i].onclick = function(){

                     if (this.index == arrUrl_l.length) {

                        this.index = 0;

                    }

                    oImg.src = arrUrl_l[this.index];

                    oSpan.innerHTML = arrText_l[this.index];

                    oStrong.innerHTML = (this.index + 1) + ' / ' + arrUrl_l.length;

                     if (this.index == arrUrl_r.length) {

                        this.index = 0;

                    }

                    oImg2.src = arrUrl_r[this.index];

                    oSpan2.innerHTML = arrText_r[this.index];

                    oStrong2.innerHTML = (this.index + 1) + ' / ' + arrUrl_r.length;

                    this.index++;

                }

            }

        }

    </script>

初学js之多组图片切换实例的更多相关文章

原生js实现多组图片切换
这几天一直在练习原生js写效果,需要理清自己的逻辑,做了一个切换多组图片的效果: css样式: * { margin: 0; padding: 0; } body { background: #303 ...
极简的js点击组图切换效果
程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...
js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
js基础练习--控制多组图片切换
js基础练习题,一个按钮控制两组图片的切换,做这题的时候我忽然想到了将num1.mun2……都存放在一个数组中,根据索引值匹配到对应相应组的图片,这样不管有多少组图片都简单的搞定切换,可惜js基础都没 ...
js应用之实现图片切换效果
数组的操作与应用数组的定义 var 数组名=new Array(); //创建空数组 var 数组名=new Array(size);//创建指定数组长度的数组 var 数组名=new Array( ...
JS案例练习：图片切换+切换模式
先附图: CSS样式部分: <style> *{;} body{font-family:'Microsoft YaHei';} .menu{margin:20px auto 0; widt ...
JS实现简单的图片切换效果
使用图片进行点击切换效果 <!doctype html> <html lang="en"> <head> <meta charset=&q ...
js带缩略图的图片切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
2018.7.2 如何用js实现点击图片切换为另一图片，再次点击恢复到原图片
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

随机推荐

6 - 编码解码器-一种channelHandler
6.1 解码器 6.1.1 抽象类-ByteToMessageDecoder decode(ChannelHandlerContext ctx, ByteBuf in, List<Object& ...
JSP标签和JSTL标签注意点
1.转发和重定向问题当前项目:/Test 转发路径:"/"根目录表示当前项目"/Test","/login.jsp"就是"/Te ...
Nginx支持PHP的CI框架
1.找到CI库的配置文件修改 $config['base_url'] = 'http://test.example.com'; $config['uri_protocol'] = 'PATH_I ...
C#中接口的深入浅出【转】
C#中接口的深入浅出假设我们公司有两种程序员:VB程序员,指的是用VB写程序的程序员,用clsVBProgramer这个类表示:Delphi程序员指的是用Delphi写程序的程序员,用clsDelp ...
jQuery获取url
JS获取当前页面的URL信息设置或获取对象指定的文件名或路径. <script> alert(window.location.pathname) </script> 设置或获 ...
c#基础函数传值
随便新建个控制台程序做个演示! 1.最基础,最普通的传值方式: static void Main(string[] args) { ); Console.WriteLine("x:" ...
agc016A - Shrinking(字符串贪心)
题意题目链接给出一个字符串,每次操作可以使得字符串缩短一位,且第$i$位必须要保证与变换前的这一位或下一位相同, 问使得整个字符串全相同最少的操作次数 Sol 300P的题我都要想10min啊,还 ...
ajax实现异步请求的过程
var xhr; xhr = new XMLHttpRequest(); //创建一个异步对象 xhr.open("Get", "test.a ...
JavaScript获取URL参数公共方法
写一个JavaScript获取URL参数的通用方法,可以把它放到常用方法的JS文件中调用,直接上代码例子,新手可以学习一下! <!DOCTYPE html> <html lang=& ...
javascript设计模式之装饰者模式
/* * 装饰者模式提供比继承更有弹性的替代方案 * 在不改变原构造函数的情况下,添加新的属性或功能 */ //需要装饰的类(函数) function Macbook() { this.cost = ...

初学js之多组图片切换实例

初学js之多组图片切换实例的更多相关文章

随机推荐

热门专题