JavaScript案例——图片的轮播效果、动态生成表格、下拉框左右选择以及动画效果
1.图片的轮播效果
（1）图片轮播的原理：
点击下面的<<按钮或者>>按钮实现轮播
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
.dian{
font-size: 80px;
color: gray;
}
.dian span{
color: coral;
}
style>
<script>
window.onload = function(){
var div = document.getElementsByTagName("div")[0];
var left = document.getElementsByTagName("input")[0];
var right = document.getElementsByTagName("input")[1];
left.onclick = function(){
var arr = div.textContent.split(",");
arr.push(arr[0]);
arr.shift();
div.innerHTML = arr;
}
right.onclick = function(){
var arr = div.textContent.split(",");
arr.unshift(arr[arr.length-1]);
arr.pop();
div.innerHTML = arr;
}
}
script>
head>
<body>
<div>1,2,3,4,5div>
<div class="dian"><span>·span>···div>
<input type="button" value="<<" />
<input type="button" value=">>" />
body>
html>
（2）轮播的实现
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style>
#img_show{
width: 500px;
height: 500px;
border: 1px solid gray;
margin: 10px;
}
#img_show img{
width: 500px;
}
#small_img img{
border: 1px solid gainsboro;
width: 100px;
}
#small_img img:hover{
cursor: pointer;
border: 1px red solid;
}
style>
<script>
function over(obj){
document.getElementById("img").src = obj.src;
}
script>
head>
<body>
<div id="img_show">
<img id="img" src="img/01.jpg" />
div>
<div id="small_img">
<img src="img/01.jpg" onmouseover="over(this)"/>
<img src="img/02.jpg" onmouseover="over(this)"/>
<img src="img/03.jpg" onmouseover="over(this)"/>
<img src="img/04.jpg" onmouseover="over(this)"/>
<img src="img/05.jpg" onmouseover="over(this)"/>
div>
body>
html>
上面代码的图片
效果图
2.动态生成表格
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
function createTable(){
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
var tab = "";
//生成行
for(var i = 0 ; i < parseInt(row) ; i++){
tab += "";
//生成单元格
for(var j = 0 ; j < parseInt(col) ; j++){
tab += "";
tab += "";
tab += " ";
}
tab += " ";
}
tab += "
";
document.getElementById("showTable").innerHTML = tab;
}
script>
head>
<body>
行：<input type="text" id="row" /><br />
列：<input type="text" id="col" /><br />
<input type="button" value="生成" onclick="createTable();" />
<div id="showTable">div>
body>
html>
3.下拉框左右选择
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
select{
width: 100px;
height: 150px;
}
div{
float: left;
margin:auto 10px ;
}
input{
width: 50px;
margin: 5px auto;
}
style>
<script>
/*向右边添加元素*/
function selToRight(){
//获取两个下列框标签对象
var selLeft = document.getElementById("selLeft");
var selRight = document.getElementById("selRight");
//获取左边下列框中的option对象
var ops = selLeft.getElementsByTagName("option");
for(var i = 0 ; i < ops.length ; i++){
var o = ops[i];
if(o.selected == true){
selRight.appendChild(o);
i--;
}
}
}
/*向左边添加元素*/
function selToLeft(){
var selLeft = document.getElementById("selLeft");
var selRight = document.getElementById("selRight");
var ops = selRight.getElementsByTagName("option");
for(var i = 0 ; i < ops.length ; i++){
var o = ops[i];
if(o.selected == true){
selLeft.appendChild(o);
i--;
}
}
}
/*全部添加到右边*/
function selAllToRight(){
//获取两个下列框标签对象
var selLeft = document.getElementById("selLeft");
var selRight = document.getElementById("selRight");
//获取左边下列框中的option对象
var ops = selLeft.getElementsByTagName("option");
for(var i = 0 ; i < ops.length ; i++){
var o = ops[i];
selRight.appendChild(o);
i--;
}
}
/*全部添加到左边*/
function selAllToLeft(){
var selLeft = document.getElementById("selLeft");
var selRight = document.getElementById("selRight");
var ops = selRight.getElementsByTagName("option");
for(var i = 0 ; i < ops.length ; i++){
var o = ops[i];
selLeft.appendChild(o);
i--;
}
}
script>
head>
<body>
<div class="sel01">
<select id="selLeft" multiple="multiple" >
<option>篮球option>
<option>足球option>
<option>乒乓球option>
<option>排球option>
<option>羽毛球option>
select>
div>
<div class="btn">
<input type="button" value=">" onclick="selToRight();" /><br />
<input type="button" value="<" onclick="selToLeft();"/><br />
<input type="button" value=">>" onclick="selAllToRight();" /><br />
<input type="button" value="<<" onclick="selAllToLeft();" /><br />
div>
<div class="sel02">
<select id="selRight" multiple="multiple">
select>
div>
body>
html>
4.动画效果（就是鼠标悬停在上面会出现详细的信息）
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
.img-show{
border: 1px solid black;
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
img{
width: 200px;
}
.mess{
border: 1px solid red;
width: 200px;
height: 100px;
background: white;
opacity: 0.7;
position: absolute;
top: 200px;
left: 0px;
}
style>
<script>
var t = 0;
var mess;
var show_id,hiddn_id;
window.οnlοad=function(){
var imgshow = document.getElementsByClassName("img-show")[0];
mess = document.getElementsByClassName("mess")[0];
imgshow.onmouseenter = function(){
t = mess.offsetTop;
/*mess.style.top = "100px";*/
messShow();
}
imgshow.onmouseleave = function(){
t = mess.offsetTop;
/*mess.style.top = "200px";*/
messHiddn();
}
}
//信息展示
function messShow(){
t -= 10;
mess.style.top = t+"px";
show_id = setTimeout("messShow()",20);
if(t<=100){
clearTimeout(show_id);
}
}
//信息隐藏
function messHiddn(){
t += 10;
mess.style.top = t+"px";
hiddn_id = setTimeout("messHiddn()",20);
if(t>=200){
clearTimeout(hiddn_id);
}
}
script>
head>
<body>
<div class="img-show">
<img src="img/01.jpg" />
<div class="mess">产品详情介绍div>
div>
body>
html>
