如何在JS滚动图片中加上左右箭头
下图是源代码和我想加入的箭头样式....才学网页不久，现在想在JS滚动图片里加上可以点的左右箭头，请问该怎么加<!DOCTYPEhtml><html><head><met...
下图是源代码和我想加入的箭头样式....
才学网页不久，现在想在JS滚动图片里加上可以点的左右箭头，请问该怎么加
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
width:400px;
border: 1px solid #ff1943;
}
</style>
</head>
<body>
<img src="../img/1.jpg">
<script>
var mying=new Array("1.jpg","2.jpg","3.jpg");
var i=0;
var tupian=document.getElementsByTagName("img")[0]
setInterval("changeimg()",2000)
function changeimg()
{
tupian.setAttribute("src","../img/"+mying[i++]);
if(i==mying.length)i=0;
}
</script>
</body>
</html> 展开
才学网页不久，现在想在JS滚动图片里加上可以点的左右箭头，请问该怎么加
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
width:400px;
border: 1px solid #ff1943;
}
</style>
</head>
<body>
<img src="../img/1.jpg">
<script>
var mying=new Array("1.jpg","2.jpg","3.jpg");
var i=0;
var tupian=document.getElementsByTagName("img")[0]
setInterval("changeimg()",2000)
function changeimg()
{
tupian.setAttribute("src","../img/"+mying[i++]);
if(i==mying.length)i=0;
}
</script>
</body>
</html> 展开
2个回答
展开全部
前后分别设置一个伪元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
width:400px;
height:250px;
border: 1px solid #ff1943;
}
div {
width: 400px;
height:250px;
position: relative;
}
div:hover:before{
content:"<";
display:block;
width:30px;
height:60px;
background:rgba(0,0,0,.3);
position:absolute;
top:40%;
left:0px;
text-align:center;
line-height:60px;
font-size:30px;
color:#fff;
}
div:hover:after{
content:">";
display:block;
width:30px;
height:60px;
background:rgba(0,0,0,.3);
position:absolute;
top:40%;
right:-1px;
text-align:center;
line-height:60px;
font-size:30px;
color:#fff;
}
</style>
</head>
<body>
<div>
<img src="1.jpg">
</div>
<script>
window.onload = function() {
var mying = new Array("1.jpg","2.jpg","3.jpg");
var i = 0;
var tupian = document.getElementsByTagName("img")[0]
setInterval(changeimg,2000);
function changeimg() {
tupian.setAttribute("src",mying[i++]);
if(i == mying.length) {
i=0;
}
}
};
</script>
</body>
</html>
这是我按你的代码上修改的，你可以看下。图片用的是我自己的，所以图片路径不一样，注意。
更多追问追答
追问
恩恩，请问您的这个 点了后图片可以手动进行左右切换么...我路径改完之后点框框图片没有反应，还是自己2秒一刷....如果您可以切换的话，那我再自己研究下，可能是我改的时候出了问题
追答
我没有加点击后的，可以切换图片的事件，只是实现了一个hover效果。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
width:400px;
border: 1px solid #ff1943;
}
#wrap>*{
float:left;
}
#wrap>a{
text-decoration:none;
}
</style>
</head>
<body>
<div id="wrap">
<a href="###" onclick="lef()">
<<
</a>
<img src="../img/1.jpg">
<a href="###" onclick="rig()">
>>
</a>
</div>
<script>
var mying=["1.jpg","2.jpg","3.jpg"];
var i=0;
var tupian=document.getElementsByTagName("img")[0];
var inte=setInterval("changeimg()",2000);
function changeimg()
{
tupian.src="../img/"+mying[i++];
if(i==mying.length) {i=0;}
}
wrap.onmouseenter=function(){
clearInterval(inte);
}
wrap.onmouseleave=function(){
inte=setInterval("changeimg()",2000);
}
var lef=function(){
--i;
i=i<0?mying.length-1:i;
tupian.src="../img/"+mying[i];
}
var rig=function(){
++i;
i=i>mying.length-1?0:i;
tupian.src="../img/"+mying[i];
}
</script>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
