js点击按钮切换图片4张(js鼠标点击切换图片)
关于JS的4张图片切换问题
!DOCTYPE?html
html
head
meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"
titleRunJS/title
style
#num?span.active?{?background-color:?red;?}?
#num?span.wait?{?background-color:?black;?}
/style
script?type="text/javascript"
????var?imgArray?=?['img/game1.png',?'img/game2.png',?'img/game3.png',?'img/game4.png'];
????var?spanArray?=?document.getElementsByTagName('span');
????var?img;
????var?index?=?0;
????var?t;
????function?init()?{
????????img?=?document.getElementById("img");
????????img.src?=?"img/game1.png";
????????startRotate();
????}
????function?showImg()?{
????????img.src?=?imgArray[index];
????????for?(var?i?=?0;?i??spanArray.length;?i++)?{
????????????spanArray[i].className?=?"wait";
????????}
????????spanArray[index].className?=?"active";
????}
?
????function?rotate()?{
????????index++;
????????if?(index?=?imgArray.length)?{
????????????index?=?0;
????????}
????????showImg();
????}
????function?startRotate()?{
????????t?=?setInterval(rotate,?2000);
????}
????function?pauseRotate(obj)?{
????????clearInterval(t);
//?估计是innerText不兼容导致出错
????????index?=?getIndex(obj);
????????showImg();
????};
//获取在父元素中的索引即可
var?getIndex?=?function(obj){
var?par?=?obj.parentElement;
var?pc?=?par.children;
for(var?i=0;ipc.length;i++){
if(pc[i]==obj){
return?i;
}
}
return?-1;
};
/script
/head
body?onload="init()"?
img?id="img"?/
div?id="num"
span?class="active"?
onmouseover="pauseRotate(this)"?onmouseout="startRotate()"1/span
span?class="wait"?onmouseover="pauseRotate(this)"?onmouseout="startRotate()"2/span
span?class="wait"?onmouseover="pauseRotate(this)"?onmouseout="startRotate()"3/span
?span
????class="wait"?onmouseover="pauseRotate(this)"?onmouseout="startRotate()"4/span
/div
/body
/html
怎么用jquery的方法点击4个按钮更换4张不同图片
方法一：
!DOCTYPE?html
html?lang="en"
head
????meta?charset="UTF-8"
????titleTitle/title
????script?src="jquery-1.10.1.min.js"/script
????script
????????$(function?()?{
????????????$('button').click(function?()?{
????????????????$(this).siblings('span').css('display','none');
????????????????$(this).next().css('display','inline-block');
????????????})
????????})
????/script
????style
????????span?{
????????????display:?none;
????????}
????/style
/head
body
div
????button?type="button"按钮一/button
????span图片一/span
????button?type="button"按钮二/button
????span图片二/span
????button?type="button"按钮三/button
????span图片三/span
????button?type="button"按钮四/button
????span图片四/span
/div
/body
/html
方法二：
!DOCTYPE?html
html?lang="en"
head
????meta?charset="UTF-8"
????titleTitle/title
????script?src="jquery-1.10.1.min.js"/script
????script
????????$(function?()?{
????????????$('button').each(function?(index)?{
????????????????$(this).attr('index',index);
????????????????$('span').eq(index).attr('index',index);
????????????????$(this).click(function?()?{
????????????????????$('span').hide();
????????????????????if?($(this).attr('index')?===?$('span').eq(index).attr('index'))?{
????????????????????????$('span').eq(index).css('display','inline-block');
????????????????????}
????????????????})
????????????})
????????})
????/script
????style
????????span?{
????????????display:?none;
????????}
????/style
/head
body
div
????button?type="button"按钮一/button
????button?type="button"按钮二/button
????button?type="button"按钮三/button
????button?type="button"按钮四/button
/div
div
????span图片一/span
????span图片二/span
????span图片三/span
????span图片四/span
/div
/body
/html
方法有很多，主要看你如何布局吧
JS特效 按钮实现图片左右轮换（总共4张图，img1.jpg，img2.jpg，img3.jpg，img4.jpg）
var picID = 0;//换成网页中那幅图在picURL中的序号(记得要从0开始数)
var picURL = ["images/img1.jpg","images/img2.jpg","images/img3.jpg"];//将图片链接地址放进来，数量随意
function showimg(str){
if(str=="L"){
if(picID==0){
picID = picURL.length-1;
document.getElementById("advimg").src = picURL[picID];
}else{
document.getElementById("advimg").src = picURL[--picID];
}
}else if(str=="R"){
if(picID==(picURL.length-1)){
picID = 0;
document.getElementById("advimg").src = picURL[picID];
}else{
document.getElementById("advimg").src = picURL[++picID];
}
}
}
js如何点击左右按钮切换图片
这样：
!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=""
pqwrwe/p
spanwerwer/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;iarr.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;iarr.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;按钮边框圆角