jQuery带缩略图轮播效果图片切换带缩略图完整Demo

最新推荐文章于 2024-06-26 11:48:50 发布
最新推荐文章于 2024-06-26 11:48:50 发布
阅读量7.8k 收藏 27
点赞数 2
分类专栏： 软件开发 Java Demo 图片轮播
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiaqu2177/article/details/81232868
版权
软件开发 同时被 3 个专栏收录
15 篇文章 0 订阅
订阅专栏
Demo
5 篇文章 0 订阅
订阅专栏
Java
4 篇文章 0 订阅
订阅专栏

在做项目的时候我们经常遇到需要切换查看图片的需求，自己写又太麻烦，网上的例子又太复杂，今天带来一个简单的左右切换demo，可直接使用！
这里写图片描述

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery带缩略图轮播效果</title>
        <link href="css/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div class="banner">
            <div class="large_box">
                <ul>
                    <li>
                        <img src="images/img1.jpg" width="600" height="350">
                    </li>
                    <li>
                        <img src="images/img2.jpg" width="600" height="350">
                    </li>
                    <li>
                        <img src="images/img3.jpg" width="600" height="350">
                    </li>
                    <li>
                        <img src="images/img4.jpg" width="600" height="350">
                    </li>
                    <li>
                        <img src="images/img5.jpg" width="600" height="350">
                    </li>
                    <li>
                        <img src="images/img6.jpg" width="600" height="350">
                    </li>
                </ul>
            </div>
            <div class="small_box">
                <span class="btns lefts_btn" onclick="left_btn()"></span>
                <div class="small_list">
                    <ul>
                        <li class="on">
                            <img src="images/img1.jpg" width="100" height="50">
                            <div class="bun_bg"></div>
                        </li>
                        <li class="">
                            <img src="images/img2.jpg" width="100" height="50">
                            <div class="bun_bg"></div>
                        </li>
                        <li class="">
                            <img src="images/img3.jpg" width="100" height="50">
                            <div class="bun_bg"></div>
                        </li>
                        <li class="">
                            <img src="images/img4.jpg" width="100" height="50">
                            <div class="bun_bg"></div>
                        </li>
                        <li class="">
                            <img src="images/img5.jpg" width="100" height="50">
                            <div class="bun_bg"></div>
                        </li>
                        <li class="">
                            <img src="images/img6.jpg" width="100" height="50">
                            <div class="bun_bg"></div>
                        </li>
                    </ul>
                </div>
                <span class="btns rights_btn" onclick="right_btn()"></span>
            </div>
        </div>
        <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            /* 左按钮 */
            function left_btn(){
                var i;
                var l = $(".small_list").find("ul li").length;
                $(".small_list").find("ul li").each(function(index){
                    if($(this).hasClass("on")){
                        i = index;
                    }
                });
                i--;
                if(i < 0){
                    i = l - 1;
                }
                t = i;
                Img(i)
            };

            /* 右按钮 */
            function right_btn(){
                var i;
                var l = $(".small_list").find("ul li").length;
                $(".small_list").find("ul li").each(function(index){
                    if($(this).hasClass("on")){
                        i = index;
                    }
                });
                i++;
                if(i > l-1){
                    i = 0;
                }
                t = i;
                Img(i);
            };

            /* 图片 */
            function Img(i){
                var l = $(".small_list").find("ul li").length;
                var l_mean;
                if(l < 5){
                    l_mean = 0;
                }else{
                    l_mean = ((parseInt(l / 5) - 1) * 5) + (l % 5);
                }
                var w = 110;
                $(".large_box").find("ul li").eq(i).fadeIn().siblings().hide();
                $(".small_list").find("ul li").eq(i).addClass("on").siblings().removeClass("on");
                var ml = i * w;
                if(ml <= l_mean * w){
                    $(".small_list").find("ul").stop().animate({
                        marginLeft: -ml + "px"
                    })
                }else{
                    $(".small_list").find("ul").stop().animate({
                        marginLeft: -(l_mean * w) + "px"
                    })
                }
            }
        </script>
    </body>
</html>

style.css

body,div,ul,li{
    margin:0;
    padding:0;
}
ul{
    list-style:none;
}
img{
    border:0;
}
.banner{
    margin:30px auto 0;
    width:635px;
}
.large_box{
    margin-bottom:10px;
    width:600px;
    height:350px;
    overflow:hidden;
}
.large_box img{
    display:block;
}
.small_box{
    width:600px;
    height:73px;
    overflow:hidden;
}
.small_list{
    position:relative;
    float:left;
    width:550px;
    height:73px;
    overflow:hidden;
}
.small_list ul{
    height:50px;
    overflow:hidden;
}
.small_list ul li{
    position:relative;
    float:left;
    margin-right:10px;
    width:100px;
}
.small_list ul li img{
    display:block;
}
.small_list ul li .bun_bg{
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:50px;
    background:#FFF;
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity:0.6;
    opacity:0.6;
}
.small_list ul li.on .bun_bg{
    display:block;
}
.btns{
    display:block;
    width:20px;
    height:50px;
    background-color:#777;
    background-repeat:no-repeat;
    background-position:center center;
    cursor:pointer;
}
.btns:hover{
    background-color:#333;
}
.lefts_btn{
    float:left;
    margin-right:10px;
    background-image:url(../images/left_btn.png);
}
.rights_btn{
    float:right;
    background-image:url(../images/right_btn.png);
}
切换图片

左切换图片：点击下载
右切换图片：点击下载

JQuery

最后将自己本地的JQuery文件引用进去，就可以直接运行！
注意需要自己添加图片或者修改图片的名称，还有注意 index 和 css 中图片的路径；

江城This
关注
  • 2
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
vue3.2中使用swiper缩略图轮播教程
Shivy_的博客
02-21 1606
vue3.2中使用swiper缩略图轮播教程
jQuery带缩略图轮播效果图片切换带缩略图
weixin_30357231的博客
12-31 1062
以上为效果图 HTML代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel=stylesheet type=tex...
带多种过渡动画与缩略图的jQuery焦点图
06-09
本jQuery焦点图代码是一款带有缩略图，并且它在切换过渡是带有多种动画效果。
纯CSS实现带缩略图的简单图片自动轮播
最新发布
uu0216的博客
06-26 250
为实现图片看起来无缝滚动，大图列表的最后一个图片应与第一张图片相同，所以大图列表是5行。当然，对比js实现的轮播，它还有些不足（不能控制前一张，后一张），但对于一些简单的需求，它还是可以拿来应用的。如果您需要复杂可控的 焦点图轮播 请参考我的另一篇文章：JS+CSS实现的很酷的焦点图（仿优酷首页首屏焦点切换）。简单介绍一下本篇文章的实现目标：固定数量的图片轮播，鼠标移动到大图上时滚动暂停，没有复杂的控制功能，不使用JavaScript。接下来，进行最后的细节整理：当鼠标移动到大图上时，暂停图片轮播动画。
vue中实现带缩略图得轮播图（swiper）
l17862868372的博客
12-06 2895
记录一下vue实现带缩略图得轮播图 swiper版本一定要对，高了或者低了都可能会出问题 1.引入swiper和vue-awesome-swiper插件 npm install swiper@4 --save npm install vue-awesome-swiper@3 --save 2.在main.js中引入： import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use.
jquery图片轮播带缩略图
☆╮123☆
06-05 660
（1）html 标签： div class="lb_list"> span class="btn left_btn">span> div class="large_box"> ul> li> img src="images/img1.jpg" width="530" height="350">
jQuery带有呼吸的缩略图(含完整源码)
执念斩长河
06-02 587
在制作这个特效时，左右按钮的事件监听一定要注意，会发生什么，图片会动缩略图会动，当单击缩率图时，大图会动，也要考虑，最后代码运行，收获喜悦。
jquery带有缩略图的轮播
06-24
jquery带有缩略图的轮播
jquery带缩略图的轮播图代码
12-12
这是一款简单实用的jquery带缩略图的轮播图代码。该轮播图在每张图片中都配有说明文字和缩略图，它实用简单，兼容ie8+的所有现代浏览器。
jQuery左右滚动支持图片放大缩略图图片轮播代码(附demo,可直接用)
02-26
本项目"jQuery左右滚动支持图片放大缩略图图片轮播代码"提供了一种高效的解决方案，包含了一个可直接使用的demo，下面我们将详细探讨这个轮播代码的关键知识点。 首先，jQuery的`.animate()`方法是实现左右滚动的...
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
01-19
demo04.html 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <...手动滚动图片</title> <style type=”tex
jquery点击缩略图片滚动切换大图片详情展示
10-31
jquery点击缩略图片滚动切换大图片详情展示 jquery点击缩略图片滚动切换大图片详情展示
jquery实现的带缩略图的焦点图片切换
01-23
"jquery实现的带缩略图的焦点图片切换"是一个利用jQuery库创建的此类功能的例子。jQuery是一个轻量级、高性能的JavaScript库，简化了HTML文档遍历、事件处理、动画以及Ajax交互，使得开发动态网页变得更加容易。 该...
附带缩略图的JS图片轮换 2特效代码
03-20
【标题】"附带缩略图的JS图片轮换 2特效代码"涉及到的是网页中一种常见的图片展示技术，即图片轮换效果。在网页设计中，为了吸引用户注意力或者展示多张图片，设计师通常会使用图片轮换功能。这种特效能够自动切换...
Jquery带缩略图轮播图,左右结构,可放大轮播图
mmaqueshibei的博客
04-16 353
carousel.min.js下载。
jQuery带缩略图轮播图插件
ICode联盟
04-12 404
下载地址 很好用的jQuery轮播图插件，带缩略图当做索引，所有缩略图都排列在下方，点击缩略图即可切换到对应的图片；切换时有淡入淡出的效果，切换十分流畅。 dd:
android 图片轮播带缩略图,超酷响应式带缩略图的jQuery轮播图插件
weixin_35996612的博客
06-04 298
PgwSlideshow是一款非常实用的响应式、支持触摸屏的jQuery轮播图插件。该轮播图插件带有缩略图预览效果，可以根据容器的大小自适应图片的宽度。你也可以自定义轮播图的高度，图片宽度会根据高度等比例匹配。该轮播图插件的特点有：响应式设计支持桌面和移动手机设备轻量级，压缩后只有4kb可以通过CSS来自定义轮播图的样式使用方法该轮播图插件依赖于jQuery(1.0以上版本)或Zepto(1.0以...
jQuery+swpier实现轮播图（左边大图右边小的缩略图），附Vue实现案例
chenacxz的博客
12-19 1623
代码文件，Vue代码在文件里，下载即可使用 链接: https://pan.baidu.com/s/1Ul2ImTYgiqJHgqqW9ptmww 提取码: 1pmf 先附实现效果 引入文件 <link rel="stylesheet" type="text/css" href="css/swiper.css"> <link rel="stylesheet" ...
有缩略图的广告轮播图html,jQuery带缩略图的响应式弹性轮播图插件
weixin_39781186的博客
06-27 2489
这是一款jQuery和css3带缩略图的响应式弹性轮播图插件。该插件图片轮播时带弹性缓冲效果，并且该插件使响应式的，为了做到这一点，插件中使用了css和javascript混合的技术。HTMLhtml结构使用两个无序列表，一个用来放置轮播图，一个用来放置缩略图。轮播图无序列表中的每个子项包括一个h2标题、一个h3标题和一张图片： CreativeGeek...CurrentS...
jquery手风琴图片轮播切换
05-19
jQuery手风琴图片轮播切换是一种常用的网页图片轮播效果，可以让网页内容更加生动，增强用户体验。手风琴效果是指在图片轮播时，当前图片会被放大，其他图片则会被压缩。以下是该效果的实现步骤： 1. HTML结构：...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

江城This

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值