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 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 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
深入array multisort排序原理的详解
2013/06/18 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
Python continue语句用法实例
2014/03/11 Python
Python自动登录126邮箱的方法
2015/07/10 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
python随机取list中的元素方法
2018/04/08 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
python用post访问restful服务接口的方法
2018/12/07 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
使用Python封装excel操作指南
2021/01/29 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
自主招生自荐信格式
2013/12/03 职场文书
大学系主任推荐信范文
2013/12/24 职场文书
英语感恩演讲稿
2014/01/14 职场文书
吨的认识教学反思
2014/04/27 职场文书
采购部长岗位职责
2014/06/13 职场文书
工程造价专业求职信
2014/07/17 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
村委会贫困证明范文
2014/09/21 职场文书
护林员个人总结
2015/03/04 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL