原生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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js图片轮播手动切换效果
利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示.推荐商品之类的栏目.它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果. 不需要调用jquery,初始化简单,使用非常的简单,便利. 实例效果: js代码: <script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhot
-
Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）
在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件. 在这12个jQuery插件中,最常用的有图片轮播car
-
原生js实现图片层叠轮播切换效果
本文实例介绍了js焦点图片层叠轮播切换滚动效果,分享给大家供大家参考,具体内容如下 效果图: 功能描述: 自定义图片尺寸: 每隔一段时间自动滚动图片: 每次动画执行的时候改变图片的位置,宽高以及其它属性也要跟随着变化: 鼠标移上图片,显示当前图片的详细信息: 点击按钮向前向后滚动: 详细代码: html代码: <!DOCTYPE html> <!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topi
-
vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）
1.效果图如下 2.vue代码如下 <el-carousel type="card" arrow="always" :loop="false" :initial-index="1" indicator-position="none" :autoplay="false"> <el-carousel-item v-for="(items, index) in it
-
js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
-
javascript实现图片自动和可控的轮播切换特效
演示图: 需要引入的文件 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/1/css/style.css"> <script type="text/javascript" src="http://hovertree.com/texiao/js/1/js/koala.min.1
-
js实现轮播图自动切换
本文实例为大家分享了js实现轮播图自动切换的具体代码,供大家参考,具体内容如下 先看效果图 第一种 //点击按钮,序号变化 showIdx++; if (showIdx == imgArr.length) { showIdx = 0; } //所有盒子左移动 for (let i = 0; i <items.length; i++) { items[i].style.left = parseFloat(items[i].style.left) - lo
-
js实现图片轮播切换效果
最近在b站上学习的时候,学到了一个用原生js实现图片轮播切换效果的实战,码下来收藏 上图是这个小实战的效果图,整个小实战所实现的功能是图片自动轮播切换.点击上下键图片切换上下图片.点击右下角圆点切换相应图片.点击主菜单显示相应子菜单内容. html页面布局 <body> <!--主区域,存放所有需要元素--> <div id="main" class="main"> <!-- 导航菜单 --> <div clas
-
JS实现多重选项卡切换轮播图
轮播动画来提升页面的颜值和交互性能,下面我们将一起学习利用html , css和Javascript等前端开发基础知识来制作一个简单的轮播图. 轮播图简介:在一个网站的某一特定模块,通过电脑上鼠标点击或鼠标移入.手机上手指滑动后,可以分别展示不同的图片,这个模块就叫做轮播模块. (做的不好的地方欢迎各位大佬批评指正,感觉有帮助的同学麻烦给颗星星哦~) html布局部分: <div id="box"> <div class="scenery pic"
-
js实现点击切换和自动播放的轮播图
本文实例为大家分享了js实现点击切换和自动播放的轮播图,供大家参考,具体内容如下 轮播图案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&