jquery实现京东轮播图

最新推荐文章于 2023-03-30 22:06:06 发布
最新推荐文章于 2023-03-30 22:06:06 发布
阅读量972 收藏 4
点赞数 6
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangzhneg123/article/details/87286276
版权

效果

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery实现京东轮播图</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
    * {
    padding:0;
    margin:0;
}
ul {
    list-style:none;
}
img {
    vertical-align:middle;
    border:none;
}
.wrap {
    width:790px;
    height:340px;
    margin:0px auto;
    position:relative;
}
.wrap .img li {
    position:absolute;
    left:0;
    top:0;
    display:none;
}
.wrap .num {
    position:absolute;
    left:0;
    bottom:20px;
    font-size:0;
    text-align:center;
    width:100%;
}
.wrap .num li {
    width:20px;
    height:20px;
    display:inline-block;
    background:#666;
    text-align:center;
    line-height:20px;
    color:#fff;
    border-radius:50%;
    font-size:16px;
    margin:0 3px;
    cursor:pointer;
}
.wrap .num li.active {
    background:#a00;
}
.wrap .btn {
    position:absolute;
    top:50%;
    margin-top:-30px;
    width:30px;
    height:60px;
    background:rgba(0,0,0,.3);
    color:#fff;
    text-align:center;
    line-height:60px;
    font-size:40px;
    display:none;
    cursor:pointer;
}
.wrap .btn-left {
    left:0;
}
.wrap .btn-right {
    right:0;
}
.wrap:hover .btn {
    display:block;
}
</style>
</head>
<body>
<div class="wrap">
    <ul class="img">
        <li>
            <a href=""><img src="https://img13.360buyimg.com/da/jfs/t5863/243/1124081808/83929/17f753a1/5923aa9cNadda4624.jpg"></a>
        </li>
        <li>
            <a href=""><img src="https://img1.360buyimg.com/da/jfs/t5107/238/2603995678/99283/95a26cea/591c1c40N2cb0bf9c.jpg"></a>
        </li>
        <li>
            <a href=""><img src="https://img1.360buyimg.com/da/jfs/t5347/58/2258216290/100280/a7eea35a/59196712N8610ad1e.jpg"></a>
        </li>
        <li>
            <a href=""><img src="https://img1.360buyimg.com/da/jfs/t5536/307/2327359355/198531/ac762fbe/59196e52N214ab88d.jpg"></a>
        </li>
        <li>
            <a href=""><img src="https://img20.360buyimg.com/da/jfs/t5500/59/2669702928/113809/98b7a2b6/591d43c3Ne8fdd8ed.jpg"></a>
        </li>
        <li>
            <a href=""><img src="https://img20.360buyimg.com/da/jfs/t5611/175/926963013/146089/6f8e451e/59228824N319c5576.jpg"></a>
        </li>
    </ul>
    <ul class="num">
        
    </ul>
    <div class="btn btn-left">&lt;</div>
    <div class="btn btn-right">&gt;</div>
</div>

<script>
$(function() {
    var size = $('.img li').size();
    for (var i = 1; i < size + 1; i++) {
        var li = '<li>' + i + '</li>';
        $('.num').append(li);
    }
    $('.img li').first().show();
    $('.num li').first().addClass('active');
    /*手动轮播*/
    $('.num li').mouseover(function() {
        $(this).addClass('active').siblings().removeClass('active');
        var index = $(this).index();
        i = index;
        $('.img li').eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);
    })
    /*核心向左运动函数*/
    function moveL() {
        i--;
        if (i == -1) i = size - 1;
        $('.num li').eq(i).addClass('active').siblings().removeClass('active');
        $('.img li').eq(i).fadeIn(300).siblings().fadeOut(300);
    };
    /*自动播放*/
    var i = 0;
    var t = setInterval(move, 1500);
    /*核心向右运动函数*/
    function move() {
        i++;
        if (i == size) i = 0;
        $('.num li').eq(i).addClass('active').siblings().removeClass('active');
        $('.img li').eq(i).fadeIn(300).siblings().fadeOut(300);
    };
    $('.wrap').hover(function() {
        clearInterval(t);
    }, function() {
        t = setInterval(move, 1500);
    })
    $('.btn-left').click(function() {
        moveL();
    })
    $('.btn-right').click(function() {
        move();
    })
})
</script>

 

<pre style="color:red">
   感：  最近贡献一下我在教学中的小案例  希望能给你一些帮助

                                                              --王      
</pre>

</body>
</html>

Mr.王征
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现图片轮播
weixin_44567226的博客
02-23 196
作者：难取的名字 撰写日期：2019年2月23日 开发软件与关键技术：Adobe Dreamweaver，jquery 代码如下： 自行引用jquery插件 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;
Jquery实现轮播图效果
weixin_52503404的博客
12-21 3353
Jquery实现轮播图效果 首先是html <div id="box"> <img src="./day6/am/轮播图/img/1.jpg" alt=""> <img src="./day6/am/轮播图/img/2.jpg" alt=""> <img src="./day6/am/轮播图/img/3.jpg" alt=""> <img src="./day6/am/轮播图/img/4.j
原生JS京东轮播图代码
12-11
本文实例为大家分享了JS轮播图的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/reset.css" rel="external nofollow" /> <style> .jiantou { height: 36px; width: 24px; line-height: 36px; text-align: center; background-col
jQuery项目：京东商品详情页
楚璃轩
07-01 2105
目录需求分析代码分析1. 鼠标移入显示,移出隐藏2. 鼠标移动切换二级导航菜单的切换显示和隐藏3. 输入搜索关键字, 列表显示匹配的结果4. 点击显示或者隐藏更多的分享图标5. 鼠标移入移出切换地址的显示隐藏6. 点击切换地址tab7. 鼠标移入移出切换显示迷你购物车8. 点击切换产品选项 (商品详情等显示出来)9. 点击向右/左, 移动当前展示商品的小图片10. 当鼠标悬停在某个小图上,在上方显示对应的中图11. 当鼠标在中图上移动时, 显示对应大图的附近部分区域完整代码 需求分析 鼠标移入显示,移出隐
jQuery京东分类导航菜单
tangtang5963的博客
08-05 1455
$('.all-sort-list > .item').hover(function(){ var eq = $('.all-sort-list > .item').index(this), //获取当前滑过是第几个元素 h = $('.all-sort-list').offset().top, //获取当前下拉菜单距离窗口多少像素 120px s = $(window
jQuery实现仿京东页面的轮播图(带请求数据)
weixin_53141315的博客
03-25 186
jQuery实现仿京东页面的轮播图(带请求数据)
html 图片切换渐变效果,jQuery无缝图片渐变切换特效
weixin_29055699的博客
06-09 227
js代码$(document).ready(function(){var timejg=3000;//轮播间隔时间var size = $('.box_img ul li').size();for(var i=1;i<=size;i++){$('.box_tab').append(''+i+'')}$('.box_img ul li').eq(0).show();$('.box_tab a'...
jquery实现左右轮播图效果
11-27
接下来，这个小案例就是要介绍如何实现这种效果，即这张轮播图上所有的事件. 首先 我们看到轮播图上的有1.左右的小按钮(图片会随着左右的点击移动) 2**重点内容.还有位于中间的小圆点(点击小圆点会跳转到那个图片) ...
jquery实现多图无缝轮播切换图片代码
10-05
- `大头网.url` 是一个快捷方式，可能指向一个与轮播图制作或jQuery相关的在线资源。 - `img` 文件夹通常存放轮播图所需的图片资源。 - `js` 文件夹可能包含实现轮播功能的JavaScript代码，特别是使用jQuery编写的...
jQuery轻量级京东图片轮播代码.zip
07-11
【jQuery轻量级京东图片轮播代码】是一个用于网页中的图片展示功能，它结合了JavaScript库jQuery的强大功能，实现了一种简洁高效的图片轮播效果，类似于京东网站上的商品展示方式。这种轮播代码设计的核心目标是减少...
京东官网CSS-JQuery实现
01-27
同时，JQuery还提供了便利的插件系统，如轮播图插件（如jQuery.Slider）、时间选择插件（jQuery.datetimepicker）等，这些插件在京东官网的很多场景中都有所应用，提高了开发效率并保证了用户体验的一致性。...
jquery实现轮播图
10-27
本示例是利用jQuery库来实现一个类似于淘宝或京东的轮播图效果，它具有良好的用户体验和动态交互性。jQuery是一个轻量级、高性能的JavaScript库，简化了DOM操作、事件处理和动画制作等任务。 首先，`lunbo.html`是...
用jquery实现京东首页轮播图效果 (源码分享)
weixin_65137412的博客
03-30 581
用jquery实现轮播图效果
jQuery 京东轮播图案例（三种实现方式）
qq_43434300的博客
04-04 2010
①源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin:0; padding:0; font-family:微...
jQuery实现京东轮播图
流楚丶格念的博客
01-26 3931
轮播图案例 展示 项目链接 https://download.csdn.net/download/weixin_45525272/14932730 代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>京东商城</title> <style> * { margin: 0; paddi
jQuery实现轮播图
qq_58460470的博客
11-21 3990
jQuery动画的显示与隐藏、淡入淡出、滑动效果的常用方法 实现广告图片的轮播展示效果
Js - 京东轮播图的实现(JQuery)
qq_41912032的博客
11-09 426
文章目录主要功能:运行图:源代码参考:遗留问题: 主要功能: 图片可进行左右切换 自动轮播效果实现 展示图片下方图片列表切换 小圆点可随着图片变换同步展示 运行图: 源代码参考: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s.
使用jQuery实现轮播图
热门推荐
刘小杨的博客
08-22 1万+
大家好，今天给大家带来的就是使用jQuery实现一个简单的轮播图，实现的原理就是： 1、在一个区域内，设置宽高，超出这部分区域就要实现一个隐藏 2、获取图片的大小 为300，索引从0开始 3、当你点击右边的按钮时候，就要实现你点击的按钮的索引加1 让 索引加一乘以图片的大小+px 4、当他实现滑动的时候，加一个animate动画的效果，就欧了 5、右边的效果和左边的一样，都是同理 <!DOCTYPE html> <html lang="en"> <head>
jQuery新闻列表滚动(上下滚动、横向滚动、无缝滚动、停顿滚动)
wangzhneg123的博客
02-28 6930
效果展示： 源码展示： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;jQuery新闻列表滚动(上下滚动、横向滚动、无缝滚动、停顿滚动)&lt;/title&gt; &lt;script src="http:/
使用jquery实现图片轮播
最新发布
05-12
使用jQuery实现图片轮播的步骤如下： 1. 首先，需要准备好需要轮播的图片和相关的HTML结构，一般会使用ul li结构。 2. 在HTML中引入jQuery库和轮播插件（如slick.js、swiper.js等）。 3. 初始化轮播插件，并传入相应的参数（如轮播速度、是否自动播放等）。 4. 如果需要实现轮播的效果，还可以通过CSS设置轮播容器的宽度和高度，并使用定位来实现图片的切换效果。 下面是一个使用slick.js实现图片轮播的示例代码： HTML代码： ```html <div class="slider"> <ul> <li><img src="img/1.jpg"></li> <li><img src="img/2.jpg"></li> <li><img src="img/3.jpg"></li> </ul> </div> ``` CSS代码： ```css .slider { width: 500px; height: 300px; position: relative; } .slider ul { list-style: none; margin: 0; padding: 0; } .slider ul li { position: absolute; top: 0; left: 0; } .slider ul li img { display: block; width: 100%; height: 100%; } ``` JavaScript代码： ```javascript $(document).ready(function() { $('.slider ul').slick({ autoplay: true, // 是否自动播放 autoplaySpeed: 2000, // 自动播放速度 arrows: false, // 是否显示箭头 dots: true // 是否显示分页器 }); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值