【案例】图片无缝轮播效果

知识点：

1、scrollLeft属性

2、克隆节点

3、定时器

4、鼠标移入移除事件

<!DOCTYPE html>

<head>

<style>

margin: 0;

padding: 0;

}

body{

background:#000;

}

li{

list-style: none;

}

#show{

width: 940px;

height: 450px;

margin: 0 auto;

margin-top: 60px;

/* overflow-x: scroll; */

overflow: hidden;

}

#show #wrap{

width: 7520px;

height: 450px;

}

#show #wrap ul{

width: 3760px;

height: 450px;

float: left;

}

#show #wrap ul>li{

float: left;

}

</style>

</head>

<body>

<ul>

</ul>

<!-- <ul>

</ul> -->

</div>

</body>

var show = document.getElementById('show');

var ul = document.querySelector('ul');

var wrap = document.getElementById('wrap');

var ulWidth = ul.offsetWidth;

console.log(ulWidth);

//克隆ul并追加到wrap

wrap.appendChild(ul.cloneNode(true));

//设置无缝轮播的步径

var step = 1;

//设置轮播标志

var run;

//将无缝轮播封装为一个函数

function autoRun(){

run = setInterval(function(){

var newScroolLeft = show.scrollLeft + step;

if(newScroolLeft >= ulWidth){

newScroolLeft = 0;

}

show.scrollLeft = newScroolLeft + step;

},20);

}

//设置页面进入初始化

autoRun();

//鼠标移入停止轮播

show.onmouseenter = function(){

clearInterval(run);

}

//鼠标离开继续轮播

show.onmouseleave = function(){

autoRun();

}

</script>

</html>

转载于:https://www.cnblogs.com/sherryStudy/p/wufneg_lunbo.html

【案例】图片无缝轮播效果相关推荐

js实现图片3D轮播效果（收藏）
3D的图片轮播效果很炫,写到这里只是为了不丢代码,不为别的. 效果预览: html代码: <head> <meta http-equiv="Content-Type&quo ...
jQuery图片切换,轮播效果(仿迅雷首页FLASH效果)
jQuery很不错的JS框架,现在已经更新到 1.2.6 了,添加了很多新特性,修正了大量的BUG. 今天,借助他的威力, 用js实现迅雷首页(http://xunlei.com/)FLASH轮换的效 ...
React实现卡片横向无缝轮播效果(umi4)
实现原理实现效果图安装依赖 npm i styled-components #ts下 npm i @types/styled-components 代码 import React from &qu ...
JavaScript实现无缝轮播图效果
通过原生js实现无缝轮播效果. 思路: 1.利用html+css完成轮播图片,按钮,底部小点的整体效果的布局. 2.通过原生js完成图片轮播,无缝自动切换,底部小点随图片切换而切换. 步骤1: 建立无 ...
javaScript小案例------js实现无缝轮播图效果篇
原生js书写无缝轮播图 javaScript无缝轮播图思路及源码无缝轮播图效果总体思路下面附上代码: html css animate.js index.js javaScript无缝轮播图思路 ...
用原生JS实现3D轮播效果
用原生JS实现3D轮播效果实现思路: 先实现无缝轮播效果添加3D效果完善代码增加自动轮播效果效果如下: 视图中显示3张图片,并通过CSS的透视和旋转实现3D效果,当无任何操作时,图片自动循环 ...
左右无缝轮播html,JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: 无缝轮播图 *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;h ...
用animation实现无缝轮播图
如果需要用js实现无缝轮播,请点传送门用animation实现即表示是纯css实现,首先上效果图: 下面给出示例代码: <!DOCTYPE html> <html lang=&qu ...
vue项目里面视频与图片的轮播
需求仿照天猫等实现视频与图片的轮播效果运用的控件有: 1.视频播放器:腾讯云点播超级播放器官方文档地址(一定要看) 2.轮播插件:iSlider----这是一个表现出众,轻量且高性能,无任何库依赖 ...

【案例】图片无缝轮播效果

【案例】图片无缝轮播效果相关推荐

最新文章

热门文章