js如何点击左右按钮切换图片

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js如何点击左右按钮切换图片相关的知识，希望对你有一定的参考价值。

最好不要用到jQuery，在线等 求大神指导

这样：

<!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;按钮边框圆角

 参考技术A

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>

 参考技术B document.getElementById("btn").onclick = function()
    document.getElementById("img").src ="c:/img/aa.jpg"
;

如何只用AngularJs实现图片滑动切换？

参考技术A 1. 下载ui-bootstrap.js程序http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js 目前版本是0.11.0
2. 在HTML中引入script
<script type='text/javascript' src='path/to/angular.min.js'></script>
<script src="path/to/ui-bootstrap.min.js"></script>
<script src="path/to/ui-bootstrap-tpls.min.js"></script>
3. HTML示例代码如下：
<!-- 轮播图 -->
<div>
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="slide.image" style="margin:auto;">
<div class="carousel-caption">
<p>slide.text</p>
</div>
</slide>
</carousel>
</div>
4. PostListController.js代码如下：
ftitAppModule.controller('PostListController',
function ($scope)
// 设置轮播图图片间隔
$scope.myInterval = 5000;
// 轮播图数据初始化
var slides = $scope.slides = [];
// 添加轮播图源
slides.push( image: '/Content/images/carousel_1.png', text: '亲爱的你，情人节快乐' );
slides.push( image: '/Content/images/carousel_1.png', text: '亲爱的你，情人节快乐' );
); 参考技术B 首先需要理解ng的指令，剩下的原理都是一样的东西。
1.定义一个swipe指令
2.封装touch事件，ng官方已经提供了ngTouch
3.监测事件，进行CSS控制制作动画过度效果(这个用css3还是老式的easing看自己了)
4.放到页面中使用 参考技术C http://www.jq22.com/jquery-info2643
里面有

以上是关于js如何点击左右按钮切换图片的主要内容，如果未能解决你的问题，请参考以下文章

原生js解决图片点击左右切换（简单轮播图）

Bootstrap轮播图的切换按钮如何制作？

谁能提供一段按钮切换窗口的纯CSS代码？

WPF主窗口按下按钮，关闭当前窗口，切换到另一窗口

JavaScript练习---[JS动态切换图片效果；JS完成简易计算器, 下拉框切换头像, JS 制作简易文本编辑器]

css怎么做出点击箭头切换图片