js如何点击左右按钮切换图片
发布网友
发布时间：2022-04-22 06:32
共4个回答
懂视网
时间：2022-04-20 05:34
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap {
margin: 150px auto;
position: relative;
width: 400px;
height: 300px;
overflow: hidden;
border: 2px solid #000;
}
.wrap img {
position: absolute;
}
</style>
</head>
<body>
<p>
<img src="pic/1.jpg" style="left:0;top:0" />
<img src="pic/2.jpg" style="left:0;top:100%" />
</p>
<script type="text/javascript" src="js/startmove.js?1.1.10"></script>
<script type="text/javascript">
(function(){
var data = ["pic/1.jpg","pic/2.jpg","pic/3.jpg","pic/4.jpg"];
var img = document.querySelectorAll('img');
var now = 0;
var next = 0;
var imgW = css(img[0],"width");
var imgH = css(img[0],"height");
var isMove = false;
document.addEventListener('keyup', function(e) {
if(isMove){
return;
}
switch(e.keyCode){
case 37:
//向左
toLeft();
break;
case 38:
//向上
toUp();
break;
case 39:
//向右
toRight();
break;
case 40:
//向下
toDown();
break;
}
});
function toLeft(){
next = (now + 1)%data.length;
init([0,0,0,imgW],{left:-imgW},{left:0});
}
function toUp(){
next = (now + 1)%data.length;
init([0,0,imgH,0],{top:-imgH},{top:0});
}
function toRight(){
next = (now - 1 + data.length)%data.length;
init([0,0,0,-imgW],{left:imgW},{left:0});
}
function toDown(){
next = (now - 1 + data.length)%data.length;
init([0,0,-imgH,0],{top:imgH},{top:0});
}
// styles = [0,0,0,0];
// target1 {}
//init 初始位置
function init(styles,target1,target2){
isMove = true;
img[0].src= data[now];
img[1].src= data[next];
css(img[0],"top",styles[0]);
css(img[0],"left",styles[1]);
css(img[1],"top",styles[2]);
css(img[1],"left",styles[3]);
now = next;
move(img[0],target1);
move(img[1],target2,function(){
isMove = false;
});
}
// 移动
function move(el,target,callBack){
startMove({
el:el,
target:target,
type: "easeOut",
time: 1000
});
}
})();
</script>
</body>
</html>
//动画形式公式
var Tween = {
linear: function (t, b, c, d){
return c*t/d + b;
},
easeIn: function(t, b, c, d){
return c*(t/=d)*t + b;
},
easeOut: function(t, b, c, d){
return -c *(t/=d)*(t-2) + b;
},
easeBoth: function(t, b, c, d){
if ((t/=d/2) < 1) {
return c/2*t*t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInStrong: function(t, b, c, d){
return c*(t/=d)*t*t*t + b;
},
easeOutStrong: function(t, b, c, d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeBothStrong: function(t, b, c, d){
if ((t/=d/2) < 1) {
return c/2*t*t*t*t + b;
}
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
elasticIn: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p/4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasticOut: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasticBoth: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d/2) == 2 ) {
return b+c;
}
if (!p) {
p = d*(0.3*1.5);
}
if ( !a || a < Math.abs(c) ) {
a = c;
var s = p/4;
}
else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
if (t < 1) {
return - 0.5*(a*Math.pow(2,10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
return a*Math.pow(2,-10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
},
backIn: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backOut: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 2.70158; //回缩的距离
}
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backBoth: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d/2 ) < 1) {
return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
}
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
bounceIn: function(t, b, c, d){
return c - Tween['bounceOut'](d-t, 0, c, d) + b;
},
bounceOut: function(t, b, c, d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
}
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
},
bounceBoth: function(t, b, c, d){
if (t < d/2) {
return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
}
}
// 获取或者设置样式
function css(el,attr,val){
if(arguments.length == 2){
if(el.currentStyle){
val = el.currentStyle[attr];
} else {
val = getComputedStyle(el)[attr];
}
return parseFloat(val);
} else {
if(attr == "opacity"){
el.style.opacity = val;
el.style.filter = "alpha(opacity= "+val*100+")";
} else if(attr == "zIndex"){
el.style[attr] = Math.round(val);
}else {
el.style[attr] = val + "px";
}
}
}
//执行动画
function startMove(init){
clearInterval(init.el.timer);
var t = 0;
var b = {};
var c = {};
var d = init.time/20;
for( var s in init.target){
b[s] = css(init.el,s);
c[s] = init.target[s] - b[s];
}
init.el.timer = setInterval(function(){
t++;
if(t > d){
clearInterval(init.el.timer);
init.callBack&&init.callBack();
} else {
for(var s in init.target){
var val = Tween[init.type](t,b[s],c[s],d);
css(init.el,s,val);
}
}
},20);
}
热心网友
时间：2022-04-20 02:42
这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态切换图片</title>
</head>
<style>
ul{
padding:0;margin:0;
}
li{
list-style: none;
}
#pic{
position: relative;
width: 400px;
height: 400px;
background-color:red;
margin:100px auto;
background:url('image/1.jpg') no-repeat center;
}
#pic img{
width: 400px;
height: 400px;
}
#pic ul{
width: 50px;
position: absolute;
top: 0;
right: -70px;
}
li{
width: 40px;
height: 40px;
margin-bottom:10px;
background-color: pink;
float: left;
}
#pic span{
position: absolute;
bottom: 10px;
left: 0;
}
#pic p,#pic span{
width: 400px;
height: 20px;
}
#pic p{
position: absolute;
top: 10px;
left: 0;
}
.active{
background-color: red;
}
</style>
<body>
<div id="pic">
<img src="" alt="">
<p>qwrwe</p>
<span>werwer</span>
<ul>
</ul>
</div>
<script>
window.onload=function(){
//存放旧li
var oldLi=null;
var num=0;
var oPic = document.getElementById('pic');
var oImg = oPic.getElementsByTagName('img')[0];
var oUL = oPic.getElementsByTagName('ul')[0];
var oSpan= oPic.getElementsByTagName('span')[0];
var oP = oPic.getElementsByTagName('p')[0];
var oLi= oUL.getElementsByTagName('li');
var arr=['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg'];
var aText = ['图片1','图片2','图片3','图片4'];
for(var i=0;i<arr.length;i++){
//动态添加元素
oUL.innerHTML+='<li></li>';
}
// 旧li就等于当前的
oldLi=oLi[num];
// 初始化
oImg.src=arr[num];
oP.innerHTML=num+1+'/'+arr.length;
oSpan.innerHTML=aText[num];
oLi[num].className='active';
for(var i=0;i<arr.length;i++){
// 给元素自定义属性
//
oLi[i].index=i;
oLi[i].onclick=function(){
// 当元素被点击时图片文字信息都一起变化
oImg.src=arr[this.index];
oP.innerHTML=1+this.index+'/'+arr.length;
oSpan.innerHTML=aText[this.index];
// 清空上一个 当前添加
oldLi.className='';
//将上一个给当前
oldLi=this;
this.className='active';
}
}
}
</script>
</body>
</html>
扩展资料：
注意事项
1、可以通过JS删除和添加hidden属性，改用style.display="none"和style.display="inline"来实现隐藏和显示。
2、button属性，主要的问题时button样式的问题，如何才能做一个好看的button，通过查找找到了设置button相关的值。
border:none; 设置按钮无边框
outline:none;消除按钮点击后出现的表示被点击的边框
background：url(...)按钮背景图片
text-shadow: 0 1px 1px rgba(0,0,0,.3);文字阴影
box-shadow: 0 5px 7px rgba(0,0,0,.2);按钮阴影
border-radius:15px;按钮边框圆角
热心网友
时间：2022-04-20 04:00
javascript脚本语言:可以通过对DOM的操作, 来切换图片.
一: 实现的主要步骤
1: 定义一个图片路径的数组,存放图片的路径 ,同时定义一个字符串数组,保存与图片匹配的文字描述
2:封装两个方法,一个方法(function prevImg(){ })用于显示前一张图片和文字描述,一个(function nextImg(){ })用于显示后一种图片和相关的文字描述.
3:把方法绑定给按钮的点击事件button.onclick = 方法名
二: 其他细节 和注意事项
1: 注意事项一: 图片循环切换
如果图片已经是第一张了,还要查看前一张,那么图片跳到最后一张
如果图片已经是最后一张了,还要查看后一张,那么图片跳到第一张
原因: 这样做可以让图片的显示,较为人性化
2: 注意事项二: 左右按钮可以切换图片 同时也支持键盘的方向键切换图片
原因: 更加人性化和便利用户的操作
三: 完整的代码 和 测试效果图
效果图
完整的参考代码和详细的说明
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {/*设置整个图片框的外观*/
margin: 50px auto 0px;
position: relative;
width: 320px;
height: 480px;
background: #B6C7E5;
border: 10px solid #C0C0C0;
}
a {/*设置链接的样式*/
font-size: 20px;
line-height: 25px;
text-align: center;
text-decoration: none;
width: 25px;
height: 25px;
opacity: 0.8;
filter: alpha(opacity:80);
background: #fff;
color: #000;
top: 228px;
}
a:hover {/*设置鼠标移动到链接上的样式*/
background: #FFFF00;
color: red;
}
#next {/*后一张图片按钮的样式*/
position: absolute;
right: 10px;
}
#prev {/*前一张图片按钮的样式*/
position: absolute;
left: 10px;
}
#p1 {/*顶部页码显示的样式*/
margin: 0px;
position: absolute;
top: 0px;
left: 0px;
}
.txt_style {/*文字的样式*/
text-align: center;
width: 100%;
height: 30px;
line-height: 30px;
font-size: 15px;
background: #000;
color: #fff;
opacity: 0.7;
filter: alpha(opacity:70);
}
#span1 {/*底部文字描述的样式*/
position: absolute;
left: 0px;
bottom: 0px;
}
#img1 {/*图片的大小*/
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
window.onload = function() {
//图片路径
var arr = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg'];
//和图片路径匹配的文字描述
var txt = ['抱熊~抱抱熊', '一起坐坐吧~', '啦~~啦~坐滑梯', '想喝水~', '嗯,喝饱了~~'];
var obt1 = document.getElementById("prev");//前一张图片的按钮
var obt2 = document.getElementById("next");//后一张图片的按钮
var oImg = document.getElementById("img1");//显示图片的标签
var oP = document.getElementById("p1");//显示张数的文字标签
var oSpan = document.getElementById("span1");//显示图片信息的标签
var index = 0;//定位第几张图片的变量
function funTab() {
oImg.src = arr[index];//给图片标签添加图片
oP.innerHTML = (index + 1) + "/" + arr.length;//修改上方的文字信息
oSpan.innerHTML = txt[index];//显示与之匹配的文字信息描述
}
funTab(); //第一次运行时 调用一次,进行初始化
obt1.onclick = prevImg;//当点击前一张按钮时,调用方法 显示前一张图片
obt2.onclick = nextImg;//当点击后一张按钮是,调用方法显示后一张图片
function nextImg() {
index++;//后一张,所以下标要增加1
if(index > arr.length - 1) {//如果移到到数组的最大下标
index = 0;//那么下标为0 . 这样就可以循环显示图片
}
funTab();//显示图片和搭配的文字信息
};
function prevImg() {
index--;//前一张图片.所以下标要减1
if(index < 0) {//如果下标小于 0
index = arr.length - 1;//那么下标修改为最大下标 这样就可以循环显示图片
}
funTab();//显示图片和文字信息
}
//给文档绑定一个按键事件, 来响应键盘的按键
document.onkeydown = function(event) {
//兼容主流浏览器的写法 获取按键事件
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode == 37) { // 按 左方向键 (37 是←方向键码值)
prevImg();//这里是方法调用 ,方法名后要加括号, 立刻调用方法
}
if(e && e.keyCode == 39) { // 按 右方向键(39 是→方向键码值)
nextImg();//这里是方法调用 ,方法名后要加括号, 立刻调用方法
}
};
}
</script>
</head>
<body>
<div id="box">
<p id="p1" class="txt_style">图片数据加载中...</p>
<a id="next" href="javascript:;">></a>
<a id="prev" href="javascript:;"><</a>
<span id="span1" class="txt_style">图片数量计算中...</span>
<img id="img1" />
</div>
</body>
</html>
热心网友
时间：2022-04-20 05:34
document.getElementById("btn").onclick = function(){
document.getElementById("img").src ="c:/img/aa.jpg"
};
