jquery轮播图

最新推荐文章于 2022-09-03 10:39:40 发布
最新推荐文章于 2022-09-03 10:39:40 发布
阅读量503 收藏 10
点赞数 2
文章标签： jquery轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43469418/article/details/87633885
版权

js的缺点

Js不好的地方:
1.代码冗余
2.需要遍历，很麻烦
3.有兼容性的问题
4.添加动画很麻烦
5.会覆盖
jquery的优点

 1.方便快捷，简单粗暴
2.不需要遍历：具有隐式迭代的特点，会自动遍历。
3.操作动画简单
4.完全没有兼容性
5.不会覆盖

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>京东轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .slider {
            height: 340px;
            width: 790px;
            margin: 100px auto;
            position: relative;
        }

        .slider li {
            position: absolute;
            display: none;
        }

        .slider li:first-child {
            display: block;
        }

        .arrow {
            display: none;
        }

        .slider:hover .arrow {
            display: block;
        }

        .arrow-left,
        .arrow-right {
            font-family: "SimSun", "宋体";
            width: 30px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 50%;
            margin-top: -30px;
            cursor: pointer;
            text-align: center;
            line-height: 60px;
            color: #fff;
            font-weight: 700;
            font-size: 30px;
        }

        .arrow-left:hover,
        .arrow-right:hover {
            background-color: rgba(0, 0, 0, .5);
        }

        .arrow-left {
            left: 0;
        }

        .arrow-right {
            right: 0;
        }

    </style>
</head>
<body>
<div class="slider">
    <ul>
        <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/7.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/8.jpg" alt=""></a></li>
    </ul>
    <!--箭头-->
    <div class="arrow">
        <span class="arrow-left">&lt;</span>
        <span class="arrow-right">&gt;</span>
    </div>
</div>

<script src="js/jquery-1.12.4.js"></script>
<script>
       var index=0;
    $(".arrow-left").click(function () {
        index--;
        if(index==-1){
         index=$(".slider>ul>li").length-1;
        }
        $(".slider>ul>li").eq(index).show(100).siblings().hide(100);

    });
    $(".arrow-right").click(function () {
        index++;
        if(index== $(".slider>ul>li").length){
          index=0;
        }
        $(".slider>ul>li").eq(index).show(100).siblings().hide(100);
    });
</script>

</body>
</html>
媛源缘
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery实现轮播图
qq_54998648的博客
11-07 1616
jQuery实现轮播图
jquery实现图片轮播图效果
a31017799的博客
05-02 819
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; list-style:none;} /************************样式区。原本都打算写到JS里面的。不过这玩意改的比较多。新手改CSS没啥问题我就写在这了*************
JQuery实现轮播图
BigDaruizi的博客
09-08 3012
JQuery实现轮播图   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" href="css/new_file.c
用jQuery实现轮播图——超简单(代码解释)
weixin_48466991的博客
09-03 1万+
鼠标悬浮时停止轮播，离开时自动轮播，点下一张小圆点会随着动。这里只要把图片地址更换一下 ，引用jquery文件就可以了。// 控制图片显示隐藏,小圆点背景色。/* 5张图片叠加到一块 *//* 左右箭头 */
jquery轮播图画廊轮播图幻灯片
12-07
jQuery轮播图是一种常见的网页元素，用于展示一组图片或内容，通过自动切换或用户交互来实现动态展示效果。在网页设计中，它常被用于产品展示、图片画廊或者新闻滚动等场景。jQuery库提供了丰富的API和插件，使得...
jQuery轮播图插件，背景图实现轮播图，轮播图可增加文字
最新发布
02-27
jQuery轮播图、图片切换、图片轮播 代码简介：兼容IE8的jQuery轮播图插件是一款兼容性很好的，使用非常简单的网站焦点图代码，依赖jquery和pageSwitch.js来实现轮播效果，轮播图以背景图的方式插入到当前页面进行...
jQuery轮播图
08-03
jQuery轮播图是一种常见的网页动态效果，用于展示多张图片或内容，通过自动切换和交互操作实现平滑过渡，给用户带来丰富的视觉体验。在网页设计中，它常用于产品展示、新闻滚动或者背景轮换等场景。本篇文章将深入...
jquery图片轮播图多图切换效果（带小图左右箭头）
03-16
jQuery提供了一系列的动画方法，如`fadeIn`、`fadeOut`等，可以用来实现平滑的图片切换效果。同时，Swiper也内置了丰富的过渡动画效果，可以根据需求进行设置。 总的来说，“jquery图片轮播图多图切换效果（带小图...
Jquery轮播图_Jquery轮播图_
10-01
Jquery轮播图是网页设计中常用的一种动态效果，它能以吸引人的方式展示多张图片或内容。在本文中，我们将深入探讨如何使用jQuery库来创建一个功能完备的轮播图，包括基本原理、核心代码以及实际应用中的注意事项。 ...
jquery实现轮播图效果
h5_since的博客
06-03 9831
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #oImg{ width: 500px; height:300px ; background: url(img/...
JQuery实现轮播图源码
baobao267的专栏
09-13 2万+
设计： 根据上图可以看出，轮播图需要以下元素：外面的盒子div、放置图片集合的盒子ul、放置两侧按钮的盒子div、下侧顺序按钮div 源代码如下： 一、html源码如下： &lt;div class="outer"&gt; &lt;ul class="img"&gt; &lt;li&gt;&lt;a&gt;&lt;img src="../stati
jquery实现轮播图
qq_40707650的博客
10-13 3570
今天来讲一讲jquery如何实现轮播图 首先，什么是轮播图，给个图片一看即知 这个就是轮播图，实现图片的自动播放，并且点击小圆点是也可以切换图片。 首先来讲一讲它的原理：HTML静态页面就不用我说了吧，这里直接给出代 index.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; ...
jQuery实现图片轮播效果
ta_men的博客
03-19 3112
图片轮播效果 : 在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接; 点击图片左下的标签(或中间的小圆点)切换到对应的图片; 点击图片的左右切换标签;
利用JQuery实现轮播图
热门推荐
changeie的博客
03-22 4万+
上一篇文章写了利用初级JS实现无缝轮播图，但是实际写起来有点费劲，量有些大，如果改用jQuery写无缝轮播图的话，写起来比较便捷，而已逻辑比较清晰，简单，实现起来比较快捷，性能相对于初级JS来说也会高很多。以下为代码，供大家学习和参考。&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title...
两种用jq实现的轮播图（向左右滑动和淡出效果）
fandongyuan521的专栏
04-21 4473
1、首先是左右滑动效果 html： div class="slider-left" > ul class="slider-left-main"> li class="slider-left-panel">a>img src="/images/banner1.jpg"/>a> li> li class="slider-left-panel">a>img src=
jQuery实现轮播图(一)
梵海
07-24 2万+
轮播概念图 这里的轮播图的轮播方式是自动每隔一段时间向左移动一张图，循环滚动（还有变换透明度来实现轮播的）轮播图的原理很简单：设置一个div(box),给其相对定位并且overflow:hidden超出box的范围隐藏，里面包含一个ul，给其绝对定位，ul里面有多个li(li里面存放着轮播的图片，给li左浮动实现左右轮播效果)。每隔一段时间让ul向左移动一个li的width距离，这样图片就一张一张
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值