商品左右移动js

最新推荐文章于 2023-10-24 12:54:02 发布

原创最新推荐文章于 2023-10-24 12:54:02 发布 · 466 阅读

0 ·

CC 4.0 BY-SA版权

java旅程专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现商品图片在页面中左右滑动的效果，详细讲解了关键代码和实现逻辑，帮助开发者创建动态的商品展示体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function selectLtoR(){
				var leftSelect=document.getElementById("leftSelect");
				var rightSelect=document.getElementById("rightSelect");
				var options=leftSelect.options;
				for (var i=0;i<options.length;i++) {
					var option1=options[i];
					if(option1.selected){
						rightSelect.appendChild(option1);
					}
				}
			}
			function selectLtoRAll(){
				var leftSelect=document.getElementById("leftSelect");
				var rightSelect=document.getElementById("rightSelect");
				var options=leftSelect.options;
				for (var i=options.length-1;i>=0;i--) {//倒序
					var option1=options[i];
					rightSelect.appendChild(option1);
				}
			}
			function selectRtoL(){
				var leftSelect=document.getElementById("leftSelect");
				var rightSelect=document.getElementById("rightSelect");
				var options=rightSelect.options;
				for (var i=0;i<options.length;i++) {
					var option1=options[i];
					if(option1.selected){
						leftSelect.appendChild(option1);
					}
				}
			}
			function selectRtoLAll(){
				var leftSelect=document.getElementById("leftSelect");
				var rightSelect=document.getElementById("rightSelect");
				var options=rightSelect.options;
				for (var i=options.length-1;i>=0;i--) {
					var option1=options[i];
					leftSelect.appendChild(option1);
				}
			}
		</script>
	</head>
	<body>
		<table border="1px" width="400px">
			<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 id="leftSelect" multiple="multiple" ondblclick="selectLtoR();">
							<option>华为</option>
							<option>小米</option>
							<option>oppo</option>
							<option>中信</option>
						</select>
						<br />
						<a href="#" onclick="selectLtoR();">>></a><br />
						<a href="#" onclick="selectLtoRAll();">>>></a>
					</div>
					<div style="float: right;">
						未有商品<br />
						<select id="rightSelect" multiple="multiple" ondblclick="selectRtoL();">
							<option>苹果</option>
							<option>洛基亚</option>
							<option>波导</option>
							<option>海信</option>
						</select>
						<br />
						<a href="#" onclick="selectRtoL();"><<</a><br />
						<a href="#" onclick="selectRtoLAll();"><<<</a>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="提交" />
				</td>
			</tr>
		</table>
	</body>
</html>