[css/js]setInterval实现轮播

一.要实现的效果

1.每隔两秒,图片切换到下一张;

2.下面tab也跟着切换到下一个;

3.通过改变margin-left来实现。

二.效果图

三.源码

链接: https://pan.baidu.com/s/192kHO997tiaTH_u7m0wFjA 提取码: 2b7a 复制这段内容后打开百度网盘手机App，操作更方便哦

四.源码:

--------------------------------------------------我是分界线-------------------------------------------------------------------------

<!DOCTYPE html>

<head>

<title>tan切换</title>

</head>

<style>

#box {

position: relative;

width: 820px;

height: 380px;

margin: 100px auto;

background-color: skyblue;

overflow: hidden;

}

#box #content {

position: absolute;

width: 4100px;

height: 100%;

top: 0px;

left: 0px;

}

#box #content .trans {

position: absolute;

width: 4100px;

height: 100%;

top: 0px;

left: 0px;

}

#box #content ul {

width: 100%;

height: 100%;

display: flex;

list-style: none;

padding-left: 0;

margin: 0;

}

#box #content ul li {

width: 820px;

height: 100%;

}

#box>#tabs {

position: absolute;

margin: 0;

width: 100%;

height: 40px;

bottom: 0px;

left: 0px;

}

#box #tabs span {

display: block;

float: left;

width: 164px;

height: 40px;

font-size: 14px;

line-height: 40px;

text-align: center;

background-color: #e3e2e2;

color: #424242;

letter-spacing: 1px;

box-sizing: border-box;

cursor: pointer;

}

#box #tabs span.selected {

color: #ab8e66;

background-color: #f7f6f6;

border-bottom: 2px #cea861 solid;

}

#box .button {

display: flex;

justify-content: center;

align-items: center;

width: 40px;

height: 40px;

border-radius: 50%;

background-color: rgba(0, 0, 0, .7);

}

#box .button.active {

background-color: orangered;

opacity: 0.7;

}

#box #leftButton {

position: absolute;

z-index: 10;

left: 0;

top: 170px;

}

#box #rightButton {

position: absolute;

right: 0;

z-index: 10;

top: 170px;

}

.button span {

display: block;

font-size: 30px;

font-weight: bold;

line-height: 70px;

color: white;

}

</style>

<body>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</div>

<span>王国机神门票</span>

<span>橙色宝箱至臻赛娜</span>

<span>每周限时优惠</span>

</p>

</ul>

</div>

</div>

var oSpan = document.querySelectorAll("#box #tabs span"),

oContent = document.getElementById("content"),

oLi = document.querySelectorAll("#box #content ul li"),

oLeftButton = document.getElementById("leftButton"),

oRightButton = document.getElementById("rightButton");

var clickNum = 0;

var len = oSpan.length;

function change(index) {

oSpan.forEach(function (item, i) {

if (index === i) {

item.classList.add("selected")

} else {

item.classList.remove("selected")

}

oContent.style.marginLeft = -index * 820 + "px";

})

}

//轮播

setInterval(function(){

clickNum++

clickNum = clickNum>len-1?0:clickNum

change(clickNum)

},2000)

</script>

</body>

</html>

--------------------------------------------------我是分界线-------------------------------------------------------------------------

[css/js]setInterval实现轮播_marginleft实现。相关推荐

html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果图片轮播效果: 会自动向左 || 向右切换图片能手动点击按钮切换图片多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...
css+js制作循环轮播图——可滑动
先上效果图: (1)自动切换 (2)手动拖拽 HTML <div id="adbox" class="adbar"><img src=&quo ...
如何通过 HTML+CSS+JS 制作焦点轮播图
序言 [版权声明]:狸狸高度重视原创作者或者著作权人应该享有的著作权,严格遵守国家相关法律法规,系该文章内所引用到的实例并非百分之百对原作品进行还原.因此,即便是您完完整整的复制并粘贴了本文章内所有的 ...
HTML+CSS+JS实现 ❤️图片轮播幻灯片❤️
效果演示: 文末获取源码代码目录: 主要代码实现: CSS样式: @font-face {font-weight: normal;font-style: normal; }.csslider1 { ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
用原生JS实现3D轮播效果
用原生JS实现3D轮播效果实现思路: 先实现无缝轮播效果添加3D效果完善代码增加自动轮播效果效果如下: 视图中显示3张图片,并通过CSS的透视和旋转实现3D效果,当无任何操作时,图片自动循环 ...
html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
JS实现图片轮播效果（自动和手动）
本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换 ps:由于很多同志反馈无法总有各种奇怪的情况,所以有需要的直接下载整个工程:JS ...
原生js进阶版轮播图实现(走马灯效果，无缝衔接)
原生js进阶版轮播图实现(走马灯效果,无缝衔接) 利用原生js手写一个轮播图,是上一篇文章的简易版的一个进阶,本次轮播图主要是利用定位和定时器实现了走马灯效果,并且是左右轮播.实现过程与代码也是很简单 ...

[css/js]setInterval实现轮播_marginleft实现。

[css/js]setInterval实现轮播_marginleft实现。相关推荐

最新文章

热门文章