Jquery轮播图详解

最新推荐文章于 2021-12-19 19:05:39 发布
最新推荐文章于 2021-12-19 19:05:39 发布
阅读量357 收藏 1
点赞数
分类专栏： Jquery html 文章标签： 轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Superman_xing/article/details/81282479
版权

示例如下：
这里写图片描述
HTML代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>横向滑动的悬停焦点图全代码</title>
<script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="slideBox">
    <ul>
        <li><img src="image/001.jpg" alt="" width="300" height="480"/></li>
        <li><img src="image/002.jpg" alt="" width="300" height="480"/></li>
        <li><img src="image/003.jpg" alt="" width="300" height="480"/></li>
        <li><img src="image/004.jpg" alt="" width="300" height="480"/></li>
        <li><img src="image/005.jpg" alt="" width="300" height="480"/></li>
        <li><img src="image/006.jpg" alt="" width="300" height="480"/></li>
    </ul>
    <div class="spanBox">
        <span class="active">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
    <div class="prev"><span>&lt<span></div>
    <div class="next"><span>&gt</span></div>
</div>
</body>
</html>

CSS代码段

<style>
*{
    padding:0px;
    border:0px;
    margin:0px;
}
ul {
    list-style:none;
}
.slideBox {
    margin:50px auto;
    width:300px;
    height:480px;
    box-shadow:2px 2px 10px #C38DD4;
    border-radius:20px;
    position:relative;
    overflow:hidden;
}
.slideBox ul {
    position:relative;
    width:2000px;}
.slideBox ul li {
    float:left;
    width:300px;
    height:480px;
    position:relative;

}
.spanBox {
    position:absolute;
    width:300px;
    height:20px;
    bottom:10px;
    left:80px;
}
.spanBox span {
    width:18px;
    height:18px;
    margin-left:5px;
    background-color:rgba(201,178,207,1.00);
    float:left;
    line-height:16px;
    text-align:center;
    text-shadow:2px 2px 2px #C5EBF0;
    font-family:cabin-sketch;
    font-size:15px;
}
.slideBox .spanBox .active {
    background-color:rgba(155,83,244,0.79);
    border:solid 1px #BEEBEC;
    border-radius:4px;
}
.prev span{
    position:relative;
    bottom:240px;
    font-size:40px;
    font-weight:bold;
    opacity:0.5;
    float:left;
    cursor:pointer;
}
.next span{
    position:relative;
    bottom:240px;
    float:right;
    font-size:40px;
    font-weight:bold;
    opacity:0.5;
    cursor:pointer;
}
</style>

Jquey代码段

<script type="text/javascript">
$(document).ready(function(){
     var slideBox = $(".slideBox");
     var ul = slideBox.find("ul");
     var oneWidth = slideBox.find("ul li").eq(0).width();
     var number = slideBox.find(".spanBox span");            //注意分号 和逗号的用法
     var timer = null;
     var sw = 0;                    
     //每个span绑定click事件，完成切换颜色和动画，以及读取参数值
     number.on("click",function (){
         $(this).addClass("active").siblings("span").removeClass("active");
         sw=$(this).index();
         ul.animate({
            "right":oneWidth*sw,    //ul标签的动画为向左移动；
         });
     });
     //左右按钮的控制效果
     $(".next").stop(true,true).click(function (){
         sw++;
         if(sw==number.length){sw=0};
         number.eq(sw).trigger("click");
     });
    $(".prev").stop(true,true).click(function (){
        sw--;
        if(sw == number.length){sw = 0};
        if(sw == -1){sw = number.length - 1};
        number.eq(sw).trigger("click");
    });
    //定时器的使用，自动开始
    timer = setInterval(function (){
        sw++;
        if(sw==number.length){sw=0};
        number.eq(sw).trigger("click");
        },2000);
    //hover事件完成悬停和，左右图标的动画效果
    slideBox.hover(function(){
        $(".next,.prev").animate({
            "opacity":1,
            },200);
        clearInterval(timer);
        },
        function(){
            $(".next,.prev").animate({
                "opacity":0.5,
                },500);
        timer = setInterval(function (){
            sw++;
            if(sw==number.length){sw=0};
            number.eq(sw).trigger("click");
        },2000);
    })

})
</script>
Mason丶Liu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现轮播图及其原理详解
12-09
本文实例为大家分享了jQuery实现轮播图及其原理的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>JQuery轮播图</title> <style> *{ padding:0; margin:0; } .container{ wid
jquery轮播图画廊轮播图幻灯片
最新发布
12-07
**jQuery轮播图详解** jQuery轮播图是一种常见的网页元素，用于展示一组图片或内容，通过自动切换或用户交互来实现动态展示效果。在网页设计中，它常被用于产品展示、图片画廊或者新闻滚动等场景。jQuery库提供了...
图片轮播，自己和大神写的比较
wangfengqingyang的专栏
09-24 674
自己写的: 大神写的： style> #focus{width:500px;height:200px;overflow:hidden;/*用一个div把图片包含设置超出范围隐藏*/} style> div id="focus"> img src="xx.jpg" width="500" height="200"> img src="xx.jpg" width="500" 
用jquery实现图片轮播
baixishi8431的博客
06-08 706
用jquery简单实现图片轮播效果，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> ...
jQuery轮播图(详细注释)
m0_62816172的博客
12-19 1802
js渣渣也能简单做出 在理想情况下用 吧外层div的class名起为banner ul li的布局 下面是css代码放图片的li记得浮动； .banner { width: 15rem; height: 5.22rem; position: relative; overflow: hidden; } .banner ul { width: 60rem; height: 5.22rem; position: absolute; } .banner ul li { f..
jQuery深入之大图轮播原理.
weixin_34355881的博客
02-17 177
也是用了很久的jQuery. 最近也在写自己的那个小站。对于一些特效还是想弄清一原理。让自己对一些东西有更深入的了解。 说说大图轮播的原理： 1.很多时候使用方法Ul列表去展示。当然这也有一些好处，比如float对齐之类的。当然直接用p或者div也行。 2.了解overflow属性。在溢出情况下的处理。其实轮播就是在不断的处理li溢出的情况。 3 jQuery anima...
jQuery轮播图实例详解
10-18
主要为大家详细介绍了jQuery轮播图的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery轮播图插件使用方法详解
11-19
首先，我们需要理解jQuery轮播图的基本结构。在提供的代码片段中，我们可以看到HTML部分包含了轮播图的容器、图片列表、下标容器以及左右切换按钮。这些元素是构建轮播图的基础： ```html <li><img src="img/1....
jQuery轮播图功能制作方法详解
10-15
jQuery轮播图功能是一种常见的网页动态效果，用于展示多张图片或内容的自动切换，通常包括左右箭头控制、自动播放、指示点等功能。下面将详细介绍如何使用jQuery实现轮播图功能。 首先，我们需要一个HTML结构来承载...
原生js+jquery实现轮播图+思路详解（超简单）
我爱吃蛋挞的博客
07-17 1668
序言： 现在有很多方法可以写一个轮播图，框架，css3 ，bootstarp等都可以做出一个漂亮的轮播图，为了提高js能力 现在用原生js和jq各写一个轮播图。 思路详解： 先实现轮播图可以自左到右轮播，轮播到最后一张图时，反向轮播，转移至反复循环。 可以用左右键来控制图片轮播的方向。 点击下方的小按钮来选择某张图片 HTML部分： <div class="box"> &...
jQuery 实现轮播图
11-11
使用jQuery实现的简单轮播图。。
JQuery轮播图
02-25
JQuery实现轮播图 里面是核心代码部分
使用jQuery实现的平滑滚动轮播图
08-28
/* * 功能说明： * 1.点击向左（右）的图标 ，平滑的切换到上（下）页。 * 2，无限的循环切换：第一页的商业为最后一页 ，最后一页的下，一张为第一页 * 3，每隔3秒自动切换到下一页 * 4，当鼠标进入图片区域时，自动切换停止 ，当鼠标离开时，又开始自动切换 * 5，切换页面时 ，下面的圆点也跟着同步切换 * 6，点击圆点切换对应的页。 * */
jQuery实现的自定义轮播图功能详解
10-17
主要介绍了jQuery实现的自定义轮播图功能,结合实例形式详细分析了轮播图的原理、实现步骤及相关操作技巧,需要的朋友可以参考下
基于JQuery实现的轮播图
EarlEcho
08-18 696
HTML代码<div class="carousel-figure clearfix"> <div class="carsoul-box clearfix"> <a class="ig" href="#"><img src="image/carsoul1.png"/></a> <a class="ig" href="#"><img src="image/6.p
JQuery实现轮播图及其原理
weixin_30809173的博客
08-16 182
源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scala...
轮播图
aha1234567890的博客
11-30 104
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/1.9.1/...
jQuery实现图片轮播效果
justforuse的博客
01-22 1386
图片轮播是一个老生常谈的东西，今天跟着书上写了一个demo。（参考《锋利的jQuery》） 　　　要实现的功能，图片可以向左向右滚动，自动循环播放，并且可以跳转至指定页面。 　　　查看示例　　　图片滚动效果主要用到的东西就是position:absolute 和 left: 0; overflow：hidden属性，用于定位图片和隐藏显示多余图片。 　　　具体代码可以点开示例链接——查看网页源
JQuery轮播图（requireJS）
花花的博客
05-28 497
&lt;script src="../require.js" data-main="index"&gt;&lt;/script&gt;在html文件中先引入require文件，并加载index页面级js文件index.js：require(['carousel'],function(Carousel){}引用carousel.js文件，传参数var carousel1=new Carousel()...
jQuery基础教程详解（第2版）
6. **插件系统**：jQuery拥有丰富的插件生态系统，可以扩展其功能，如表单验证、轮播图、日期选择器等。 jQuery的轻量级特性使其加载速度快，而广泛的浏览器兼容性确保了在不同环境下的一致表现。对于初学者，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值