编程 Javascript

JavaScript实现简单轮播图效果

Posted in Javascript onDecember 01, 2018

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

效果展示：

JavaScript实现简单轮播图效果

代码展示：

<!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>

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

JavaScript实现简单轮播图效果

- Author -

莉莎的脑瓜疼呀脑瓜疼~

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript document.execCommand() 常用解析

Dec 14 Javascript

EasyUI的treegrid组件动态加载数据问题的解决办法

Dec 11 Javascript

基于jquery的滚动条滚动固定div(附演示下载)

Oct 29 Javascript

js 控制图片大小核心讲解

Oct 09 Javascript

extjs每个组件要设置唯一的ID否则会出错

Jun 15 Javascript

JavaScript及jquey实现多个数组的合并操作

Sep 06 Javascript

封装获取dom元素的简单实例

Jul 08 Javascript

在JS中a标签加入单击事件屏蔽href跳转页面

Dec 16 Javascript

ES6 javascript中Class类继承用法实例详解

Oct 30 Javascript

浅谈webpack 构建性能优化策略小结

Jun 13 Javascript

微信小程序转发事件实现解析

Oct 22 Javascript

jQuery HTML获取内容和属性操作实例分析

May 20 jQuery

jQuery-ui插件sortable实现自由拖动排序

Dec 01 #jQuery

jquery拖拽自动排序插件使用方法详解

Jul 20 #jQuery

vue实现移动端悬浮窗效果

Dec 01 #Javascript

vue拖拽组件使用方法详解

Dec 01 #Javascript

vue实现div拖拽互换位置

Jul 29 #Javascript

vue插件draggable实现拖拽移动图片顺序

Dec 01 #Javascript

vue.draggable实现表格拖拽排序效果

Dec 01 #Javascript