图片自动轮播和手机数码表商品左移

最新推荐文章于 2025-02-17 21:11:46 发布
最新推荐文章于 2025-02-17 21:11:46 发布
阅读量214 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/o_o_D_D/article/details/101203004
版权

一.图片轮播

实现带左右按钮控制焦点图片切换 代码如下

<!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>实现带左右按钮控制焦点图片切换</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
img{border:0;}
.wrapper{
	width: 800px;
	margin: 0 auto;
	padding-bottom: 50px;
}
#focus{
	width: 800px;
	height: 280px;
	overflow: hidden;
	position: relative;
}
#focus ul{
	height: 380px;
	position: absolute;
}
#focus ul li{
	float: left;
	width: 800px;
	height: 280px;
	overflow: hidden;
	position: relative;
	background: #000;
}
#focus ul li div{
	position: absolute;
	overflow: hidden;
}
#focus .preBtn{
	width: 45px;
	height: 100px;	
	left: 0;
	top:90px;
	background:url(images/spirte.png) no-repeat 0 0;
	background-color:#000;
	cursor: pointer;
	opacity:0.4;
	filter:alpha(opacity=40);
}
#focus .nextBtn{
	width: 45px;
	height: 100px;
	right:0px;
	top:90px;
	background:url(images/spirte.png) no-repeat right top;
	background-color:#000;
	cursor: pointer;	
	opacity:0.4;
	filter:alpha(opacity=40);}
</style>

<!-- 请在此处添加javascript代码实现需求 -->
<script type="text/javascript">
  var picArr=new Array();
  picArr[0]="images/01.jpg";
  picArr[1]="images/02.jpg";
  picArr[2]="images/03.jpg";
  picArr[3]="images/04.jpg";
  picArr[4]="images/05.jpg";
  var index=0;
  var timer=0;
  window.onload=showPic;
  function showNext() {
      clearTimeout(timer);
      showPic();
  }
  function showPic() {
      document.getElementById("pic").src=picArr[index];
      if (index<(picArr.length-1)){
          index++;
      }else{
          index=0;
      }
      setTimeout("showPic()",2000)
  }
</script>
</head>

<body>
<div class="wrapper">
  <div id="focus">
    <ul>
      <li><a href="#" target="_blank"><img src="images/01.jpg" alt="" id="pic"/></a>
      <div class="preBtn" onclick="showPre()"></div>
      <div class="nextBtn" onclick="showNext()"></div> 
      </li>      
    </ul>     
  </div>
</div>
</body>
</html>

下面这段代码能让图片自动轮播
在没有加上 window.οnlοad=showPic; 这句代码之前，图片是要点一下才会自动往下播放，有了这一句，就可以自动轮播啦
在这里插入图片描述以下代码可以让图片往左轮播，往左和往右不要同时出现，会乱的。所以往左的时候就把往右的注释掉

<!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>实现带左右按钮控制焦点图片切换</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
img{border:0;}
.wrapper{
	width: 800px;
	margin: 0 auto;
	padding-bottom: 50px;
}
#focus{
	width: 800px;
	height: 280px;
	overflow: hidden;
	position: relative;
}
#focus ul{
	height: 380px;
	position: absolute;
}
#focus ul li{
	float: left;
	width: 800px;
	height: 280px;
	overflow: hidden;
	position: relative;
	background: #000;
}
#focus ul li div{
	position: absolute;
	overflow: hidden;
}
#focus .preBtn{
	width: 45px;
	height: 100px;	
	left: 0;
	top:90px;
	background:url(images/spirte.png) no-repeat 0 0;
	background-color:#000;
	cursor: pointer;
	opacity:0.4;
	filter:alpha(opacity=40);
}
#focus .nextBtn{
	width: 45px;
	height: 100px;
	right:0px;
	top:90px;
	background:url(images/spirte.png) no-repeat right top;
	background-color:#000;
	cursor: pointer;	
	opacity:0.4;
	filter:alpha(opacity=40);}
</style>

<!-- 请在此处添加javascript代码实现需求 -->
<script type="text/javascript">
  var picArr=new Array();
  picArr[0]="images/01.jpg";
  picArr[1]="images/02.jpg";
  picArr[2]="images/03.jpg";
  picArr[3]="images/04.jpg";
  picArr[4]="images/05.jpg";
  var index=0;
  var num2=4;
  var timer=0;
  window.onload=showPic2;
  window.onload=showPic;
  // function showNext() {
  //     clearTimeout(timer);
  //     showPic();
  // }
  function showPre() {
      clearTimeout(timer);
      showPic2();
  }
  function showPic2() {
      document.getElementById("pic").src=picArr[index];
      if (index>0){
          index--;
      } else {
          index=4;
      }
      setTimeout("showPic2()",2000);
  }
  // function showPic() {
  //     document.getElementById("pic").src=picArr[index];
  //     if (index<(picArr.length-1)){
  //         index++;
  //     }else{
  //         index=0;
  //     }
  //     setTimeout("showPic()",2000)
  // }
</script>
</head>

<body>
<div class="wrapper">
  <div id="focus">
    <ul>
      <li><a href="#" target="_blank"><img src="images/01.jpg" alt="" id="pic"/></a>
      <div class="preBtn" onclick="showPre()"></div>
      <div class="nextBtn" onclick="showNext()"></div> 
      </li>      
    </ul>     
  </div>
</div>
</body>
</html>

二.手机数码表商品左移

接下来是手机数码表商品左移，双击左边的商品就可以移到右边的框里
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function selectOne() {
            var leftSelect=document.getElementById("leftSelect")
            var options=leftSelect.options;

            var rightSelect=document.getElementById("rightSelect")


            for (var i=0;i<options.length;i++){
                var option1=options[i];
                if (option1.selected){
                    rightSelect.appendChild(option1)
                }
            }

        }
    </script>
</head>
<body>
<table width="400px" border="1px">
    <tr>
        <td>分类名称</td>
        <td><input type="text" value="手机数码"></td>
    </tr>
    <tr>
        <td>分类描述</td>
        <td><input type="text" value="这里都是手机数码"></td>
    </tr>
    <tr>
        <td>分类商品</td>
        <td>
            <div style="float: left">
                已有商品<br>
                <select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
                    <option>华为</option>
                    <option>小米</option>
                    <option>oppo</option>
                </select>
                <br/>
                <a href="#" onclick="selectOne()">&gt;&gt;</a>
                <a href="#" onclick="selectAll()">&gt;&gt;&gt;</a>
            </div>
            <div style="float: right">
                未有商品<br>
                <select multiple="multiple" id="rightSelect" ondblclick="selectOne()">
                    <option>苹果</option>
                    <option>诺基亚</option>
                </select>
                <br/>
                <a href="#" onclick="selectOne()">&gt;&gt;</a>
                <a href="#" onclick="selectOne()">&gt;&gt;&gt;</a>
            </div>
        </td>
    </tr>
</table>

</body>
</html>

效果图如下
在这里插入图片描述双击以后效果
在这里插入图片描述以下代码可以让商品双击左移和按箭头全部一起移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function selectOneleft() {
            var leftSelect=document.getElementById("leftSelect")
            var options=leftSelect.options;
            var rightSelect=document.getElementById("rightSelect")
            for (var i=0;i<options.length;i++){
                var option1=options[i];
                if (option1.selected){
                    rightSelect.appendChild(option1)
                }
            }

        }

        function selectOneright() {
            var rights=document.getElementById("rightSelect");
            var options=rights.options;
            var lefts=document.getElementById("leftSelect");
            for (var i=0;i<options.length;i++){
                var option=options[i];
                if (option.selected){
                    lefts.appendChild(option);
                }
            }
        }
        function selectAllleft() {
            var leftSelect = document.getElementById("leftSelect") ;
            var size = leftSelect.length;
            for(var i=0;i<size;i++) {
                var optionElement = leftSelect.options[0] ;
                document.getElementById("rightSelect").appendChild(optionElement) ;

            }
        }

        function selectAllright() {
            var rightSelect = document.getElementById("rightSelect") ;
            var size = rightSelect.length;
            for(var i=0;i<size;i++) {
                var optionElement = rightSelect.options[0] ;
                document.getElementById("leftSelect").appendChild(optionElement) ;

            }
        }

    </script>
</head>
<body>
<table width="400px" border="1px">
    <tr>
        <td>分类名称</td>
        <td><input type="text" value="手机数码"></td>
    </tr>
    <tr>
        <td>分类描述</td>
        <td><input type="text" value="这里都是手机数码"></td>
    </tr>
    <tr>
        <td>分类商品</td>
        <td>
            <div style="float: left">
                已有商品<br>
                <select multiple="multiple" id="leftSelect" ondblclick="selectOneleft()">
                    <option>华为</option>
                    <option>小米</option>
                    <option>oppo</option>
                </select>
                <br/>
                <a href="#" onclick="selectOneleft()">&gt;&gt;</a>
                <a href="#" onclick="selectAllleft()">&gt;&gt;&gt;</a>
            </div>
            <div style="float: right">
                未有商品<br>
                <select multiple="multiple" id="rightSelect" ondblclick="selectOneright()">
                    <option>苹果</option>
                    <option>诺基亚</option>
                </select>
                <br/>
                <a href="#" onclick="selectOneright()">&lt;&lt;</a>
                <a href="#" onclick="selectAllright()">&lt;&lt;&lt;</a>
            </div>
        </td>
    </tr>
</table>

</body>
</html>

实现效果如下图
在这里插入图片描述在这里插入图片描述让商品实现一起移动的代码就是下面这段代码

        function selectAllleft() {
            var leftSelect = document.getElementById("leftSelect") ;
            var size = leftSelect.length;
            for(var i=0;i<size;i++) {
                var optionElement = leftSelect.options[0] ;
                document.getElementById("rightSelect").appendChild(optionElement) ;

            }
        }

        function selectAllright() {
            var rightSelect = document.getElementById("rightSelect") ;
            var size = rightSelect.length;
            for(var i=0;i<size;i++) {
                var optionElement = rightSelect.options[0] ;
                document.getElementById("leftSelect").appendChild(optionElement) ;

            }

结束了，over

pushΘ
关注
实训10
weixin_45616067的博客
09-23 149
一.使用Idea做一个淘宝的登录页面 代码如下 淘宝 为确保您账户的安全及正常使用，依《网络安全法》相关要求，6月1日起会员账户需绑定手机。如您还未绑定，请尽快完成，感谢您的理解及支持！ ...
仿京东首页点击轮播图进入唱片页面
L59_1的博客
05-31 3629
            依赖//OkHttp,get请求依赖 implementation 'com.squareup.okhttp3:okhttp:3.4.1' implementation 'com.squareup.okio:okio:1.5.0' //recyclerview依赖 implementation 'com.android.support:recyclerview-v7:27....
day12 js轮播图
ISTUC的博客
08-20 152
js完成导航栏轮播图 html代码 点击调用方法 <!--广告轮播栏--> <div class="width1190"> <ul id="adv"> <li style="display: block;"><img src="images/lunbotu/fang1.jpg" alt="" id="pic">&l...
JavaScript 图像数组
six6de6的博客
11-16 3415
JavaScript 图像数组
window.onload函数用法
飞鱼入梦
05-14 1297
平时做项目 经常需要使用window.onload， 但window.onload 不能同时加载多个函数。 比如; Java代码 function t(){      alert("t")    }    function b(){      alert("b")    }    window.onload =t ;    window.onload ...
javascript中的window的onload事件
雪小白
05-28 3528
window.onload是一个事件，当文档加载完成之后就会触发该事件window.onload = function () { console.log('执行了1'); }; window.onload = function () { console.log('执行2'); }执行结果：执行了1可以看出，window.onload=function(){}方法只能运行一个，后一个...
A星算法求解8数码问题实验.pdf
11-02
本实验的目的是熟悉和掌握启发式搜索的定义、估价函数和算法过程，并利用A*算法求解N数码难题，理解求解流程和搜索顺序。 二、实验内容 1. 八数码问题描述 八数码问题起源于一种游戏：在一个3X3的方阵中放入八个...
基于小脚丫FPGA开发板和四位数码管 的数字时钟设计-电路方案
04-22
6)在调时分和调分秒两个状态，可以通过K4和K2键分别左移右移要调整的位，要调整的位会通过对应位的闪烁来示意。通过K4和 K2左右移动选择好要调整的位以后，就可以通过K1和K3来增大或调小对应的位； 4、代码设计为了...
四路交通灯设计，基于MSP430G2553（IAR和Proteus）
qq_55933691的博客
06-14 5140
路口红绿灯设计，可以通过按键控制秒数增加与减少
蓝桥杯篇---IAP15F2K61S2数码管&LED
道阻且长，行则将至。
02-17 1375
本文仅仅简单介绍了IAP15F1K61S2数码管、LED的使用。数码管是一种常见的显示设备，用于显示数字、字母和部分符号。IAP15F2K61S2 可以通过 GPIO 控制数码管的显示内容，结合扫描技术可以实现多位数码管的动态显示。共阴极数码管：所有段的阴极连接在一起，接低电平时点亮。LED（发光二极管）是单片机开发中最基础的外设之一，常用于状态指示、调试信号或用户交互。IAP15F2K61S2 通过GPIO控制 LED 的亮灭，结合定时器和 PWM功能还可以实现呼吸灯、流水灯等复杂效果。
window.onload的用法
热门推荐
nuan__nuan的博客
06-01 5万+
window.onload: 页面加载完成 一，window.onload的用法： 因为页面中的代码一般情况下按照，从上到下，从左到右的顺序执行。 所以当js代码需要获取页面中的元素时，如果script标签在元素的前面，需要加window.onload；如果script放在了元素后面，就不需要加 window.onload。 例一：点击按钮，实现div变大的效
window.onload用法
KekekeooeyMigo的博客
03-18 3830
在编写js的时候，习惯性的将script放在head中，就经常导致出现使用body中的id报错(xxx is not defined)，后来发现window.onload可以解决这个问题。 这里是编写随机十六进制的颜色为例子。 <script> var color = '0123456789abcdef' var Sj = '' function co() { for (i = 0; i < 6; i++
html怎么把图片左移_css怎么让图片向左移动
weixin_39633102的博客
12-23 1876
在CSS中可以通过“transform:translateX(px)”样式来让图片向左移动，其中transform属性允许我们对元素进行旋转、缩放、移动或倾斜，将值设置为“translateX(px)”即可进行平移。本教程操作环境：Windows7系统、HTML5&&CSS3版本，该方法适用于所有品牌电脑。css3 功能非常强大，几行代码就可以做到非常不错的移动效果，(算不上动态页...
html怎么把图片左移_html元素向左移代码 html
weixin_32786041的博客
12-23 9958
html文字向左移动？这必须在JS中实现，因为CSS无法获取ID属性并做出判断，因此无法用CSS完成。html页面怎么实现把某个元素左移50像素？1。利用CSS中的margin实现了在HTML中定位元素位置并将其向左移动50像素的方法。2。基本用法是设置元素所有边距的宽度或元素每边的边距宽度。三。边距可以接收四个值，即距离的上、右、下和左值。也可以使用“左边距”分别设置距离的左值。代码如下。4本段...
幻灯片效果
sjhnanwang的专栏
09-20 659
var index = 1; var timer; var picSize = 1; function showPic(){  for(var i = 1; i   var pid = '#pic_gg_' + i;   var id = '#gg_' + i;   if(i == index){    $(pid).css({'display':'block'});    $
html怎么把图片左移_css如何向左移动图片
weixin_36028876的博客
12-23 5626
在CSS中，可以使用“transform:translateX(px)”样式将图片向左移动，其中transform属性允许我们旋转、缩放、移动或倾斜元素，值可以设置为“translateX(px)”进行翻译。本教程操作环境:Windows7系统，html 5 &:& amp；CSS3版本，这个方法适用于所有品牌的电脑。推荐:css视频教程Css3非常强大，几行代码就能达到非常好的移...
JavaScript页面优化
hahavslinb的专栏
03-25 533
总结下写页面时需要优化的部分，限新手哈 1.问题：如果JavaScript功能被禁用怎么办--预留退路 coffee coffee 不要使用JavaScript：伪协议，也不要使用”#“记号，这样会在不支持JavaScript的浏览器中使链接无效。 coffee把href设置为一个真实值不但是举手之劳，而且也使页面有了退路。虽然没有激活JavaScript的用户需要点击后退才能重新看
javascript 返回上一页面：onclick="javascript:history.back(-1);"
kungfu_panda的专栏
08-15 5万+
返回上一页 或 返回上一页 如果是用按钮做的话就是： 用图片做的话就是： [color=#FF0000]几秒钟后[/color]自动返回上一页代码:（加入两个head间，3000表示3秒） function go() { window.history.go(-1); } setTimeout("go()",3000); ">返回上一页
if(document.getElementById)
yaoyunting的专栏
09-06 394
判断访问者用的浏览器支不支持document.getElementById这个方法，如果不支持也不至于报错就是没反应罢了 document.all 只有IE支持 document.layers 只有Netscape支持 document.getElementById 是符合W3C标准...
编写程序，利用单片机控制8只数码管分别滚动显示单个数字1–8，程序运行后，单片机控制左边第1个数码首显示1，其他不显示，延时之后，控制左边第2个数码管显示2 ，其他不显示，直至第8个数码管显示8，其他不显示，反复循环。
最新发布
03-31
然后程序的逻辑应该是循环8个数码管，每次选中一个，输出对应的数字，延时一段时间，然后关闭，切换到下一个。需要用到循环结构，比如for循环，控制位选的变化，可能通过左移或右移位选信号来实现。 延时函数需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值