无缝轮播的制作

最新推荐文章于 2023-02-20 20:49:33 发布
最新推荐文章于 2023-02-20 20:49:33 发布
阅读量92 收藏
点赞数
文章标签： javascript Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ikunshizhe/article/details/128654763
版权

首先是正常的开头和样式设置：

```

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

*{

padding: 0;

margin: 0;

}

.wrapper{

margin: 0 auto;

width: 600px;

height: 250px;

overflow: hidden;

position: relative;

}

ul{

list-style: none;

width: 2400px;

position: absolute;

top: 0;

left: 0;

}

ul::after{

content: '';

display: block;

height: 0;

visibility: hidden;

clear: both;

}

li{

float: left;

width: 600px;

}

img{

width: 600px;

height: 250px;

display: block;

}

p {

width: 100%;

height: 10px;

position: absolute;

bottom: 5px;

left: 0;

text-align: center;

z-index: 100;

}

p span {

display: inline-block;

width: 10px;

height: 10px;

background-color: black;

border-radius: 50%;

vertical-align: top;

cursor: pointer;

margin: 0 5px;

}

p span.active {

background-color: red;

}

a {

text-decoration: none;

display: block;

width: 40px;

height: 80px;

color: white;

background: black;

font-size: 30px;

line-height: 80px;

text-align: center;

position: absolute;

z-index: 100;

opacity: .3;

}

#leftBtn,

#rightBtn {

top: 50%;

margin-top: -40px;

}

#leftBtn {

left: 20px;

}

#rightBtn {

right: 20px;

}

</style>

</head>

<body>

设置图片：

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

a href="javascript:;" id="leftBtn"<</a>

a href="javascript:;" id="rightBtn"></a>

</div>

取外置js

<script src="./34_move.js"></script>

<script>

/*

1.先把第一张图片复制出来，放到最后

2.如果实现无缝轮播 要先判断 再递增或者递减

*/

var box = document.getElementsByClassName('wrapper')[0]

var ul = document.getElementsByTagName('ul')[0]

var lis = document.getElementsByTagName('li')

var spans = document.getElementsByTagName('span')

var leftBtn = document.getElementById('leftBtn')

var rightBtn = document.getElementById('rightBtn')

var count = 0

var timer = null

var picWidth = lis[0].clientWidth;

/*

clone：复制

Node：节点（标签）

cloneNode()：复制一个标签 如果没有参数，只复制标签，只复制里面的内容

如果有参数为true，复制标签的同时，把标签下面的内容也复制出来

*/

ul.appendChild(lis[0].cloneNode(true))

//

ul.style.width = lis.length * picWidth + 'px'

timer = setInterval(auto,3000)

//

box.onmouseover = function(){

clearInterval(timer)

}

box.onmouseout = function(){

timer = setInterval(auto,3000)

}

//

rightBtn.onclick = function(){

auto()

}

leftBtn.onclick = function(){

if(count < 0){

count = lis.length - 1

ul.style.left = -count * picWidth + 'px'

}

count--

change()

}

//

for(var i = 0;i < spans.length;i++){

spans[i].index = i

spans[i].onclick = function(){

this.className = 'active'

count = this.index

change()

}

}

//

function auto(){

if(count >= lis.length - 1){

count = 0

ul.style.left = 0 + 'px'

}

count++

change()

}

//

function change(){

move(ul,{

left: -count * picWidth

})

for(var i = 0;i < spans.length;i++){

spans[i].className = ''

}

if(count == spans.length){

spans[0].className = 'active'

}else{

spans[count].className = 'active'

}

}

</script>

</body>

</html>

ikunshizhe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery图片轮播（无缝衔接）
07-25
这个图片轮播是基于jQuery开发的一个无缝衔接，可以点击左右进行滑动、可以点击下标进行滑动、也可以进行自动轮播
html css js实现无缝轮播图思路及其实现
qq_56337139的博客
12-26 1394
上图黄色方块代表轮播图的排列位置，默认图片从start开始，切换到end的时候再往后走一个图片的宽度，到达chang的位置。此时通过js把盒子的transition过渡属性的时间置为，然后让盒子的位置切换到start的位置（此时看不到过度动画），再通过js把盒子的过渡属性置为n秒（n为滚动时间），继续自动切换，此为一个循环。
js无缝轮播图，有过渡效果（详细解析）
qq_59599812的博客
02-20 1295
此时需要注意，需要在判断中用到setTimeout延时器，过渡效果有几秒，延时器也要写几秒。因为有过渡效果，不然会有问题，要把过渡清除，设置延时器是把延时器的时间当做过渡去使用。1.无缝轮播思路：复制轮播图第一张到最后一张，当轮播图到最后一张时，需要判断，到第一张。
完整无缝轮播图的原理和实现
ggbee_的博客
07-11 7218
无缝轮播图 原理： 首先需要一个装所有图片的盒子。然后通过移动装图片的盒子来使图片显示出来。 需要封装一个移动框架，在图片移动时有时间缓冲。 如果需要感觉图片移动时连贯的话，就需要将第一张图片复制一张到最后面，然后当图片切换到最后一张图片时候，立马将图片跳转至第一张，就会给我们一种图片是连贯的错觉。 需要用到的知识点：定位，浮动，动画，定时器 2.实现 <!DOCTYPE html> <html lang="en"> <head> .
html实现轮播的方法,js实现轮播图的两种方式(构造函数、面向对象)
weixin_30800615的博客
06-22 483
本文实例为大家分享了js实现轮播图的具体代码，供大家参考，具体内容如下1、构造函数*{ margin:0; padding:0;}#wrap{width:500px;height:360px;margin:100px auto;position:relative;}#pic{width:500px;height:360px;position:relative;}#pic img{width: 10...
原生JS实现轮播图 - 有缝轮播详解
我是段段的博客
01-19 1035
前言 现在前端有好多的插件都能实现轮播图的效果，而且动画样式也比较新颖好看，但是使用原生js实现轮播图算是比较基础的，今天就来写写有缝轮播图和无缝轮播图，并说说二者之间的差别 先来看下实现的页面样式 然后先看页面DOM结构 <div id="box"> <!-- ul用来存放需要展示的图片 注意修改图片的路径--> <ul> <li><img src="../../img/1.png" alt=""></li
无缝滚动轮播图.zip
05-30
本资源为《最全面的无缝滚动轮播图》配套资源，本资源提供了博文中的所有的源码。从轮播图的HTML出发到JavaScript的逐步实现，让你一步步深入走入动画的魅力，感知动画的强大，同时对动画产生浓郁的兴趣。逐步帮你...
jQuery响应式图片无缝轮播插件.zip
07-04
这是一款简单实用的jQuery响应式图片无缝轮播插件。该插件会将要轮播的图片制作为背景图片，它支持ie8 浏览器，具有无限、无缝轮播等特点。
jQuery响应式图片无缝轮播插件
12-11
这是一款简单实用的jQuery响应式图片无缝轮播插件。该插件会将要轮播的图片制作为背景图片，它支持ie8+浏览器，具有无限、无缝轮播等特点。
呼吸碎片轮播北大青鸟
01-23
碎片轮播，这一款没有3D效果，但是演讲的时候是足够用了，效果也很炫
antd tab和Carousel实现轮播
前端小白成长记
11-17 1689
1、tab通过定时器实现自动轮播 2、通过Carousel组件实现自动轮播 完整代码 import React , { Component } from 'react' import "antd/dist/antd.css"; import { Tabs , Carousel } from 'antd' const contentStyle = { height: '160px', color: '#fff', lineHeight: '160px', textAlign: '.
无缝轮播的实现与封装
huyao的博客
01-29 1606
轮播图在网页搭建中经常遇到, 与轮播有关的卡片滑块也常见,  所以有必要理解其中的原理 轮播图HTML中应包含几个部分? 视觉窗口,即可见区域包含所有图片的容器具体的每一张轮播图片锚点列表, 点击可跳到具体某一页左右切换按钮 让每一个轮播页大小刚好等于视图窗口大小 设置视图窗口宽度,  让超过的部分隐藏设置包含所有图片的容器的宽度为 10000%, 目的是为了让容器足够
react无缝滚动轮播图
weixin_34194359的博客
07-22 3979
首先：父组件Slider，三个子组件：SliderList、SliderArrows、SliderDots 目录 index.js import React,{Component} from 'react'; import ReactDOM,{render} from 'react-dom'; import Slider from "./Slider"; import './index.less...
react 实现手机端首页无缝轮播
xrfxrf12345的博客
03-10 4012
首先要注明一下本人是首次写js相关博客，如有什么错误的地方，还请大家多多指正！谢谢！！！ 其中关于轮播部分有部分参考了一下这位前辈的代码，也是让我对无缝轮播有个清楚的概念，也很感谢这位前辈。 http://www.jianshu.com/p/1b1a06b579b2 目前掌握的概念： 实现轮播可以采用transform中的translate，左移为transform: tr
React实现无缝轮播
Zmikoo学习之路
03-06 2520
import React from 'react'; import ReactDOM,{render} from 'react-dom'; import './index.css'; let items = [require('./imgs/1.jpg'),require('./imgs/2.jpg'),require('./imgs/3.jpg')]; class SliderList exte...
实现无缝轮播
努力工作娶老婆的博客
05-30 304
加油
无缝轮播图的一种方式原理
weixin_33811539的博客
04-04 941
之前面试被问到这个问题，之前都是随便找大神插件，知道怎么去做，但是一直没实现过。 无缝轮播的原理 在滚动层前后分别插入最后一个元素和最前面一个元素，然后在动画滚到最后或者最前的时候，初始化滚动层的位置样式，速度很快，无法察觉，就如同无缝一般。 html片段 <div class="wrap"> <ul> ...
JS实现无缝左轮播
l1473942433的博客
06-20 389
最近学到了面向对象的编程思想，又重新写了一遍无缝轮播图。 无缝轮播图的思路： css布局部分:1.设置一个视口容器。（轮播图可视部分，宽度为一个图片的宽度，开启相对定位，设置overflow：hidden）2.视口容器内有一个图片容器。（图片是等宽的且横向排列，容器开启绝对定位）3.分页、上下页通过定位完成布局（注意z-index） js部分：1.轮播的本质。改变图片容器的left值...
【原生js】详解轮播图之无缝滚动
热门推荐
zoro的博客
12-18 1万+
前言：轮播图，是网站首页中最常见的一种图片切换特效，作为前端开发者，我相信很多开发者都直接调用了JQuery中的封装好的方法实现图片轮播，省事简单。所以我今天想介绍一下原生js代码实现的图片轮播。结构部分html部分<body> <!--展示窗口--> <div class="show_box"> <!--轮播图图片--> <div class="pic_box">
js无缝轮播图无缝轮播图
最新发布
04-29
JS无缝轮播图是一种常见的网页轮播图展示效果，它能够自动循环播放多张图片，同时具有无缝切换的特性，用户可以通过点击左右箭头或者触摸屏幕来进行切换。实现JS无缝轮播图的方法比较多，其中比较常用的方式是使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值