JavaScript实现简单轮播图效果
更新时间：2018年12月01日 14:53:16 作者：莉莎的脑瓜疼呀脑瓜疼~
这篇文章主要为大家详细介绍了JavaScript实现图片轮播，左右翻转，图片切换显示等效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现简单轮播图效果的具体代码，可以实现左右翻转，图片切换显示等效果，供大家参考，具体内容如下
效果展示：
代码展示：
<!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使用uploadify来实现多文件上传，具有一定的参考价值，有需要的可以了解一下。2016-11-11
这篇文章主要为大家介绍了JS中的提升机制变量提升函数提升实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了RequireJS多页面应用实例分析的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了JavaScript中怎样创建对象和继承,需要的朋友可以参考下2014-02-02
下面小编就为大家带来一篇js实现各种复制到剪贴板的方法(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
JavaScript通过改变文字透明度实现的文字闪烁效果实例
这篇文章主要介绍了JavaScript通过改变文字透明度实现的文字闪烁效果,结合完整实例形式分析了javascript基于定时器周期性动态修改页面元素属性的相关操作技巧,需要的朋友可以参考下2017-04-04
这篇文章主要给大家介绍了关于不用typsescript如何使用类型增强功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
读取XML文件的方法有很多，在本文为大家详细介绍下使用js是如何做到的，感兴趣的朋友可以参考下本文2013-11-11
这篇文章主要介绍了javascript面向对象三大特征之封装,简单描述了封装的基本概念、原理,并结合实例形式详细分析了javascript面向对象程序设计中封装的用法与相关操作注意事项,需要的朋友可以参考下2019-07-07
这篇文章主要给大家介绍了关于如何利用JavaScript实现二叉搜索树的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
最新评论