jQuery无缝轮播图思路详解-唯品会

效果图如上：

需求：图片自动轮播，鼠标移上停止播放，离开恢复播放，箭头切换图片。

html代码

<!--轮播图大盒子开始-->
<div class="wrap">
    <!--大盒子上部分轮播图-->
    <div class="wrapUp">
        <ul>
            <li class="cur"><a href="#"><img src="images/banner/banner01.jpg" ></a></li>
            <li><a href="#"><img src="images/banner/banner02.jpg" ></a></li>
            <li><a href="#"><img src="images/banner/banner03.jpg" ></a></li>
            <li><a href="#"><img src="images/banner/banner04.jpg" ></a></li>
        </ul>
        <span class="btn left">&lt;</span>
        <span class="btn right">&gt;</span>
    </div>
    <!--大盒子下部分标题-->
    <div class="wrapDown">
        <ol>
            <li class="cur">大牌特惠</li>
            <li>住进北欧</li>
            <li>绵绵爱意</li>
            <li>母婴盛宴</li>
        </ol>
        <!--底部红色下划线-->
        <span class="line"></span>
    </div>
</div>

CSS样式代码

<style>
        *{margin: 0;padding:0;list-style: none}
        /*设置页面图片背景*/
        body{background:url("images/banner/bg.jpg")no-repeat center top;}
        /*大盒子样式宽高,盒子投影，内边距*/
        .wrap{width: 1170px;height: 452px;background:rgba(255,255,255,0.5);margin:30px auto;
        padding:12px 12px 0;box-sizing:border-box;box-shadow:0 0 10px rgba(0,0,0,0.4);overflow: hidden}
/*图片盒子宽高，定位样式*/
        .wrapUp{width: 1146px;height: 400px;position: relative;}
        .wrapUp li{position:absolute;left:0;top:0;display: none;}
        .wrapUp .cur{display: block;}
        /*盒子两边箭头样式*/
        .wrapUp .btn{width: 33px;height: 66px;background:rgba(0,0,0,0.2);
        position: absolute;color:#ffffff;font-size: 40px;line-height: 66px;text-align: center;
            font-family:"黑体";border-radius:5px;top:50%;transform:translateY(-50%);cursor: pointer;transition:0.3s}
        /*盒子左箭头样式*/
        .wrapUp .left{left: -45px}
        .wrapUp .right{right: -45px}
        /*盒子移入显示*/
        .wrap:hover .wrapUp .left{left:0}
        .wrap:hover .wrapUp .right{right:0}
        /*盒子不透明度变化*/
        .wrapUp .btn:hover{background:rgba(0,0,0,0.4);}

        /*大盒子下部分标题样式*/
        .wrapDown{width: 800px;height: 40px;margin:0 auto;position: relative}
        /*大盒子下部分内容li样式*/
        .wrapDown li{width: 200px;height: 40px;font-size: 15px;line-height: 40px;float: left;text-align: center;color: #666666;position: relative;cursor: pointer}
        /*每个li后面的分割线样式*/
        .wrapDown li:after{content:"|";position: absolute;right: 0;top:0;color: #cccccc}
        /*设置第一个li字样式*/
        .wrapDown .cur{color:red;}
        /*最后一个li不需要分割线*/
        .wrapDown li:last-child:after{display: none}
        /*底部红色下划线相对于底部盒子定位*/
        .wrapDown .line{width: 200px;height: 2px;background:deeppink;left: 0;bottom:-1px;position: absolute}
    </style>

jQuery代码

<script>
    //鼠标以上通过索引值切换
    //图片
    //当前文字颜色
    $(".wrapDown li").mouseenter(function () {
        //定义变量接收索引值
        var index=$(this).index();
        console.log(index);
        play(index);
        //根据索引值图片
      /*  $(".wrapUp li").eq(index).stop().fadeIn().siblings().stop().fadeOut();
        //文字切换
        $(".wrapDown li").eq(index).addClass("cur").siblings().removeClass("cur");
        //滑动线切换
        $(".line").stop().animate({left:index*200},100)*/
    });
    //把切换封装成一个函数

    //自动播放
    //定义播放
    function play(aaa){
        $(".wrapUp li").eq(aaa).stop().fadeIn().siblings().stop().fadeOut();
        //文字切换
        $(".wrapDown li").eq(aaa).addClass("cur").siblings().removeClass("cur");
        //滑动线切换
        $(".line").stop().animate({left:aaa*200},100)
    }
    var timer=null;//先设置个定时器timer 让值为空
    var num=0;//需要有一个索引数字控制它动，初始为0
    var len=$(".wrapDown li").length;//需要有一个索引值和num对比,为li的个数。
    //封装自定义播放动画
    function autoplay() {
        timer=setInterval(function () {//此处的timer是给定时器赋值
            num++;
            if(num>len-1){num=0;}
            play(num);
            console.log(num);
        },1000);
    }

//鼠标以上停止,鼠标离开调用自动播放
    $(".wrap").hover(function () {
        clearInterval(timer);
    },function () {
        autoplay();
    });
//箭头点击切换图片
    $(".right").click(function () {
        num++;
        if(num>len-1){num=0;}
        play(num);
    });
    $(".left").click(function () {
        num--;
        if(num<0){num=len-1;}
        play(num);
    });
</script>

html部分步骤：
1、新建大盒子，上部分包裹轮播图和底部四个标题选项和红色 下划线。
1.1轮播图div盒子部分包含两个箭头用两个span包裹。
1.2轮播图部分div用ul插入四张图。
2、大盒子下部分是标题部分。

css样式步骤分析：
版心大盒子样式
版心部分，要给高和内边距，背景色为白色半透明，盒子投影。
盒子内边距部分，给图片一个宽，增加图片的内边距后，盒子宽度增加所以要用border-box内减去。半透明背景rgba(255,255,255,0.5);
盒子投影：box-shadow:0 0 5px rgba(0,0,0,0.3) }
第一个值是水平，第二值是垂直，第三个值模糊程度，第四个值是颜色。
图片盒子样式
四张图是淡入淡出可以用绝对定位将所有图片放在一起。
给图片盒子设置图片的宽高，然后给盒子相对定位，给li绝对定位，left,top为0。显示在第一张的是最后一个li的图片，因为层级关系。
给所有li设置隐藏。给第一个li添加类名设置display显示。
箭头盒子样式
箭头span相对于图片盒子定位后宽高才可以生效，有圆角和宽高，黑色半透明。
箭头变大设置font-family:"黑体"。
箭头盒子居中top:50%和transform:translateY(-50%);X是水平偏移，Y垂直偏移
箭头盒子是在外面，鼠标进入大盒子箭头显示，.wrap:hover .wrapUp .left{left:0}意思是
鼠标进入大盒子wrap控制左边箭头。然后给箭头盒子设置过渡动画。
鼠标移上，箭头盒子不透明度变化，调整不透明值。
图片底部标题样式
根据标题数量设置盒子的宽度高度，然后用伪类元素after和定位设置每个li后面的分割线。

JS代码部分
通过底部li的索引切换图片、文字颜色和底部红色滑动线位置。
1、鼠标移入底部li，var index=$(this).index();
2、根据索引值图片切换
$(".wrapUp li").eq(index).stop().fadeIn().siblings().stop().fadeOut();
图片、绑定的索引、淡入、其它兄弟淡出
3、文字切换,第一个li文字添加样式类名
$(".wrapDown li").eq(index).addClass("cur").siblings().removeClass("cur");
4、滑动线滑动切换
$(".line").stop().animate({left:index*200},100)
往右边滑动，移动index*滑动线宽度的距离。
用户触发的一般都要加stop()

定时器自动播放
格式：
需要一个变量var Timer=null；
然后再需要一个变量var num=0;需要有一个数字控制图片动，初始为0
一共4个图，所以要num++；而且要在定时器里面做一个如果num大于索引值最大为3的判断，num就变成0，这样图片会从第一张重新开始播放。
setInterval为定时调用的函数,调用执行文字图片滑动线的切换。

原文地址：https://www.cnblogs.com/liout/p/11074618.html

时间： 2024-08-12 00:59:12

jQuery无缝轮播图思路详解-唯品会的相关文章

左右无缝轮播图的实现

无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolute;top: 0;left: 0}

10个免费的响应式jQuery Carousel 轮播图插件

jQuery Carousel 轮播图插件可以给网站创建华丽的动画效果,这里列出的10个jQuery Carousel 轮播图插件都是响应式的,并且可以免费使用. 1. ItemSlide.js 简单的触摸式Carousel 轮播图插件,提供多种样式的旋转动画,如向上滑动,基于全屏的触摸滑动,左右滑动等. 2. Liquid 每当Liquid 容器的大小改变时,都会重新调整列表中的项目数,以适应新的宽度. 3. jCarousel jCarousel 是一个用来控制水平或垂直方向上列表项的jQu

原生JavaScript实现无缝轮播图

无缝轮播图是页面常用的特效之一,然而在实际的开发过程中,大部分的开发者都会使用插件来对轮播图进行开发,那么它的底层到底是怎么实现的呢,本文章将围绕这一问题展开探讨. 在讨论如何利用原生JS实现图片之间无缝切换轮播的动画效果之前,我们先来谈谈无缝轮播图片的css布局. 首先我们需要一个用来显示图片的DIV容器,然后把想要轮播的图片没有缝隙的排成一行放入DIV容器中,给DIV容器设置 overflow: hidden,这样在页面中就可以只看到一张图片,然后通过利用JS来移动ul的left值就能达到无

jQuery实现轮播图

我用的jQuery库jquery-3.2.1.js可以在官网下载:http://jquery.com/download/ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <

JS 无缝轮播图1-节点操作

无缝轮播图 (使用节点操作) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; } body{ background:#F5F5F5; } #content{ width:300px; height:200px;

python编写微信公众号首图思路详解

前言 之前一直在美图秀秀调整自己的微信公众号首图,效果也不尽如人意,老是调来调去,最后发出来的图片被裁剪了一大部分,丢失部分关键信息,十分恼火,于是想着用python写一个程序,把微信公众号首图的模式固定下来,方便以后写公众号. 思路 根据微信公众号首图要求,可以上传一个不超过5M的图片,且图片尺寸要是2.35:1的尺寸,换算成像素是900:383,有了这些参数就可以做文章了,这里有两种思路 把今天推文的标题(文字)用图片展示出来,使得文字排列错落有致,简单粗暴,而又不失美感,这里可以利用mat

jquery简单无缝轮播图实现

此简单轮播图布局原理是: 一个div包含图片列表,和控制按钮.其宽度等于图片的宽度,溢出隐藏. 图片要左浮动. jquery原理: 开一个定时器,隔一段时间执行图片列表向左移动一个图片的宽度,同时在移动时设置一个回调函数. 把向左移动的图片,也是图片列表的第一张图片,添加到图片列表ul的末尾. 这样实现了,图片自动播放的效果. 怎么带动图片控制的小按钮变亮? 因为每一次图片轮播,都会改变图片值得索引,那就给函数加一个变量 i ,每一次执行定时器都会i++: var spanindex=i%4;

记一个jquery 无缝轮播的制作方法

接触前端也很久了,今天才发现,要做好一个轮播,其实有很多东西需要考虑进去,否则做出来的轮播效果并不好,下面我就来做一个轮播,是依赖jquery来写的 1.要做轮播,首先需要的是HTML的内容,css的机构样式,以下为html代码: 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <link rel="stylesheet" hr

自己定义jquery插件轮播图

轮播图-html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&