JS轮播图实现简单代码

本文实例为大家分享了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>

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

(0)

相关推荐

  • 原生js实现移动开发轮播图、相册滑动特效

    使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script

  • 完美实现八种js焦点轮播图(上篇)

    本文分为上下篇为大家分享了js焦点轮播图八种经典效果,供大家参考,具体内容如下 基本布局: <div id="box"> <ul id="ul"> <li style='display:block;'><img src="images/1.jpg" alt=""></li> <li><img src="images/2.jpg"

  • angularjs实现首页轮播图效果

    本文实例为大家分享了angularjs轮播图展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS carousel</title> <link href="http://libs.ba

  • 利用AngularJs实现京东首页轮播图效果

    先来看看效果图 其实写一个轮播图还是蛮简单的,我想了两种种方法,来实现轮播图(实际上细分是5种,但是其中两种是操作dom原生,三种是利用AngularJs的动画,所有归为两大类),等我写出来,大家好好理解一下就好. 那我先写一种,第一种是不使用angularjs的动画模块,只使用指令来完成动画的切换.在这里面就是在指令里操作dom元素,超级easy. 示例代码 <!DOCTYPE html> <html lang="en" ng-app="lunbo&quo

  • js实现点击左右按钮轮播图片效果实例

    本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un

  • 原生js实现无限循环轮播图效果

    知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张 也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px

  • 原生js实现轮播图的示例代码

    很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea

  • JS实现左右无缝轮播图代码

    废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu

  • js实现支持手机滑动切换的轮播图片效果实例

    本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

  • 简单的JS轮播图代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

  • 完美实现八种js焦点轮播图(下篇)

    继续上一篇的学习完美实现八种js焦点轮播图(上篇),供大家参考,具体内容如下 5.定时上下无缝滚动 思路: 1.思路1: 将ul复制一份,但滚动一半距离重新归位:(大型网站性能略低): 2.思路2: 通过相对定位,将第一个li移动到最后,再将ul和Li归位. window.onload=function(){ var oBox=document.getElementById('box'); var oUl=document.getElementById('ul'); var aLi_u=oUl.

  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图

    一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u

随机推荐