js鼠标点击按钮图片移动(js鼠标移动到图片上图片改变)
js实现左右点击按钮，图片横向循环移动，一次移动一张
给个思路吧,设装着所有图片的层为boxa,
它的父层为boxb,
点击移动的时候你把boxa向左移一张图片的宽度就是了,也就是点击的时候更改boxa的margin-left为负数,
boxb要设置over-flow为hidden
,
boxa要足够长
js鼠标单击实现图片切换？
1、提前准备一组图片，将图片名称设置一定规律：例如 ?img1.jpg、img2.jpg
2、编写鼠标点击事件
3、在鼠标点击时间里，判断鼠标点击次数
4、根据不同次数，显示不同的图片
script?type="text/javascript"
????$(function(){
????????var?items=new?Arrays("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg");
????????var?i=0;
????????$("#bgImage").click(function(){
????????????i++;
????????????if(iitems.length){
????????????????i=1;
????????????}
????????????$(this).prop("src","img"+i+".jpg");
????????});
????});
/script
javascript怎么实现鼠标点击一张图片之后，图片跟随鼠标走的效果
这是一个拖动元素的效果
div id="div" style="width:100px;height:100px;background-color:red;position: absolute;cursor: move"
/div
script
window.onload=function(){
var div=document.getElementById("div");
div.onmousedown=function(e){ //把onmousedown改成onclick就是你要的效果
var x= e.clientX-div.offsetLeft;
var y= e.clientY-div.offsetTop;
document.onmousemove=function(e){
div.style.left= e.clientX-x+"px";
div.style.top= e.clientY-y+"px";
}
document.onmouseup=function(){
document.onmousemove=null;
}
}
}
/script
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;按钮边框圆角
js控制鼠标移动图片
图片外边套一个和图片大小一样的div，设置div样式相对定位、或者绝对定位看你需要，div里边的标签用绝对定位，鼠标拖动时移动这个div，里边标签是会随着移动的，代码就别跟我要了，我比较懒得写这个
100分求助，js点击按钮图片左右移动问题
你确定是按钮移动了？
检查是不是浏览器开始没有滚动条，点击按钮后内容变多了
出现滚动条让你误以为图片移动了？