JS轮播图（移动切换） - 代码天地

JS轮播图（移动切换）

其他 2018-09-12 04:17:17 阅读次数: 0

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34343637/article/details/82423063

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Js简单轮播图</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* 创建相框，宽度与图片的大小一致。padding有5px的空隙 */

#mainBox {
width: 730px;
height: 454px;
padding: 5px;
border: 1px solid #333;
margin: 100px auto;
}
/设置显示内容的宽高与图片的一致。子元素超出部分使用 overflow：hidden 属性进行隐藏/

#innerBox {
width: 100%;
height: 100%;

position: relative;
overflow: hidden;
}

ul {

width: 1000%;
/* 设置为1000%使得所有li图片可以在同一排上 */
list-style: none;
position: absolute;
}

li {
float: left;
}

#index {
bottom: 0;
right: 0;
position: absolute;
margin-bottom: 15px;
margin-right: 10px;
}

span {
background-color: #fff;
padding: 0 3px;
cursor: pointer;
}
</style>
</head>

<body>
<div id="mainBox">
<div id="innerBox">
<ul >
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/6.jpg" alt=""></a></li>
</ul>
<div id="index">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</div>
</div>
<script type="text/javascript">
function spanOver() {

this.style.backgroundColor = "green";
// var moveImg = this.inNum; //自定inNum属性，不可以直接通过this.inNum的方式获取属性
var moveImg = this.getAttribute("inNum"); //使用setAttribute设置自定义属性，必须使用getAttribute获取属性

var imgObj = document.getElementById("innerBox").firstElementChild;

moveElement(imgObj, 10, moveImg (-730));
// console.log();
// imgObj.style.left = moveImg (-730) + "px";
}

function spanOut() {

this.style.backgroundColor = "";

}

function setImg() {
var spanObj = document.getElementById("index").children;
for (var i = 0; i < spanObj.length; i++) {

spanObj[i].setAttribute("inNum", i); //给每个属性添加标签
spanObj[i].onmouseover = spanOver; //为每个span添加鼠标进入函数
spanObj[i].onmouseout = spanOut; //为每个span添加鼠标离开事件
}
}

function moveElement(element, step, target) {
clearInterval(element.timeId);
var current = element.offsetLeft;
element.timeId = setInterval(function() {
//获取当前对象的位置

// console.log(current);
//确定是进行左移还是右移，确定step的方向。当target>current的时候，需要setp 为正。当target< current,setp为负
var mvstep = target - current>0 ? step : -step;
console.log(target - current);
console.log(step);

//进行移动的距离Math.abs(target-current)
if (Math.abs(target - current) > 0) {

Math.abs(target - current) > Math.abs(mvstep) ? current += mvstep : current += (target - current);

// console.log(current);
// console.log(element.offsetLeft);

} else if (Math.abs(target - current) == 0) {
clearInterval(element.timeId);

}element.style.left = current+"px";

}, 20);

}

setImg();
// var getObj = document.getElementById("mainBox");

</script>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_34343637/article/details/82423063

JS轮播图（移动切换）

js实现左右切换轮播图效果

JS实现轮播图点击切换、按钮切换功能

JS 移动端的焦点图切换加载

Tab切换Swiper轮播图

自动切换播放轮播图

jquery实现轮播图切换

eyou轮播图切换颜色

js练习----图片轮播切换

js图片轮播（翻页切换）

js轮播页面,点击切换

移动端web轮播图，包括触摸左右滑动切换效果

Js-轮播图（纯Js）、图片自动切换

js实现左右轮播图切换功能和DOM缓冲运动实现淡入淡出轮播图

原生JS实现旋转轮播图+文字内容切换

JS实战006:在滑动轮播图弹窗中增加图片切换功能

原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果

js实现轮播图——三种切换方式

HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头

tab切换里面做轮播图

可自动切换的轮播图(包含位置指示)

jquery 实现轮播图_滑动切换

轮播图-无左右切换-prototype

小程序切换轮播图显示空白的问题

通过Swiper网站使用轮播图的切换效果

JS轮播图用tween.js动画库完成,并且有切换功能

JS纵轴圆点的图片轮播切换

用原生JS实现图片轮播切换功能

图片左右点击切换轮播js特效

微信小程序——轮播图swiper、1秒切换、自动轮播、无缝切换

今日推荐

中国码农的“35岁魔咒”

蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载

Arc Browser for Windows 1.0 正式 GA

90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！

《美国对全球网络空间安全与发展的威胁和破坏》报告发布

周排行

Java基础复习_day13_Collection集合

2018.11.16 c语言学习经验

且看Java内置四大核心函数式接口

小程序云开发中数据库的数据分段和显示图片

python的函数

Web-JS进阶

【干货】C++常用代码积累笔记大全

Spring的ioc操作与 IOC底层原理

构建之法20191121-11 Scrum立会报告+燃尽图 07

Spring boot之Hello World访问404

每日归档

更多

2024-05-05(0)

2024-05-04(7)

2024-05-03(19)

2024-05-02(0)

2024-05-01(4)

2024-04-30(1)

2024-04-29(40)

2024-04-28(0)

2024-04-27(56)

2024-04-26(39)