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.2K00
代码可运行
举报
文章被收录于专栏:前端之攻略前端之攻略
运行总次数: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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
自己实现PC端jQuery版轮播图
最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过swiper.js,后来想了想,就不引入它了,免得又得增加依次一次网络请求,项目里既然已经用到了jQuery,那就索性用jQuery写一个轮播图吧。
用户1187932
2018/03/09
11.5K1
自己实现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
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
5870
Day15:大前端
position: relative, absolute, fixed, static
达达前端
2019/07/15
4K0
Day15:大前端
写一个问卷调查的功能(熟悉一下Array数组的操作以及对Radio的使用)
首先感谢这个大神的css和js,让我得以实现这个效果,我只是将基本的js实现了,大部分的工作都是这个朋友完成的,他将效果实现的很完美,我只是拿过来将功能完善了一下,原文的可选项很多,但是为了快速实现js的结果运算,我将很多的代码都删除了,最后将结果呈现出来,最后再次感谢这位朋友!
何处锦绣不灰堆
2020/05/29
8410
写一个问卷调查的功能(熟悉一下Array数组的操作以及对Radio的使用)
Web前端JQuery入门实战案例
快速的,轻量级的,功能丰富的 js 库。动画(animation),ajax,DOM,更简单,容易使用的api。
达达前端
2019/07/03
4.1K0
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
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选择器(20171026)
一.jq与js再比较看优势 看案例(好友列表) 结构: <div id="con" class="center"> <ul id="friendslist"> <li> <p class="border_bottom">我的好友</p> <ul> <li>张三</li> <li>李四</li> <li>王五</li>
天天_哥
2018/09/29
1.1K0
jQuery选择器 和用jQuery 实现 Tab 切换效果(1)
通过类数组下标的获取方式或者get方法获取指定index的DOM对象,也就是我们说的jQuery对象转DOM对象
bamboo
2019/01/29
4.2K0
jQuery选择器 和用jQuery 实现 Tab 切换效果(1)
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
jQuery基础 1、    jQuery其实就是一个类库,集成了DOM/BOM/JavaScript的类库 http://jquery.cuishifeng.cn/这个网站里有所有的jQuery
coders
2018/01/04
4.8K0
jQuery
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.8K0
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.7K0
jquery学习
<1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
菲宇
2019/06/13
2.4K0
简书搜索自动匹配功能
今天周六,我又来分享知识啦。最近一直在忙项目,所以趁着这个周末,喝着咖啡,听着音乐,敲着代码就把做项目的知识点总结给大家,简直不要太惬意,哈哈。
wblearn
2018/08/27
1.8K0
简书搜索自动匹配功能
WebUploader 一个页面多次实例化封装
上传图片网上找了比较好的插件WebUploader,但是在一个页面中2次实例化会有问题,现把插件封装了下,例子直接copy可以使用。如果上传失败再次需要上传的话,需要把失败的文件删除点,再重新加进来
tianyawhl
2019/04/04
2.3K0
JQuery 实现开发常用功能
标签克隆的两种实现方式: <body> <div> <p> <a onclick="Add(this)">+</a> <input type="text"/> </p> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> function Add(ths) {
王 瑞
2022/12/28
5.5K0
腾讯QQ音乐点歌系统
<!DOCTYPE html> <html>     <head>         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">         <title>腾讯QQ音乐点歌系统---eagle天堂盲鹰</title>         <meta name="Keywords" content="关键字,关键字">         <meta name="description" content
山海散人
2021/03/03
1.1K0
相关推荐
自己实现PC端jQuery版轮播图
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档