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

效果展示：

\"\"

代码展示：

<!doctype html>
 
<html>
<!-- 
 学习功能：使用 实现图片轮播，左右翻转，图片切换显示等。
 author: lisa于2018-5-30
 -->
< >
 <  charset=\"utf-8\">
</ >
 
<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\"  =\"stop_img()\"  =\"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\"  =\"show_img1(this);\">1</li>
  <li class=\"active\"  =\"show_img1(this);\">2</li>
  <li class=\"active\"  =\"show_img1(this);\">3</li>
  <li class=\"active\"  =\"show_img1(this);\">4</li>
  </ul>
  <div class=\"img_nav\">
  <span class=\"left\"  =\"left_img()\"><<</span>
  <span class=\"right\"  =\"right_img()\">>></span>
  </div>
 </div>
 
 < >
  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;
   }
  }
  }
 </ >
 </div>
</body>
 
</html>

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

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章