JavaScript实现简单轮播图效果

本文实例为大家分享了js实现简单轮播图效果的具体代码，可以实现左右翻转，图片切换显示等效果，供大家参考，具体内容如下

效果展示：

代码展示：

<!doctype html>

<html>
<!--
 学习功能：使用JavaScript实现图片轮播，左右翻转，图片切换显示等。
 author: lisa于2018-5-30
 -->
<title>
 <meta charset="utf-8">
</title>

<body>
 <div class="maindiv">
 <style>
  * {
  margin: 0px;
  padding: 0px;
  }

  .shidian {
  width: 600px;
  height: 300px;
  position: relative;
  }

  .shidian>#shidian_img {
  width: 100%;
  height: 100%;

  }

  .shidian>#shidian_img li {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  }

  .shidian>#shidian_img img {
  width: 100%;
  height: 100%;
  }

  .shidian>#shidian_nav li {
  float: left;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 1px #ffff00 solid;
  margin-left: 10px;
  text-align: center;
  line-height: 20px;
  list-style: none;
  }

  .shidian>#shidian_nav {
  position: absolute;
  right: 10px;
  bottom: 10px;
  }

  .shidian>#shidian_nav .active {
  background: 0000ff;
  color: black;
  cursor: pointer;
  }

  .shidian .img_nav {
  position: absolute;
  top: 140px;
  width: 100%
  }

  .shidian .img_nav .left {
  cursor: pointer;
  }

  .shidian .img_nav .right {
  cursor: pointer;
  float: right;
  }
 </style>
 <div class="shidian">
  <ul id="shidian_img" onmouseover="stop_img()" onmouseout="start_img()">
  <li><img src="./image/1.jpg" /></li>
  <li><img src="./image/3.jpg" /></li>
  <li><img src="./image/2.jpg" /></li>
  <li><img src="./image/4.jpg" /></li>
  </ul>
  <ul id="shidian_nav">
  <li class="active" onmouseover="show_img1(this);">1</li>
  <li class="active" onmouseover="show_img1(this);">2</li>
  <li class="active" onmouseover="show_img1(this);">3</li>
  <li class="active" onmouseover="show_img1(this);">4</li>
  </ul>
  <div class="img_nav">
  <span class="left" onclick="left_img()"><<</span>
  <span class="right" onclick="right_img()">>></span>
  </div>
 </div>

 <script>
  index = 0;
  imgs = document.getElementById("shidian_img").children; //获得图片节点
  navs = document.getElementById("shidian_nav").children; // 获得右下图片导航的节点

  //下一张轮播图片
  function next_img() {
  index++;
  if (index >= imgs.length) {
   index = 0;
  }
  show_log();
  }

  //正常显示图片
  function show_log() {
  for (i = 0; i < imgs.length; i++) {
   imgs[i].style.display = "none";
   imgs[i].className = "";
  }
  //console.log(index)
  if (index >= imgs.length) {
   index = 0;
  }
  imgs[index].style.display = "block";
  imgs[index].className = "active";
  }
  show_log();
  timer = setInterval(next_img, 1000);

  function stop_img() {
  clearInterval(timer);
  }

  function start_img() {
  timer = setInterval(next_img, 1000);
  }

  //随机切换显示图片
  function show_img1(obj) {
  stop_img();
  index = getIndex(obj.parentNode, obj);
  show_log();

  }

  //向左翻图片
  function left_img() {
  stop_img();
  index--;
  if (index < 0) index = imgs.length - 1;
  show_log();
  start_img();
  }

  //向右翻图片
  function right_img() {
  stop_img();
  index++;
  if (index > imgs.length) index = 0;
  show_log();
  start_img();
  }

  //获得当前的节点
  function getIndex(parent, obj) {
  //console.log(obj.innerHTML);
  e = parent.children;
  for (i = 0; i < e.length; i++) {
   if (e[i] == obj) {
   return i;
   }
  }
  }
 </script>
 </div>
</body>

</html>

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

赞 (0)

相关推荐

  • JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)

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

  • 基于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实现轮播图的示例代码

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

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

  • 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轮播图实现简单代码

    本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播

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

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

  • 原生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

  • zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题

    在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用. 它是一个纯javascript工具,不需要跟其它js库一起导入,同时兼容jQuery和zepto,压缩版的大小只有6kb很适合移动端的开发,它的git地址:https://github.com/thebird/swipe 在git上对其的使用方式介绍的相当清楚,关键代码如下 <div id='slider' class='swipe'>

  • 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实现支持手机滑动切换的轮播图片效果实例

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

随机推荐