原生javascript实现图片轮播切换效果
更新时间：2022年07月13日 10:51:00 作者：#麻辣小龙虾#
这篇文章主要为大家详细介绍了原生javascript实现图片轮播切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了javascript实现图片轮播切换效果的具体代码，供大家参考，具体内容如下
效果如下：
代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#banner{position:relative;width:400px;height:200px;margin:50px auto;overflow: hidden;}
#banner .box{width:400px;height:200px;overflow: hidden;}
#banner .box li img{width:400px;height:200px;overflow: hidden;}
#banner .box li{display:none;}
#banner .box li.active{display:block;}
#banner .static{position:absolute;bottom:0;height:30px;width:390px;padding-right:10px;text-align:right;}
#banner .static span{display:inline-block;width:20px;height:20px;margin:0 2px;line-height:20px;text-align:center;background:#fff;cursor:default;}
#banner .static span.active{background:blue;color:#fff;}
#banner .btn{position:absolute;top:80px;height:40px;width:20px;color:#fff;line-height:40px;text-align:center;background:#000;opacity:.75;cursor:default;}
#banner .next.btn{right:0;}
</style>
</head>
<body>
<div id="banner">
<div class="box">
<ul>
<li class="active">
<a href="#">
<img src="img/banner.jpg"/>
</a>
</li>
<li>
<a href="#">
<img src="img/banner01.jpg"/>
</a>
</li>
<li class="">
<a href="#">
<img src="img/banner02.jpg"/>
</a>
</li>
<li>
<a href="#">
<img src="img/banner03.jpg"/>
</a>
</li>
</ul>
</div>
<div class="static">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="prev btn"><</div>
<div class="next btn">></div>
</div>
<script>
//切换样式
function toggleClass(elem, classStr){
if(elem.className){
if(elem.className.indexOf(classStr) > -1){
elem.className = elem.className.replace(classStr,"");
}else{
elem.className = elem.className + " " + classStr;
}
}else{
elem.className = classStr;
}
}
//获取元素所在兄弟元素的索引
function getIndex(elem){
var index;
var childNodes = elem.parentNode.childNodes;
//获取子元素的元素节点
function childElem(){
var result = [];
for(var i = 0, len = childNodes.length; i < len; i++){
if(childNodes[i].nodeType == 1){
result.push(childNodes[i]);
}
}
return result;
}
//判断元素与子元素是否相等
var child = childElem(elem);
for(var j = 0, lenj = child.length; j < len; j++){
if(child[j] == elem){
index = j;
}else{
console.error("没有找到相应的子元素！");
}
}
//返回索引
return index;
}
//dom选择器
function $(selector){
return document.querySelector(selector);
}
function $$(selector){
return document.querySelectorAll(selector);
}
//对象参数
var int = {
num: null,
speed: null,
timerId: null
};
var liItem = $$("#banner .box li");
var static = $$("#banner .static span");
var btn = $$("#banner .btn");
//初始化默认值
var activeNum = 1;
int.num = liItem.length;
int.speed = 3000;
//切换动作
function toggleItem(num){
toggleClass($("#banner .box li.active"), "active");
toggleClass($("#banner .static span.active"), "active");
//添加下一个激活选项
toggleClass(liItem.item(num), "active");
toggleClass(static.item(num), "active");
}
function autoPlay(){
int.timerId = setInterval(function(){
if(activeNum < int.num){
toggleItem(activeNum);
activeNum++;
}else{
activeNum = 0;
toggleItem(activeNum);
activeNum++;
}
},int.speed);
}
//定时轮播
autoPlay();
//状态点鼠标移入移出效果
for(var i = 0, len = static.length; i < len; i++){
//匿名传参避免产生闭包得不到想要的效果
(function(j){
//鼠标移入效果
static.item(j).onmouseenter = function(){
//停止动画
clearInterval(int.timerId);
var index = getIndex(this);
toggleItem(index);
}
//鼠标移出效果
static.item(j).onmouseleave = function(){
//开始动画
autoPlay();
}
})(i);
}
for(var k = 0, lenk = btn.length; k < lenk; k++){
//上下张按钮移入移出效果
btn.item(k).onmouseenter = function(){
clearInterval(int.timerId);
}
btn.item(k).onmouseleave = function(){
autoPlay();
}
}
//单价击上一张
$(".prev.btn").onclick = function(){
if(activeNum > 0){
activeNum--;
toggleItem(activeNum);
}else{
activeNum = 3;
toggleItem(activeNum);
}
}
//单击下一张
$(".next.btn").onclick = function(){
if(activeNum < int.num){
toggleItem(activeNum);
activeNum++;
}else{
activeNum = 0;
toggleItem(activeNum);
activeNum++;
}
}
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript Dom 绑定事件操作,结合实例形式详细分析了JavaScript实现dom绑定事件的相关实现方法与操作注意事项,需要的朋友可以参考下2019-10-10
现在的前端JavaScript可以说是异常火爆,即使并不准备向前端发展,但是对前端的一些基础知识还是必须有所了解的,先这篇文章主要给大家介绍了关于在HTML中嵌入JS代码的3种方式,需要的朋友可以参考下2022-11-11
关于 JavaScript 的事件绑定在网上已经有不少相关的资料了，今天这篇文章也是在被同事问及的时候才顺便把它记录下来，算是 JavaScript 事件绑定中的一个小技巧，如果能在工作中善加利用，会有出其不意的效果2013-07-07
这篇文章主要为大家详细介绍了javascript实现电商放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
一直都需要的复制到系统剪贴板之IE,firefox兼容版...2007-09-09
DOCTYPE是document type(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。2010-04-04
这篇文章主要为大家详细介绍了javascript html5轻松实现拖动功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
JavaScript已经成为现代Web开发的中流砥柱,实时调试、快速原型设计以及代码的即时反馈通常需要开发者使用多个工具和手段,现代工具的涌现为我们带来了更好的解决方案,而RunJs就是其中之一,本文将带您深入探讨RunJs的特性、用途,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了JavaScript字符串处理常见操作方法,结合实例形式分析了JavaScript字符串操作常见的转换、截取、分割、获取等相关实现技巧,需要的朋友可以参考下2019-11-11
本文给大家介绍Bootstrap 对图片的支持，Bootstrap提供了四个可对图片应用简单样式的class，对Bootstrap四种图片class相关知识感兴趣的朋友一起学习吧2016-01-01
最新评论