js轮播图动画

最新推荐文章于 2022-12-02 20:44:55 发布
最新推荐文章于 2022-12-02 20:44:55 发布
阅读量988 收藏
点赞数
分类专栏： html javaScript 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Likeyou113/article/details/121794494
版权

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：

作者：黄瑞民

撰写时间：2021/11/28

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

本次分享的案例是轮播图

<html lang="en">

<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>轮播图</title>

    <link rel="stylesheet" href="css/luenbo.css">

 <style>

.container{

position: relative;

width: 500px;

height: 300px;

/* border: 1px solid red; */

overflow: hidden;

}

.list{

position: absolute;

width: 3000px;

height: 300px;

}

.list img{

float: left;

width: 500px;

height: 300px;

}

.container a{

display:none;

position: absolute;

top: 50%;

width: 30px;

line-height: 30px;

font-size: 30px;

color: #fff;

text-align: center;

background-color: #ddd;

}

.container a:first-of-type{

left: 1%;

}

.container a:last-of-type{

right: 1%;

}

.container:hover a{

display: block;

}

.container a:hover{

background-color: #666;

}

.container .buttons{

position: absolute;

bottom: 3%;

right: 3%;

}

.container .buttons span{

border: 2px solid rgb(1, 255, 255);

display: inline-block;

width: 20px;

line-height: 20px;

background-color: #ddd;

text-align: center;

font-size: 12px;

}

.container .buttons .on{

background-color: rgb(195, 0, 255);

color: #fff;

}

 </style>

</head>

<body>

    <div class="container" id="container">

        <!-- 轮播图片 -->

        <div class="list" id="list" style="left: -500px">

            <img src="#" alt="">

            <img src="#" alt="">

            <img src="#" alt="">

            <img src="#" alt="">

            <img src="#" alt="">

            <img src="#" alt="">

        </div>

        <!-- 左右箭头 -->

        <a class="prev" id="prev"><</a>

        <a class="next" id="next">></a>

        <div class="buttons" id="buttons">

            <span class="on" index="1">1</span>

            <span index="2">2</span>

            <span index="3">3</span>

            <span index="4">4</span>

        </div>

    </div>

    <script>

var kaiguan =false;/* 控制动画 */

var timer;/* 控制定时器 */

var index =1;/* 记录图片 */

window.onload = function(){/* 文档加载完成后立即执行 */

// 点击切换图片

var prev = document.getElementById("prev");

var next = document.getElementById("next");

var list = document.getElementById("list");

next.onclick = function(){

// console.log(123);

// console.log(list);

// console.log(list.style.left);

if(kaiguan==true){

return ;

}

if(index==4){

index=1;

}

else

{

index++;

}

animation(-500);

show();

}

prev.onclick = function(){

if(kaiguan==true){

return ;

}

if(index==1){

index=4;

}

else

{

index--;

}

animation(500);

show();

}

// 自动播放

function autoplay(){

timer = setInterval(function(){

next.onclick()

},3000);

}

autoplay();

//鼠标移入停止播放

var container = document.getElementById("container");

container.onmouseover = function(){/* 鼠标移入 */

clearInterval(timer);

}

//鼠标移出自动播放

container.onmouseout = autoplay;/* 鼠标移出 */

//点击跳转图片

var buttons  =document.getElementById("buttons").getElementsByTagName("span");

console.log(buttons);

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

buttons[i].onclick = function(){

if (this.className=="on") {

return false;

}

var myindex = this.getAttribute("index");

console.log(myindex);

offset =(myindex-index)*-500;

animation(offset);

index = myindex;

show();

}

}

}

function animation(offset){

kaiguan=true;/* 表示动画正在执行 */

var times = 400;/* 动画总时间 */

var intervals = 10;/* 间隔时间 */

var speed = offset/(times/intervals);/* 位移速度 */

var newoffset = parseInt(list.style.left)+offset;/* 新的位移距离 */

function go(){

if((speed<0&&parseInt(list.style.left)>newoffset)||(speed>0&&parseInt(list.style.left)<newoffset)){

list.style.left = parseInt(list.style.left)+speed+"px";

setTimeout(function(){

go();

},intervals);

}

else

{

list.style.left=newoffset+"px";

if(parseInt(list.style.left)<-2000){

list.style.left = -500+"px";

}

if(parseInt(list.style.left)>-500){

list.style.left = -2000+"px";

}

kaiguan =false;

}

}

   go();

}

//标示当前图片

function show(){

var buttons  =document.getElementById("buttons").getElementsByTagName("span");

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

if (buttons[i].className=="on") {

buttons[i].className="";

}

buttons[index-1].className ="on";

}

}

 </script>

</body>

</html>

代码上的img标签，图片自定

以上是本次案例的分享代码

LYlife113
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
带动画效果js焦点图轮播切换
06-12
网上找的车轮网带动画效果js的焦点图轮播切换，挺不错的，喜欢的可以学习下
js实现轮播图动画(更新"旋转木马")
weixin_30725467的博客
08-16 544
在网页浏览中，可以看到轮播图是无处不在的，这是一个前端工程最基本的技巧。首先看看几个网页的呈现的效果。 QQ音乐： 　　　　　　　　 网易云音乐： 　　　　　　　　 天猫： 　　　　　　　　 接下来将从简到难总结几种实现轮播图的方法。 　　1、样式一：鼠标滑入滑出实现图片切换 　　当鼠标滑入到小圆点上时，显示当前对应的图片，鼠标移出时回到默认的图片。如果点击了小圆点，显示当...
Js动画轮播
weixin_44546752的博客
02-23 197
HTML部分： &lt;div class="showbox" id="showbox"&gt; &lt;ul class="imgbox" id="imgbox" style="left:-518px "&gt; &lt;li&gt;
JS轮播动画
weixin_39688091的博客
11-24 749
最终呈现例子 页面元素 <div class="content"> <div id="box0"></div> <div id="box1"></div> <div id="box2"></div> </div> 样式部分 <style> .content { position: relative; } div[id^=box] { w.
JavaScript-动画-轮播图
song17631538490的博客
12-02 491
前言：使用原生JS 编写一个简单 的自轮播图 思路：主要使用clientWidth、scrollLeft 获取相关元素 通过改变scrollLeft（获得的是内容卷曲出去的宽度，滚动条向右拉跑出盒子范围的那部分高度） 的值实现轮播的效果 其中还用到了定时器。
js实现图片切换（动画版）
11-28
学习了妙味课堂的图片切换（动画版） 这个小效果相对简单一点。 知识预备： 【1】background-position-x background-position属性设置背景原图像（由 background-image 定义）的位置，意味着使用这个属性的前提是...
非常酷炫的Bootstrap图片轮播动画
11-26
这篇文章将展示如何在 Bootstrap轮播上添加有趣的动画效果。同时确保这个js组件自由扩展和快速上手。 介绍Animate.css 为了让我自己写的动画效果值得称赞，我用一个非常有名的开源的CSS3动画库，被形象的称为animate...
js半圆形banner切换动画效果
06-09
js半圆形banner切换动画效果
利用BootStrap的Carousel.js实现轮播图动画效果
11-29
效果图： html+js： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my love-首页</title> <link rel="stylesheet" href="css/bootstrap.css"> <...
Three.js碎片化图片切换特效
07-24
Three.js碎片化图片切换特效是一款Three基于canvas制作两张图片撕碎切换，图片碎片化特效进行切换特效。
JS使用tween.js动画库实现轮播图并且有切换功能
10-18
本文通过实例代码给大家介绍了JS使用tween.js动画库实现轮播图并且有切换功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
通过JS实现网页轮播图效果
04-13
通过JS实现网页轮播图滚动效果,包含JS缓动动画效果以及一个简单的网页界面，压缩包里包含页面的源代码、缓动动画源代码、轮播图设计思路等。
纯js实现的3d轮播动画效果
05-04
纯js实现的3d轮播动画效果
js轮播（淡入淡出特效）
06-22
HTML+Js+ccs，轮播图，淡入，淡出，满屏设置 尺寸可以该，适用于网站banner 广告宣传等，下载就用 原理简单
原生js实现图片层叠轮播切换效果
11-24
本文实例介绍了js焦点图片层叠轮播切换滚动效果，分享给大家供大家参考，具体内容如下 效果图：   功能描述： 自定义图片尺寸； 每隔一段时间自动滚动图片； 每次动画执行的时候改变图片的位置，宽高以及其它...
JavaScript 实现动画轮播图
HCahao的博客
08-20 259
JavaScript 实现基础动画轮播图
JS 动画轮播效果
alh83044的博客
04-29 73
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>轮播图</title><style type="text/css">*{margin:0;padding: 0;} #wrap{width: 500px;height: 360px;margi...
基于JavaScript实现动画轮播效果
学渣晖sir的博客
04-24 387
这是之前做一个仿极客学院网站写的代码了，年代也比较久远。原本是使用jquery写的，后来被强制改回JavaScript...鬼知道我那时经历了什么。 直接上代码（Carousel.js）： var img_list = document.getElementById("carousel-box").getElementsByTagName("div")[0]; var ori_im
js轮播时的动画效果函数封装
m0_60121436的博客
11-20 480
在这里需要先在轮播里计算好要移动的像素target,和移动的元素box,调用函数传参即可. function getLeft(target, box) { var long = 15; var currleft = box.offsetLeft; //获取元素左边距 if (target == currleft) { return; } //如果相等则不动
js全屏轮播图动画
最新发布
05-31
可以通过CSS和JavaScript来实现全屏轮播图动画，以下是一个简单的实现示例： HTML结构： ```html ``` CSS样式： ```css .slider { position: relative; width: 100%; height: 100%; overflow: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值