js+jq的旋转木马特效

最新推荐文章于 2023-01-13 16:00:12 发布

SnowAnna

最新推荐文章于 2023-01-13 16:00:12 发布

阅读量917

点赞数

分类专栏：动画效果

本文链接：https://blog.csdn.net/weixin_38289699/article/details/80476027

版权

实现原理：

技术栈:

javascript+jQuery+html+css

实现步骤：

// 0. 获取元素

// 1. 鼠标放置到轮播图上，显示两侧的控制按钮，移开后隐藏

// 2. 为两侧控制按钮绑定事件（调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转）

实现代码

<!DOCTYPE html>

<html>

<head>

     <title>旋转木马效果轮播图</title>

     <meta charset= "utf-8" >

     <style type= "text/css" >

         *{

             padding: 0;

             margin: 0;

         }

         body{

             font: 12px/1.5 "微软雅黑" ;

             background-color: #2f2f2f;

         }

         a{

             text-decoration: none;

             outline: none;

             cursor: pointer;

         }

         .warp{

             width: 1000px;

             margin: 10px auto;

             border: 1px solid red;

         }

         .slide{

             height: 200px;

             margin: 150px auto;

             position: relative;

         }

         .slide li{

             position: absolute;

             left: 200px;

             top: 0;

         }

         .slide li img{

             width: 100%;

             border: 0;

             vertical-align: top;

最低0.47元/天解锁文章

SnowAnna

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js+jq的旋转木马特效

实现原理：技术栈:javascript+jQuery+html+css实现步骤：// 0. 获取元素// 1. 鼠标放置到轮播图上，显示两侧的控制按钮，移开后隐藏// 2. 为两侧控制按钮绑定事件（调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转）实现代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt...
复制链接

扫一扫