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>

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

时间: 2017-08-21

angularjs实现首页轮播图效果

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

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

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

基于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

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轮播图代码

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在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.

利用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实现移动开发轮播图、相册滑动特效

使用方法: 分别引用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实现无限循环轮播图效果

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

完美实现八种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"

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

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

用vue写一个仿简书的轮播图的示例代码

1.先展示最终效果: 2.解决思路 Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.动画效果交给transition完成.可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示: 3.代码实现 各个slide的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $

原生js实现轮播图特效

轮播图也称为焦点图,是网页中比较常见的网页特效. 功能需求: ​ 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. ​ 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理. ​ 3.图片播放的同时,下面小圆圈模块跟随一起变化. ​ 4.点击小圆圈,可以播放相应图片. ​ 5.鼠标不经过轮播图,轮播图也会自动播放图片. ​ 6.鼠标经过,轮播图模块, 自动播放停止. 此文章的代码为一个完整的轮播图的实现代码,复制即可运行 实现效果由于大小问题无法上传,可自行观看淘宝或京东首页轮

Vue中如何实现轮播图的示例代码

这个功能我感觉在任何项目中都会涉及到,今天我就把我的实现方法跟大家分享一下,有不对的地方还请指出,我好更新. 下面是整体代码,我把轮播图单独做了一个组件,大家可以拿来就用,具体代码如下: <template> <div class="content"> <div class="focus"> <!-- focus begin --> <swiper :options="swiperOption"

原生js实现轮播图

本文实例为大家分享了js轮播图的具体实现代码,供大家参考,具体内容如下 CSS: <style> * { margin: 0; padding: 0; list-style: none; text-decoration: none; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif; } body { background: #eee; } #Bigbox { width: 720p

原生JS实现轮播图效果

学习前端也有一小段时间了,当初在学习javascript的时候,练手的一个轮播图实例,轮播图也是挺常见的了. 着是通过获取图片偏移量实现的,也实现了无缝切换,还有一点问题就是没有加上图片切换的时候的延迟了. html: <div id="container"> <div id="list" style="left: -600px;"> <img src="../image/1.jpg" alt=&

js实现轮播图的完整代码

今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->

js实现轮播图的两种方式(构造函数、面向对象)

本文实例为大家分享了js实现轮播图的具体代码,供大家参考,具体内容如下 1.构造函数 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type='text/css'> *{ margin:0; padding:0;} #wrap{ width:500px; height:360px; margin:1

使用Require.js封装原生js轮播图的实现代码

index.html页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>require.js封装轮播图</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } #banner{ width: 830px; he

原生JS实现旋转轮播图+文字内容切换效果【附源码】

废话不多说,直接上图看效果: 需求: 点击左右按钮实现切换用户图片与信息: 原理: 点击右侧左侧按钮,把3号的样式给2号,2号的给1号,1号的给5号,5号的给4号,4号的样式给3号,然后根据现在是第几张图片切换成对应的文字: 步骤: 1.让页面加载出所有盒子的样式: 2.把两侧按钮绑定事件(调用同一个方法,只有一个参数,true为正向旋转,false为反向旋转): 3.书写函数: 操作函数:左按钮:删除第一个,添加到最后一个: 右按钮:删除最后一个,添加到第一个: 4.定义变量,根据对应变量切换