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 相关文章推荐
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
js严格模式总结(分享)
Aug 22 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
详解JS函数防抖
Jun 05 Javascript
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
You might like
用PHP编写PDF文档生成器
2006/10/09 PHP
apache php模块整合操作指南
2012/11/16 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
JS前端笔试题分析
2016/12/19 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
在Python中使用成员运算符的示例
2015/05/13 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
Python中的面向接口编程示例详解
2021/01/17 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
预备党员半年考察意见
2015/06/01 职场文书
升职自荐书
2019/05/09 职场文书
HTML+JS实现在线朗读器
2022/02/15 Javascript
HttpClient实现文件上传功能
2022/08/14 Java/Android