原生JS实现手动轮播图效果实例代码

2024-10-20 04:15:53

手动轮播图，为轮播图中的一种，轮播图主要有无缝轮播，手动轮播，延迟轮播，切换轮播等等。。。

轮播图主要用于展现图片，新出商品，词条，又能美观网页。給网页中增加动态效果。

手动轮播，是小编认为最简单的一种轮播方式，既能左右翻页，还能通过悬浮按钮，快速预览图片，所以今天就给大家写一个原生js手动轮播图。

一，利用JavaScript制作手动轮播图，首先排版。

引入默认样式表（可以手写）；

<link rel="stylesheet" href="css/Default style sheet.css" rel="external nofollow" rel="external nofollow" />//本博客有css默认样式表可以下载。

div排版布局：

<body>
 <div id="box">
 <div id="lunbo"><img src="img/1.jpg" id="img"/></div>
 <div id="left"><</div>
 <div id="right">></div>
 <div id="radiu">
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
 </ul>
 </div>
 </div>
 </body>

二，定义div的CSS样式，给div设置宽高，定位。

<style>
 body{
 background: darkturquoise;
 }
 #box{
 height:320px;
 width:480px;
 margin: 3px auto;
 border: 2px solid red;
 }
 #lunbo{
 height: 292px;
 width:453px;
 border: 1px solid yellow;
 margin: 0px auto;
 position: relative;
 }
 #left{
 height: 60px;
 width: 60px;
 font-size: 60px;
 text-align: center;
 line-height: 60px;
 position: absolute;
 top:150px;
 left: 440px;
 color: black;
 }
 #right{
 height: 60px;
 width: 60px;
 font-size: 60px;
 text-align: center;
 line-height: 60px;
 position: absolute;
 top:150px;
 left: 880px;
 color: black;
 }
 #radiu{
 height: 30px;
 width: 240px;
 text-align: center;

 margin: 0px auto;
 }
 #radiu li{
 float: left;
 background: white;
 height: 30px;
 width: 30px;
 line-height: 30px;
 border-radius:50% ;
 margin-right:6px;
 }
 .active{
 background: orange;
 color: ;
 }
 </style>
原生js代码：
<script>
 window.onload=function(){
 var ridiu=document.getElementById("radiu")
 var right=document.getElementById("right");
 var left=document.getElementById("left")
 var img=document.getElementById("img");
 var oli=ridiu.getElementsByTagName("li")
 var arry=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
  var a=null;

  right.onclick=function(){
   a++
   if(a>arry.length-1){
   a=0;
   }

   img.src=arry[a]
  }
  left.onclick=function(){
   a--
   if(a<0){
   a=arry.length-1;
   }

   img.src=arry[a]

  }

  for (var i=0;i<oli.length;i++) {

   oli[i].onclick=function(){
   a++
   if(a==arry.length){
   a=0;
   }
    img.src=arry[a];
   }

  }

 }
 </script>

HTML全部效果代码：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>手动轮播图</title>
 <link rel="stylesheet" href="css/Default style sheet.css" rel="external nofollow" rel="external nofollow" />
 <style>
 body{
 background: darkturquoise;
 }
 #box{
 height:320px;
 width:480px;
 margin: 3px auto;
 border: 2px solid red;
 }
 #lunbo{
 height: 292px;
 width:453px;
 border: 1px solid yellow;
 margin: 0px auto;
 position: relative;
 }
 #left{
 height: 60px;
 width: 60px;
 font-size: 60px;
 text-align: center;
 line-height: 60px;
 position: absolute;
 top:150px;
 left: 440px;
 color: black;
 }
 #right{
 height: 60px;
 width: 60px;
 font-size: 60px;
 text-align: center;
 line-height: 60px;
 position: absolute;
 top:150px;
 left: 880px;
 color: black;
 }
 #radiu{
 height: 30px;
 width: 240px;
 text-align: center;

 margin: 0px auto;
 }
 #radiu li{
 float: left;
 background: white;
 height: 30px;
 width: 30px;
 line-height: 30px;
 border-radius:50% ;
 margin-right:6px;
 }
 .active{
 background: orange;
 color: ;
 }
 </style>
 <script>
 window.onload=function(){
 var ridiu=document.getElementById("radiu")
 var right=document.getElementById("right");
 var left=document.getElementById("left")
 var img=document.getElementById("img");
 var oli=ridiu.getElementsByTagName("li")
 var arry=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
  var a=null;

  right.onclick=function(){
   a++
   if(a>arry.length-1){
   a=0;
   }

   img.src=arry[a]
  }
  left.onclick=function(){
   a--
   if(a<0){
   a=arry.length-1;
   }

   img.src=arry[a]

  }

  for (var i=0;i<oli.length;i++) {

   oli[i].onclick=function(){
   a++
   if(a==arry.length){
   a=0;
   }
    img.src=arry[a];
   }

  }

 }
 </script>
 </head>
 <body>
 <div id="box">
 <div id="lunbo"><img src="img/1.jpg" id="img"/></div>
 <div id="left"><</div>
 <div id="right">></div>
 <div id="radiu">
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
 </ul>
 </div>
 </div>
 </body>
</html>

效果图：

body{
background: darkturquoise;
}
#box{
height:320px;
width:480px;
margin: 3px auto;
border: 2px solid red;
}
#lunbo{
height: 292px;
width:453px;
border: 1px solid yellow;
margin: 0px auto;
position: relative;
}
#left{
height: 60px;
width: 60px;
font-size: 60px;
text-align: center;
line-height: 60px;
position: absolute;
top:150px;
left: 440px;
color: black;
}
#right{
height: 60px;
width: 60px;
font-size: 60px;
text-align: center;
line-height: 60px;
position: absolute;
top:150px;
left: 880px;
color: black;
}
#radiu{
height: 30px;
width: 240px;
text-align: center;
margin: 0px auto;
}
#radiu li{
float: left;
background: white;
height: 30px;
width: 30px;
line-height: 30px;
border-radius:50% ;
margin-right:6px;
}
.active{
background: orange;
color: ;
}

vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）

1.效果图如下 2.vue代码如下 <el-carousel type="card" arrow="always" :loop="false" :initial-index="1" indicator-position="none" :autoplay="false"> <el-carousel-item v-for="(items, index) in it
js实现图片3D轮播效果

3D的图片轮播效果很炫,写到这里只是为了不丢代码,不为别的. 效果预览: html代码: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js实现3D图片逐张轮播幻灯片</title> </head> <body> <style> ul#bcty365_nav{pa
原生JS实现的自动轮播图功能详解

本文实例讲述了原生JS实现的自动轮播图功能.分享给大家供大家参考,具体如下: 轮播图的用处轮播图是现在网站网页上最常见的效果之一,很多网站上都会用到,淘宝京东等等.有些自动选项卡也是需要用到的,而且它的可重复性高.在这里分享一下,用js原生代码,实现轮播图的常见效果! 轮播图的原理一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过定时器实现自动播放. Html布局首先父容器banner存放所有内容,子容器img-list存放图片.子容器list存放按钮小圆点.圆点我使
原生js实现移动端Touch轮播图的方法步骤

Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. /* 清除标签默认边距 */ body,ul,li,ol,img { margin: 0; padding: 0; } /* 清除 ul 等标签前面的"小圆点"
JS实现图片轮播效果实例详解【可自动和手动】

本文实例讲述了JS实现图片轮播效果.分享给大家供大家参考,具体如下: 本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换以下为实现代码: 首先是html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播效果</title&g
JavaScript实现轮播图效果代码实例

这篇文章主要介绍了JavaScript实现轮播图效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 HTML部分:  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <link rel="styleshe
javascript实现图片轮播代码

javascript图片轮播代码,供大家参考,具体内容如下因为自己是新手自学不久,所以代码有很多不规范的地方,请原谅. html部分代码: <div id="head"> <button id="prev" onmousedown="p()" onmouseout="cal()"><</button> <img height="500px" width=&q
原生JS实现手动轮播图效果实例代码

手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一种轮播方式,既能左右翻页,还能通过悬浮按钮,快速预览图片,所以今天就给大家写一个原生js手动轮播图. 一,利用JavaScript制作手动轮播图,首先排版. 引入默认样式表(可以手写): <link rel="stylesheet" href="css/Default st
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)

1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了,样式和逻辑均写在js里. 3.html标签代码,js代码 <div class="slider"> //轮播箭头 <p class="lastpic"><img src="../images/prev.png">&
原生js实现简单的焦点图效果实例

用到一些封装好的运动函数,主要是定时器效果为图片和图片的描述定时自动更换. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul, li, p, h3 { padding: 0; margin: 0; list-style: none; } im
原生js实现简单轮播图效果

本文实例为大家分享了js实现简单轮播图效果的具体代码,供大家参考,具体内容如下效果如下: 分析: 分析效果: 分析实现: 1.通过 document.querySelector('.类名') 的形式获取到装轮播图的大盒子(.carousel).装轮播图左右按钮的标签的父元素(.chevron).获取左右按钮(.chevron-left ..chevron-right).获取放轮播图图片的父元素ul(.carousel-body)[注:这里获取ul而不是回去li,是因为移动轮播图的时候是整个ul
原生js实现焦点轮播图效果

原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图 2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index 3.间隔调用与无限轮播. 4.注意在动画时要停止按钮,或者说上一个动画完毕下一个动画才能执行 5.另外在切换图片的时候,底部的Button动画效果,是从底部开始往上升的,要用到transform:scale()和transform-origin:0 100%两个转换属性,代码如下 <!DOCTYPE html> <html&g
原生js实现无缝轮播图效果

话不多说,请看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播图-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type="ima
原生js实现网易轮播图效果

一.实现效果图二.分析布局主盒子里分上下两个小盒子(1和2). 包含图片的盒子占两张图片的宽(3),处于上盒子中,当前图片在上盒子(1)中,其它图片在盒子(3)的右侧等待播放. 下边的盒子(2)包括了六个小方块及定位在主盒子上的两个箭头. 三.html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>wa
原生js实现旋转木马轮播图效果

话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转木马特效</title> <style type="text/css"> *{margin: 0;padding: 0;list-style:none;} #demo{width:1200px;mar
利用iscroll4实现轮播图效果实例代码

前言 iscroll之所以会诞生,主要是因为无论是在以前的iphone.ipod.android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容.相信很多人和我一样,在使用iscroll的是时候只知道可以手动滑动,不知道iscroll的轮播怎么实现,那么以下就是我做的一个轮播效果,亲测有效: 一.html代码,当然可以动态添加下面的小圆点 <div id="wrapper"> <div id="scroller&qu
原生JS实现的轮播图功能详解

本文实例讲述了原生JS实现的轮播图功能.分享给大家供大家参考,具体如下: 一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2..prev存放向左的箭头,.next存放向右的箭头: 3.pointer意为指示器,存放下方的五个切换按钮,每个切换按钮用span来表示: 4..m-view,意为视窗,即每次看到图片的窗口,它存放以上所有的部件: (二)CS

原生JS实现手动轮播图效果实例代码

相关推荐

随机推荐