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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
小程序中this.setData的使用和注意事项
Aug 28 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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
You might like
php 多关键字 高亮显示实现代码
2012/04/23 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
Python使用chardet判断字符编码
2015/05/09 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
PyTorch实现AlexNet示例
2020/01/14 Python
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
招聘与培训专员岗位职责
2014/01/30 职场文书
优秀学生评语大全
2014/04/25 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
大学英语专业求职信
2014/06/21 职场文书
2015年班级工作总结范文
2015/04/03 职场文书