欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS轮播图实现简单代码

程序员文章站 2022-04-29 08:09:49
本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1、首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这...

本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下

思路:

1、首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片
2、container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的left值使得其显示的图片发生变化。
3、图片的轮播使用定时器,通过定时器改变list的left值是的图片循环展示
4、当鼠标滑动到图片上时,清除定时器,图片停止轮播,当鼠标移出时继续进行轮播
5、图片上有一组小圆点用于与当前显示的图片相对应,同时可以通过点击的方式查看对应的图片
6、图片可以通过点击进行左右滑动显示

代码:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>轮播图</title>
 <style type="text/css">
  .container{
   margin:0 auto;
   width:600px;
   height:400px;
   position: relative;
   overflow: hidden;
   border:4px solid gray;
   box-shadow: 3px 3px 5px gray;
   border-radius:10px;
  }
  .list{
   width:4200px;
   height:400px;
   position: absolute;
   top:0px;
  }
  img{
   float:left;
   width:600px;
   height:400px;
  }
  .dots{
   position: absolute;
   left:40%;
   bottom:30px;
   list-style: none;
  }
  .dots li{
   float:left;
   width:8px;
   height:8px;
   border-radius: 50%;
   background: gray;
   margin-left:5px
  }
  .dots .active{
   background: white;
  }
  .pre,.next{
   position: absolute;
   top:40%;
   font-size:40px;
   color:white;
   text-align:center;
   background: rgba(128,128,128,0.5);
   /* display:none;*/
  }
  .pre{
   left:30px;
  }
  .next{
   right:30px;
  }
 </style>
</head>
<body>
 <div class="container">
  <div class="list" style=" left:-600px;">
   <img src="img/5.jpg">
   <img src="img/1.jpg">
   <img src="img/2.jpg">
   <img src="img/3.jpg">
   <img src="img/4.jpg">
   <img src="img/5.jpg">
   <img src="img/1.jpg">
  </div>
  <ul class="dots">
   <li index=1 class="active dot"></li>
   <li index=2 class="dot"></li>
   <li index=3 class="dot"></li>
   <li index=4 class="dot"></li>
   <li index=5 class="dot"></li>
  </ul>
  <div class="pre"><</div>
  <div class="next">></div>
 </div>
<script type="text/javascript">
 var index=1,timer;
 function init(){
  eventbind();
  autoplay();
 }
 init();
 function autoplay(){
   timer =setinterval(function () {
   animation(-600);
   dotindex(true);
  },1000)
 }
 function stopautoplay() {
  clearinterval(timer);
 }
 function dotindex(add){
  if(add){
   index++;
  }
  else{
   index--;
  }
  if(index>5){
   index = 1;
  }
  if(index<1){
   index = 5;
  }
  dotactive();
 }
 function dotactive() {
  var dots = document.getelementsbyclassname("dot");
  var len = dots.length;
  for(var i=0 ;i<len ;i++){
   dots[i].classname = "dot";
  }

  for(var i=0;i<len;i++){
   /*此处可以不用parseint,当不用全等时*/
   if(index === parseint(dots[i].getattribute("index"))){
    dots[i].classname = "dot active";
   }
  }
 }
 function eventbind(){
  /*点的点击事件*/
  var dots = document.getelementsbyclassname("dot");
  var len = dots.length;
  for(var i=0;i<len;i++){
   (function(j){
    dots[j].onclick = function(e){
     var ind = parseint(dots[j].getattribute("index"));
     animation((index - ind)*(-600));/*显示点击的图片*/
     index = ind;
     dotactive();
    }
   })(i)
  }
  /*容器的hover事件*/
  var con = document.getelementsbyclassname("container")[0];
  /*鼠标移动到容器上时,停止制动滑动,离开时继续滚动*/
  con.onmouseover = function (e) {
   stopautoplay();
  }
  con.onmouseout =function(e){
   autoplay();
  }
  /*箭头事件的绑定*/
   var pre = document.getelementsbyclassname("pre")[0];
   var next = document.getelementsbyclassname("next")[0];
   pre.onclick = function (e) {
    dotindex(false);
    animation(600);
   }
  next.onclick = function (e) {
   dotindex(true);
   animation(-600);
  }
 }
 function animation(offset){
  var lists = document.getelementsbyclassname("list")[0];
  var left = parseint(lists.style.left.slice(0,lists.style.left.indexof("p"))) + offset;
  if(left<-3000){
   lists.style.left = "-600px";
  }
  else if(left>-600){
   lists.style.left = "-3000px";
  }
  else{
   lists.style.left = left+"px";
  }
 }

</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。