Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >带左右箭头切换div的js 原

带左右箭头切换div的js 原

作者头像
tianyawhl
发布于 2019-04-04 08:47:46
发布于 2019-04-04 08:47:46
14.6K00
代码可运行
举报
文章被收录于专栏:前端之攻略前端之攻略
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var index = 0;
var preText = '';
var nextText = '';
$(function(){
 $('.pretext1').text('无');
 $('.nexttext1').text($('.bannerul>li').eq(index+1).find('.zhankong-title').text());
 $('.pre').click(function(){
  if(index == 0) return;
  index--;
  SetHeadTitle(index);

  SetLiVisible(index);
 });
 $('.next').click(function(){
  debugger;
  if(index == $('.bannerul>li').length-1) return;
  index++;
  SetHeadTitle(index);

  SetLiVisible(index);
 });
})
function SetHeadTitle(index)
{
 if(index ==0)
  {
   preText = '无';
   nextText = $('.bannerul>li').eq(index+1).find('.zhankong-title').text();
  }
  else if(index == $('.bannerul>li').length-1)
  {
   preText = $('.bannerul>li').eq(index-1).find('.zhankong-title').text();
   nextText = '无';
  }
  else
  {
   preText = $('.bannerul>li').eq(index-1).find('.zhankong-title').text();
   nextText = $('.bannerul>li').eq(index+1).find('.zhankong-title').text();
  }
  $('.pretext1').text(preText);
  $('.nexttext1').text(nextText);
}
function SetLiVisible(index)
{
 $('.bannerul>li').each(function(i,item){
   $(this).removeClass('bannerliYes');
   $(this).addClass('bannerliNo');
  });
  $('.bannerul>li').eq(index).removeClass('bannerliNo');
  $('.bannerul>li').eq(index).addClass('bannerliYes');
}

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016/04/27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
DOM操作(20171027)
1.旋转木马思想引用 1.demo <script> var btn = document.getElementById("btn"); var box= document.getElementsByClassName("box")[0]; var flag =false; var posi = [{"left":"200","top":"0","opacity":"100"}, {"left":"400","top":"200","opacity":"100"}, {
天天_哥
2018/09/29
5990
自己实现PC端jQuery版轮播图
最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过swiper.js,后来想了想,就不引入它了,免得又得增加依次一次网络请求,项目里既然已经用到了jQuery,那就索性用jQuery写一个轮播图吧。
用户1187932
2018/03/09
11.6K1
自己实现PC端jQuery版轮播图
分页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js图片预览
菜的黑人牙膏
2019/01/21
1.3K0
jquery学习
<1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
菲宇
2019/06/13
2.4K0
写一个问卷调查的功能(熟悉一下Array数组的操作以及对Radio的使用)
首先感谢这个大神的css和js,让我得以实现这个效果,我只是将基本的js实现了,大部分的工作都是这个朋友完成的,他将效果实现的很完美,我只是拿过来将功能完善了一下,原文的可选项很多,但是为了快速实现js的结果运算,我将很多的代码都删除了,最后将结果呈现出来,最后再次感谢这位朋友!
何处锦绣不灰堆
2020/05/29
8470
写一个问卷调查的功能(熟悉一下Array数组的操作以及对Radio的使用)
jQuery 之 元素节点操作滚轮事件与函数节流
元素节点操作 创建节点 var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>'); 插入节点 1、append()和appendTo():在现存元素的内部,从后面插入元素 var $span = $('<span>这是一个span元素</span>'); $('#div1').append($span); ...... <div id="div1"></div> 2、prepend()和prependTo():在现存元素的内部,从前面插入元素
IT架构圈
2018/06/01
1.4K0
Day15:大前端
position: relative, absolute, fixed, static
达达前端
2019/07/15
4K0
Day15:大前端
JavaScript使用(笔记)
//当前点击的标签添加样式,同级别其他标签移除样式 $(this).addClass('hover').siblings().removeClass('hover'); //执行完改Ajax后执行下一步 同步 async:false //{%$argv(0)%}(公司写法)获取页面传入的id id="title_1" var type = "{%$argv(0)%}"; if (type != "") { $("#title_" + type + "").click(); } //默认点击第一个
小语雀网
2022/05/06
2.5K0
JQuery碎碎念
1 JQuery最佳实践 1.1 使用JQuery的ready处理器 $(function () { /* 你的代码 */ }); //或者 $(document).ready(function () { /* 你的代码 */ }); 1.2 用noConflict()避免冲突并定义别名 $jq = jQuery.noConflict(); $jq(function () { /* 你的代码 */ } 1.3 缓存JQuery对象及链式调用 1.3.1 错误的方式 //错误
IT架构圈
2018/06/01
5.8K0
jQuery基础
使用jQuery快速高效制作网页交互特效 第一章-JavaScript基础 上机练习1 练习——统计包含“a”或“A”的字符串的个数 需求说明:使用数组存储一组字符串,并统计包含“a”或“A”的字符串的个数 关键代码: <script type="text/javascript"> var a = ["America","Greece","Britain","Canada","China","Egypt"]; var count = 0; for(var i in a) {
星辰xc
2022/04/09
7.9K0
jQuery基础
jQuery实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.2.1.min.js"></script> <style> * { margin: 0px; padding: 0px; } li { list-style: none; }
人生不如戏
2018/04/12
1.1K0
Ajax方式分页加载列表实现
  最近需要用到这个功能,所以这几天一直在研究这个,目前大致功能已实现,后续需要完善,但需要的功能点已完成,记录下;
JQ实验室
2022/02/09
3.8K0
Web前端JQuery入门实战案例
快速的,轻量级的,功能丰富的 js 库。动画(animation),ajax,DOM,更简单,容易使用的api。
达达前端
2019/07/03
4.2K0
jQuery
jQuery基础 1、    jQuery其实就是一个类库,集成了DOM/BOM/JavaScript的类库 http://jquery.cuishifeng.cn/这个网站里有所有的jQuery
coders
2018/01/04
4.8K0
jQuery
WebUploader 一个页面多次实例化封装
上传图片网上找了比较好的插件WebUploader,但是在一个页面中2次实例化会有问题,现把插件封装了下,例子直接copy可以使用。如果上传失败再次需要上传的话,需要把失败的文件删除点,再重新加进来
tianyawhl
2019/04/04
2.4K0
22.jQuery(实例)
1.开关灯效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <input id="i1" type="button" value="开关" /> <div class="c
zhang_derek
2018/04/11
1.7K0
八、jQuery的QQ音乐播放器
自定义滚动条使用了一个jQuery插件jQuery custom content scroller。利用这个插件可以轻松设置滚动条样式。
Dreamy.TZK
2020/06/22
4.7K0
前台分页,以及类别选择
效果: 前台分页 区别于后台分页的将第几页和共多少条传到后台,再从后台从数据库查询出当前页应该显示的数据返回 前台分页是将所有的数据都查出存到前台,在经过用js进行判断,分页,显示 HTML代码:
二十三年蝉
2018/03/01
1.7K0
前台分页,以及类别选择
jQuery选择器 和用jQuery 实现 Tab 切换效果(1)
通过类数组下标的获取方式或者get方法获取指定index的DOM对象,也就是我们说的jQuery对象转DOM对象
bamboo
2019/01/29
4.3K0
jQuery选择器 和用jQuery 实现 Tab 切换效果(1)
图片轮播(左右切换)--JS原生和jQuery实现
左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分
书童小二
2018/09/03
83.9K1
图片轮播(左右切换)--JS原生和jQuery实现
相关推荐
DOM操作(20171027)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档