jquery 点击按钮双向双图轮播

最新推荐文章于 2023-09-14 18:36:20 发布
最新推荐文章于 2023-09-14 18:36:20 发布
阅读量1.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011603196/article/details/19497981
版权 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>图片左右滚动</title>
<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script>
    //轮播图
$(function(){

var i=0;
var li = $(".lxfscroll li");
var n=li.length-1;
var speed = 300;
li.not(":first").css({left:"400px"});
li.eq(n).css({left:"-400px"});

var i2=0;
var li2 = $(".lxfscroll2 li");
var n2=li2.length-1;
var speed = 300;
li2.not(":first").css({left:"400px"});
li2.eq(n).css({left:"-400px"});


lxfNext=function (){
if (!li.is(":animated")) {
                if (i >= n) {
                    i = 0;
                    li.eq(n).animate({left: "-400px"}, speed);
                    li.eq(i).animate({left: "0px"}, speed);
                } else {
                    i++;
                    li.eq(i - 1).animate({left: "-400px"}, speed);
                    li.eq(i).animate({left: "0px"}, speed);
                }
                ;
                li.not("eq(i)").css({left: "400px"});
                $("i").text(i + 1);
            } else {
            }
            ;
if (!li2.is(":animated")) {
                if (i2 >= n) {
                    i2 = 0;
                    li2.eq(n).animate({left: "-400px"}, speed);
                    li2.eq(i).animate({left: "0px"}, speed);
                } else {
                    i2++;
                    li2.eq(i - 1).animate({left: "-400px"}, speed);
                    li2.eq(i).animate({left: "0px"}, speed);
                }
                ;
                li2.not("eq(i)").css({left: "400px"});
                $("i").text(i2 + 1);
            } else {
            }
            ;            
        };
lxfLast = function() {
    if (!li.is(":animated")) {
        if (i <= 0) {
            i = n;
            li.eq(0).animate({left: "400px"}, speed);
            li.eq(n).animate({left: "0px"}, speed);
        } else {
            i--;
            li.eq(i + 1).animate({left: "400px"}, speed);
            li.eq(i).animate({left: "0px"}, speed);
        }
        li.not("eq(i)").css({left: "-400px"});
        $("i").text(i + 1);
    }
    ;
    if (!li2.is(":animated")) {
        if (i2 <= 0) {
            i2 = n;
            li2.eq(0).animate({left: "400px"}, speed);
            li2.eq(n).animate({left: "0px"}, speed);
        } else {
            i2--;
            li2.eq(i + 1).animate({left: "400px"}, speed);
            li2.eq(i).animate({left: "0px"}, speed);
        }
        li2.not("eq(i)").css({left: "-400px"});
        $("i").text(i2 + 1);
    }
    ;    
};
});
</script>
<style type="text/css">
* {
font-size:12px;
color:#333;
text-decoration:none;
padding:0;
margin:0;
list-style:none;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
}
.lxfscroll {
width:400px;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
overflow: hidden;
position: relative;
height: 300px;
border: 1px dashed #CCC;
}
.lxfscroll2 {
width:400px;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
overflow: hidden;
position: relative;
height: 300px;
border: 1px dashed #CCC;
}
.button {
margin-right:auto;
margin-left:auto;
width:400px;
text-align:center;
padding-top: 10px;
}
i {
color:#F00;
font-weight:bold;
}
.button input {
padding-top: 4px;
padding-right: 12px;
padding-bottom: 4px;
padding-left: 12px;
}
.lxfscroll ul li {
height: 300px;
width: 400px;
text-align: center;
line-height: 300px;
position: absolute;
font-size: 40px;
font-weight: bold;
}
.lxfscroll2 ul li {
height: 300px;
width: 400px;
text-align: center;
line-height: 300px;
position: absolute;
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<!--<div class="lxfscroll">
<ul>
<li>我是第1张图片</li>
<li>我是第2张图片</li>
<li>我是第3张图片</li>
<li>我是第4张图片</li>
<li>我是第5张图片</li>
<li>我是第N张图片</li>
</ul>
</div>-->
    
                <div class="focus_box">
                    <div class="lxfscroll">
                        <ul>
                            <li><a href="#"><img src="/static/images/default/pic_1.png" alt="" />1</a></li>
                            <li><a href="#"><img src="/static/images/default/pic_2.png" alt="" />2</a></li>
                            <li><a href="#"><img src="/static/images/default/pic_3.png" alt="" />3</a></li>
                            <li><a href="#"><img src="/static/images/default/pic_4.png" alt="" />4</a></li>
                            <li><a href="#"><img src="/static/images/default/pic_5.png" alt="" />5</a></li>
                            <li><a href="#"><img src="/static/images/default/pic_6.png" alt="" />6</a></li>
                            <li><a href="#"><img src="/static/images/default/pic_7.png" alt="" />7</a></li>
                        </ul>
                    </div>



                        <div class="lxfscroll2">
                            <ul>
                                <li><a href="#"><img src="/static/images/default/pic_11.png" alt="" />1</a></li>
                                <li><a href="#"><img src="/static/images/default/pic_12.png" alt="" />2</a></li>
                                <li><a href="#"><img src="/static/images/default/pic_13.png" alt="" />3</a></li>
                                <li><a href="#"><img src="/static/images/default/pic_14.png" alt="" />4</a></li>
                                <li><a href="#"><img src="/static/images/default/pic_15.png" alt="" />5</a></li>
                                <li><a href="#"><img src="/static/images/default/pic_16.png" alt="" />6</a></li>
                                <li><a href="#"><img src="/static/images/default/pic_17.png" alt="" />7</a></li>
                            </ul>
                        </div>

                </div>    
    
    
    
    
    
<div class="button">
<input name="a" type="button" onClick="lxfLast()" value="上一个" />
<input name="a" type="button" onClick="lxfNext()" value="下一个" />
</div>
<div class="button">当前显示的是第 <i>1</i> 张图片</div>
</body>
</html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>

土肥圆子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
两个轮播滑块互相控制
09-10
两个轮播滑块互相控制 这里需要引用的css 和 js 都需要去http://www.swiper.com.cn/download/index.html swiper中文网下载 这个也是参照swiper例子以及api 改的
疯狂前端开发讲义 jQuery AngularJS Bootstrap前端开发实战
05-08
在前端开发领域，jQuery、AngularJS和Bootstrap是三个极为重要的技术框架，它们分别在不同的层面上解决了网页开发中的各种问题，极大地提高了开发效率和用户体验。接下来，我们将详细探讨这三个技术的核心概念、应用...
双向箭头轮播图html,swiper轮播图配合nextTick的使用
weixin_35089715的博客
06-20 151
本课程讲了Vue3+Vue2入门基础与实战，其中还重点讲解了ES6、TypeScript这些基础知识，实战是价值5000元的真实企业级项目---仿京东电商网站，项目代码全部赠送，还赠送前后端架构模板，工作中直接使用。VUE是目前热门的前端框架之一，薪资很高，本课程教您如何快速学习VUE并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或...
一个控制器两个轮播
weixin_30449453的博客
06-27 138
前几天写了一个轮播,在一个控制器里面有两个轮播,刚开始写的时候思路全是错的,发现睡了一晚上灵感就来了 思路:首先一个控制器要有上下轮播和左右轮播 　　上下轮播几乎我们自己都会写,而且网上插件也可多什么样的效果我们都可以写 　　左右轮播如上下轮播一样,例子啊,效果啊五花八门. 　　但是两个轮播合在一起怎么写呢 　　两个箭头控制两个轮播器 　　废话不多说上代码,木有什么是代码解决不了的问题...
用jQuery来实现图片轮播
weixin_37931239的博客
03-16 306
首先要导入插件 script src="js/jquery.min.js" type="text/javascript">script> HTML代码： div class="OutDiv"> 图片--> ul class="imgList"> li class="imgOn">a href="#">img src="images/01.jpg">
用kotlin写一个按钮的点击事件，让两张图片轮换
jintingbo的专栏
05-27 1605
废话不说，直接上干货： 开发工具：Android Studio 4.1.3 开发语言：kotlin 重要的话写在前面： 要做两张或多张图片轮流交换，必须要得到图片的id号，而这个正在显示的图片的id号是不好直接得到的， 但可以使用getTag()得到。 以下程序就是通过这个“窍门” 弄出的结果 ：） 第一步：准备两张图片jpg或png都可以，文件名为ab1.jpg和ab2.jpg 第二步：新建一个新的Android新工程，在编程环境下，将这两张图片拷贝粘贴到drawable资源目录下。 .
js jquery封装无缝轮播功能.docx
11-24
在jQuery版本的无缝轮播中，作者选择封装一个双向循环链表，这种设计允许元素在轮播结束时无缝地返回到起始位置，创造出无限循环的效果。 该程序提供了一系列基础功能，如设置轮播数据、自动轮播、添加侧边和轮播...
Jquery结合angular.js与bootstrap.js实现的无刷新翻页+查找特效源码.zip
11-06
Bootstrap的核心组件包括网格系统、导航、表单、按钮、模态框等，而其JavaScript插件如carousel（轮播图）和dropdowns（下拉菜单）为网页添加了动态效果。 在这个项目中，jQuery可能被用来增强Bootstrap的...
简单个性幻灯博客整站模板_简单个性幻灯博客整站花店外贸.rar
09-12
DualSlider则可能是一个实现双向滑动效果的组件，常用于展示幻灯片或产品轮播。 3. **ddsmoothmenu.css**：这个文件可能关联到DD Smooth Menu，一个创建平滑滚动的下拉菜单的JavaScript插件。这种菜单在网站导航中...
horns-gallery
03-29
2. **滑动展示**：JavaScript可以实现图片轮播或滑动效果，用户可以通过点击按钮或手势来切换图片，增强了画廊的视觉吸引力。 3. **响应式设计**：JavaScript可以检测用户的设备类型和屏幕尺寸，从而调整布局以适应...
网站前端——图片左右切换（轮播图）
09-15
可以在网页实现图片左右切换，即轮播图。使用bootstraps框架，不需要css、js文件。导入即可使用。图片的数量和样式可自由更改。
jquery树状图
08-24
jquery树状图
实现图片点击左右轮播
weixin_30664539的博客
07-06 488
这个 相当于一个小框架，拿来就可以用： 1. 功能： 如上图显示： 点击左右两个button，可以实现图片向左右滚动，也可以设置在多少秒自己滚动。 2. 首先建立一个js文件，文件名为play.js（只要和HTML中的引入相同就可以了）： 1 var sina = { 2 $: function(objName) { 3 i...
jquery(图片轮播)
火火的专栏
04-15 432
jquery(图片轮播) 在可视范围我们只看到两张图片，在一起滑动； 既然只看到两张图片，那我们就可以只设定两个img标签； 两张图片一起移动时，当第一个img标签移过可视区域，改变它的位置（初始时第二张图片的位置），轮流循环； 要达到平滑的移动就要用到jquery中的animate动画效果，animate中（可选的 callback 参数是动画完成后所执行的函数名称。//比较重要，在这里改变图片的
Swiper双向轮播
a115544的博客
06-22 295
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-wid...
轮播图，实现点击上下切换图片的方法
weixin_30892987的博客
03-23 548
function one (type){ document.getElementById("a").innerHTML ='<img src="img/'+type+'">'}var d = 5;function two (type){ document.getElementById("a").innerHTML = '<img src="img/'+d+'.jpg">';...
使用Jquery实现轮播图
最新发布
jiaohuizhuang6019的博客
09-14 1833
使用Jquery实现轮播图
一个页面添加两个swiper轮播
weixin_42477164的博客
04-26 1371
结构如下，每个'main-content'里都有一个‘swiper-container’。（对于swiper插件自带的class名，我们在引用swiper的时候不要修改，如果要对样式做修改或者添加新的js效果，可以添加新的类名或者id） 比如我的这两个swiper自定义了class名 ：'swiper1' 'swiper2' 第一个swiper左右按钮：‘swiper-b...
控制多组图片切换
湘中小霸王的博客
12-01 306
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box1, #box2 { width: 300px; height: 300px; margin-to
使用jquery的siblings函数完成图片轮播
05-31
最后，我们使用 `click` 函数为轮播按钮绑定点击事件，当点击按钮时，我们获取其索引值，更新 `slideIndex` 变量，并调用 `showSlide` 函数显示指定索引的图片和按钮。最后，我们使用 `setInterval` 函数每隔 5 秒钟...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值