使用jQuery实现无缝轮播图

最新推荐文章于 2024-02-23 11:32:18 发布

VIP文章安静的对折

最新推荐文章于 2024-02-23 11:32:18 发布

阅读量7.8k

点赞数

分类专栏： JQ 文章标签： jQauery 轮播图无缝轮播

本文链接：https://blog.csdn.net/k491022087/article/details/54023870

版权

轮播图我们很常见的功能，可以使用原生的js进行实现，也可以使用jQuery进行实现，还可以使用H5C3进行实现，当然也可以使用swiper插件很方便的实现，这里先用jQuery实现一个无缝的轮播。

思路：

1、首先获取要操作的对象

2、设置鼠标移入移出时显示和隐藏左右按钮

3、给左右按钮添加点击事件，让ul移动一个图片的宽度

4、给对应的小按钮设置点击事件，已经添加背景色

5、添加一个定时器让图片循环移动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,ul,ol,li,img {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box {
            width: 700px;
            height: 400px;
            /*padding: 5px;*/
            /*background-color: red;*/
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .ad {
            width: 700px;
            height: 400px;
            position: relative;
        }
        #box img {
            width: 700px;
            height: 400px;
        }
        .ad ul li{
            width: 700px;
            height: 400px;
            overflow: hidden;
            float: left;
        }
        .ad ul {
            position: absolute;
            left: 0;
            top: 0;
            wi

最低0.47元/天解锁文章

安静的对折

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery实现无缝轮播图

轮播图我们很常见的功能，可以使用原生的js进行实现，也可以使用jQuery进行实现，还可以使用H5C3进行实现，当然也可以使用swiper插件很方便的实现，这里先用jQuery实现一个无缝的轮播。思路：1、首先获取要操作的对象2、设置鼠标移入移出时显示和隐藏左右按钮3、给左右按钮添加点击事件，让ul移动一个图片的宽度4、给对应的小按钮设置点击事件，已经添加背景色5、添加一个
复制链接

扫一扫