使用js做焦点滚动图

最新推荐文章于 2020-07-13 17:25:31 发布

原创最新推荐文章于 2020-07-13 17:25:31 发布 · 548 阅读

0 ·

CC 4.0 BY-SA版权

本文将介绍如何利用JavaScript创建一个动态的焦点滚动图效果。通过编写简单的JS代码，实现图片的自动轮播和导航点切换，提升网页交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下：

<head>
	<title></title>
	<meta charset="utf-8">
	
	<style type="text/css">
        .focus{
        	width:300px;
        	position:relative;
        }
        .btn{
        	position:absolute;
        	right:0px;
        	bottom:0px;
        }
        input{
        	width:25px;
        	height:25px;
        	background:#d9ffff;
        }
	</style>
</head>
<body>
   <div class="focus">
        <div><img src="image/1.jpg" width="350" height="250" id="myimg"></div>
        <div class="btn">
           <input type="button" name="btn" value="1" onclick="changeImg(1)">
           <input type="button" name="btn" value="2" onclick="changeImg(2)">
           <input type="button" name="btn" value="3" onclick="changeImg(4)">
           <input type="button" name="btn" value="4" onclick="changeImg(4)">
           <input type="button" name="btn" value="5" onclick="changeImg(5)">
        </div>
   </div>
<script type="text/javascript">
  var myimg=document.getElementById('myimg');
var input=document.getElementsByName('btn');
var index=1;

function focusview(){
  myimg.src="image/"+index+".jpg";
  for(var i=1;i<=5;i++){
    if(index==i){
      input[index-1].style.background='#ff7575';
    }else{
      input[i-1].style.background='#d9ffff';
    }
  }
  index++;
  if(index==6){
    index=1;
  }
}

var timer=setInterval('focusview()',500);

function changeImg(n){
  index=n;
  myimg.src='image/'+index+'.jpg';
  for(var i=1;i<=5;i++){
    if(n==1){
      input[n-1].style.background="#ff7575";
    }
    else{
      input[i-1].style.background="#d9ffff";
    }
  }
  clearInterval(timer);
  time=setInterval('focusview()',500);
}
</script>
</body>