jq轮播图实现

已于 2022-09-05 10:10:19 修改
阅读量75 收藏 2
点赞数
文章标签： javascript css3 css
于 2021-12-03 09:55:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/someoneyoulove/article/details/121692162
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/jquery-2.1.4.min.js"></script>
    <style type="text/css">
      *{
            padding:0px;
            margin:0px;
            border:0px;
        }
        li{
            list-style-type:none;
        }
        /*给a标签去除下划线*/
        a{
            text-decoration:none;
        }
        #wrapper{
            margin:20px auto;
        }
        #show-area{
            /* width:590px;
            height:470px; */
            width:100%;
            height:600px;
            position:relative;
            margin:0px auto;
            overflow:hidden;
        }
        /*注意：找bug找了很久，这里自动插入一张，父容器要加上他的宽度，否则怎么显示呢？小问题大解决*/
        #show-area ul{
            position:relative;
            /* width:5310px;
            height:470px; */
            width:900%;
            height:100%;
            right:0;
        }
        #show-area ul li{
            float:left;
            /* width:590px; */
            width: 11.5%;
        }
        #show-area ul li img{
          width: 100%;
          height: 100%;
        }
        /*指示器*/
        #indicator{
            width:140px;
            text-align:center;
            position:absolute;
            top:450px;
            left:0;
            right: 0;
            margin: auto;
            z-index:1;
            /*ackground-color: #00ccff;*/
        }
        #indicator div{
            height:12px;
            width:12px;
            border-radius:100%;
            background-color:#ccc;
            float:left;
            margin-left:5px;
            opacity:0.9;
            filter:Alpha(opacity=90);/*为了适应旧的浏览器*/
        }
        #button-left,#button-right{
            /*display:none;*/
            position: absolute;
            width: 50px;
            height: 110px;
            z-index: 2;
            background-color: #cccccc;
            font-size: 40px;
            color: #FFFFFF;
            text-align: center;
            line-height: 110px;
            opacity:0;
            filter:Alpha(opacity=50);/*为了适应旧的浏览器*/
            cursor: default;
        }
        #button-left{
            top: 180px;
            left: 0px;
        }
        #button-right{
            top: 180px;
            /* left: 540px; */
            right: 0px;
        }
        .onclick{
            background-color:#FFF !important;
        }


    </style>
 </head>
 
<body>
<div id="wrapper">
    <div id="show-area">
        <ul>
            <li><a href="#"><img src="./images/slider1.jpg"></a></li>
            <li><a href="#"><img src="./images/slider2.jpg"></a></li>
            <li><a href="#"><img src="./images/slider3.jpg"></a></li>
            <li><a href="#"><img src="./images/slider1.jpg"></a></li>
            <li><a href="#"><img src="./images/slider2.jpg"></a></li>
            <li><a href="#"><img src="./images/slider3.jpg"></a></li>
            <li><a href="#"><img src="./images/slider1.jpg"></a></li>
            <li><a href="#"><img src="./images/slider2.jpg"></a></li>
        </ul>
        <div id="button-left" title="上一张"><</div>
        <div id="button-right" title="下一张">></div>
        <div id="indicator"></div><!--控制按钮,为了日后方便后台操作这里的控制按钮在js代码中控制添加-->
    </div>
</div>
<script>
    $(function () {
 
        /*设置鼠标移动到整个show区域则左右按钮显示出来，否则不显示*/
        $("#show-area").mouseenter(function () {
            $("#button-right,#button-left").css({opacity:0.5});
        });
        $("#show-area").mouseleave(function () {
            $("#button-right,#button-left").css({opacity:0});
        });
 
        var i=0;
        /*假装自己很智能，自动获取一下，在后面left值移动时就可以用它了*/
        var imgWidth = $("#show-area ul li").width();
        console.log(imgWidth)
        var clone = $("#show-area ul li").first().clone(true);
        /*copy 第一张的照片并且添加到最后已达到无缝对接的效果*/
        $("#show-area ul").append(clone);
 
 
        /*get 所有li的个数,只有length才是属性*/
        var size = $("#show-area ul li").length;
 
 
        /*step 1:  */
        //一开始循环添加按钮
        //为什么要size - 1？因为最后一张图片只是作一个过渡效果我们显示的始终还是4张图片
        //所以添加按钮的时候我们也应该添加4个按钮
        for(var j=0;j<size -1 ;j++){
            $("#indicator").append("<div></div>");
        }
 
        $("#indicator div").eq(i).addClass("onclick");
 
 
        /*step 2:  */
        //左按钮
        $("#button-left").click(function () {
            toLeft();
        });
        //右按钮
        $("#button-right").click(function () {
            toRight();
        });
 
        /*step 3：*/
        //按钮指示器鼠标移出移入事件
        $("#indicator div").hover(function () {
            i = $(this).index();
            clearInterval(timer);
            $("#show-area ul").stop().animate({left:-i * imgWidth});
            $(this).addClass("onclick").siblings().removeClass("onclick");
 
        },function () {
            timer = setInterval(function () {
                toRight();
            },2000)
        });
 
        //两个方向按钮鼠标移出移入事件
        $("#button-left,#button-right").mouseenter(function () {
            clearInterval(timer);
        }).mouseleave(function () {
            timer = setInterval(function () {
                toRight();
            },2000);
        });
 
        //定时器,注意，这里是最开始启动的，所以呢，这里不设值，会导致页面开始刷新出现错误。
         var timer = setInterval(function () {
            toRight();
        },2000);
 
        /*step 2-2*/
        //左按钮实现的函数
        function toLeft(){
 
            //同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来
            i--;
            if(i==-1){
                $("#show-area ul").css({left:-(size - 1)*imgWidth});
                i=size-2;
            }
            $("#show-area ul").animate({left:-i*imgWidth},1000);
            $("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick");
 
        }
 
        /*step2-2:*/
        //右按钮的实现函数
        function toRight() {
            i++;
            /*当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片）
            并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置
            并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的）*/
            if(i==size){
                console.log("qq");
                $("#show-area ul").css({left:0});
                i=1;
            }
 
            $("#show-area ul").stop().animate({left: -i * imgWidth}, 1000);
 
            //设置下面指示器的颜色索引
            if(i == size-1){
                $("#indicator div").eq(0).addClass("onclick").siblings().removeClass("onclick");
 
            }else{
                $("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick");
            }
        }
 
    });
</script>
</body>
</html>
@Redamancy
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jq移动端触摸滑动轮播图特效 亲测有效
07-13
亲测有效。jq移动端触摸滑动轮播图特效。亲测有效。jq移动端触摸滑动轮播图特效。亲测有效。jq移动端触摸滑动轮播图特效。
jq实现滑动轮播效果
string佳佳的博客
10-21 1041
效果图 源代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑动轮播案例</title> <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script> <link href
jquery之滑动轮播
weixin_45107630的博客
09-08 227
滑动轮播： 简单思路：利用两个嵌套的盒子，内部的盒子放图片，并设置绝对定位，设置左右两个按钮，定义一个变量，点击按钮时，变量加加，根据变量来让内部的盒子左右移动，就实现了滑动轮播。 代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m...
JQ实现滑动轮播
l__cc的博客
11-12 331
JQ实现滑动轮播 CSS代码 HTML代码 JQ代码
使用jQuery实现的平滑滚动轮播图
08-28
/* * 功能说明： * 1.点击向左（右）的图标 ，平滑的切换到上（下）页。 * 2，无限的循环切换：第一页的商业为最后一页 ，最后一页的下，一张为第一页 * 3，每隔3秒自动切换到下一页 * 4，当鼠标进入图片区域时，自动切换停止 ，当鼠标离开时，又开始自动切换 * 5，切换页面时 ，下面的圆点也跟着同步切换 * 6，点击圆点切换对应的页。 * */
漂亮的滑动触摸的jq轮播图有很多个
08-03
在IT行业中，jq轮播图是一种常见的网页交互元素，它用于展示多张图片或内容，通过滑动或触摸效果实现自动或手动切换。这个压缩包包含多个基于jQuery库的轮播图插件，这些插件提供了不同的设计和功能，使得网页的动态...
JQ轮播图代码，考呗可用
01-29
【标题】"JQ轮播图代码，考呗可用"所指的知识点是关于使用jQuery库实现轮播图效果的编程技巧。jQuery是一款轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。在网页设计中，轮播图是一种...
jq图片自动轮播（封装）
09-10
"jq图片自动轮播（封装）"是一个基于jQuery库开发的插件，旨在实现图片无缝衔接的自动轮播功能，并提供手动控制选项，如通过点击左右箭头或下标来切换图片。接下来，我们将深入探讨该插件的关键知识点。 1. **...
基于jq实现图片的轮播
07-24
**基于jq实现图片轮播的知识点详解** 在网页设计中，图片轮播是一种常见的功能，用于展示一组图片或内容，并且能自动或手动切换。jQuery（通常简称为jq）作为一个强大的JavaScript库，提供了丰富的API和简便的方法...
jquery实现左右轮播图效果
11-27
接下来，这个小案例就是要介绍如何实现这种效果，即这张轮播图上所有的事件. 首先 我们看到轮播图上的有1.左右的小按钮(图片会随着左右的点击移动) 2**重点内容.还有位于中间的小圆点(点击小圆点会跳转到那个图片) ...
jQuery实现列表自动滚动循环滚动展示新闻
10-25
jQuery实现列表自动滚动循环滚动展示新闻，鼠标悬停时停止滚动并提示，离开后，继续滚动，实现的代码如下，需要的朋友可以看看
基于JQuery的实现图片轮播效果(焦点图)
12-09
完整的演示代码: JQuery实现图片轮播效果 【实例演示】 1 2 3 4 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]【原理简述】 这里大概说一下整个流程： 1，将除了第一张以外的图片全部隐藏， 2，获取第一张图片的alt信息显示在信息栏，并添加点击事件 3，为4个按钮添加点击侦听，点击相应的按钮，用fadeOut，fadeIn方法显示图片 4，设置setInterval，定时执行切换函数 【代码说明】 filter(“:visible”) :获取所有可见的元素 unbind()：从匹配的元素中删除绑定的事件 siblings：取得一个包含匹
Jquery无缝轮播滑动效果
yanxiaozai的博客
11-02 454
网站上很容易看见点击左右按钮，滚动显示下一页的这种效果。如下图所示： 实现步骤 固定长宽的父容器，设置为 overflow: hidden 子元素则与父容器同宽高 ...
jQuery手指滑动轮播
三百两
12-22 1274
备注 ： 需要引入对应js<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script> <script type="text/javascript" src="js/
滑动的轮播图，纯jquery书写，注释清晰可读！
qq_44890362的博客
10-07 573
一提到轮播图，相信大家都不陌生。这个轮播图无非就两种形式。 第一种通过切换的方式去更换图片，这种方式往往是采取的是更换路径！ 第二种就是通过滑动的方式去更换图片，而这种就是通过改变top值或者是margin值。 今天想和大家分享的是第二种方式！ 1.首先我还是将结构搭建起来，html结构其实是非常简单的。 <!-- 内容 --> <div class="container"> <ul> <li>&l
用jQuery实现带滑动效果的轮播图
weixin_44195331的博客
09-22 1614
实现带滑动效果的自动轮播图的思想就是放图片的时候把原本第一张和最后一张分别在最后和开始在放一张，当滑动到实际的最后一张是，显示的是第一张的内容，其实是整个图片集的最后一张，在此时通过改变位置，让图片快速回到第一张，当然这个要在动画执行完毕后在执行，就可以实现带滑动效果的轮播效果 <body> <div id="container"> <div id="list" ...
jq实现自动轮播图效果
热门推荐
caimaomaocai的博客
04-15 2万+
自动轮播图思路：    1、设置定时器和自动切换函数，设置底部button的索引值。    2、点击左右箭头时，定时器清除，手动切换图片。当离开时，自动播放    3、点击底部button的时候，定时器清除，手动切换图片。当离开时，自动播放&lt;div id="container"&gt; &lt;a class="item" href="#"&gt;&lt;img sr...
JQuery实现滚动轮播图
Mr_ShengYang的博客
02-08 464
JQuery实现轮播图效果
jq 实现炫酷轮播图
最新发布
09-07
您可以使用jQuery插件来实现炫酷的轮播图。以下是一个简单的示例： 1. 首先，确保您在页面中引入了jQuery库。 ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 2. 创建一个HTML结构，用于显示轮播图的容器和图片。 ```html <div class="slider"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> ``` 3. 添加一些CSS样式来定义轮播图容器的大小和样式。 ```css .slider { width: 500px; height: 300px; position: relative; overflow: hidden; } .slider img { width: 100%; height: auto; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease-in-out; } .slider img.active { opacity: 1; } ``` 4. 使用jQuery来实现轮播功能。 ```javascript $(document).ready(function() { var slider = $('.slider'); var images = slider.find('img'); var currentIndex = 0; // 显示第一张图片 images.eq(currentIndex).addClass('active'); setInterval(function() { // 隐藏当前显示的图片 images.eq(currentIndex).removeClass('active'); // 计算下一张图片的索引 currentIndex = (currentIndex + 1) % images.length; // 显示下一张图片 images.eq(currentIndex).addClass('active'); }, 2000); }); ``` 此示例使用了一个简单的定时器来切换图片，并使用CSS过渡效果来实现淡入淡出的效果。您可以根据需要自定义样式和动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值