Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >带左右箭头切换div的js 原

带左右箭头切换div的js 原

作者头像
tianyawhl
发布于 2019-04-04 08:47:46
发布于 2019-04-04 08:47:46
13.7K00
代码可运行
举报
文章被收录于专栏:前端之攻略前端之攻略
运行总次数: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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
分页
<!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.2K0
腾讯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
1K0
Day15:大前端
position: relative, absolute, fixed, static
达达前端
2019/07/15
3.9K0
Day15:大前端
前台分页,以及类别选择
效果: 前台分页 区别于后台分页的将第几页和共多少条传到后台,再从后台从数据库查询出当前页应该显示的数据返回 前台分页是将所有的数据都查出存到前台,在经过用js进行判断,分页,显示 HTML代码:
二十三年蝉
2018/03/01
1.6K0
前台分页,以及类别选择
解决bootstrap-table-fixed-columns.js显示列与隐藏列按钮切换表格不对齐
含有data-show-columns="true"属性时会在右边显示可以切换列的按钮
tianyawhl
2019/04/04
6K0
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.7K0
jQuery基础
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
5740
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
jQuery基础 1、    jQuery其实就是一个类库,集成了DOM/BOM/JavaScript的类库 http://jquery.cuishifeng.cn/这个网站里有所有的jQuery
coders
2018/01/04
4.7K0
jQuery
图片轮播(左右切换)--JS原生和jQuery实现
左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分
书童小二
2018/09/03
82.5K1
图片轮播(左右切换)--JS原生和jQuery实现
JS-【同页面多次调用】轮播特效封装-json传多个参数
看着传那么一长串的参数神烦,继续深化!——json传参: html: <div class="scrollBanner"> <ul class="bannerBox"> <li><a href="javascript:;"><img src="1.jpg" /></a></li> <li><a href="javascript:;"><img src="2.jpg" /></a></li>
xing.org1^
2018/05/17
4.7K0
图片轮播(淡入淡出)--JS原生和jQuery实现
图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法。 但不管怎样,构造一个最基本的表现层是必须的
书童小二
2018/09/03
24.5K0
图片轮播(淡入淡出)--JS原生和jQuery实现
简书搜索自动匹配功能
今天周六,我又来分享知识啦。最近一直在忙项目,所以趁着这个周末,喝着咖啡,听着音乐,敲着代码就把做项目的知识点总结给大家,简直不要太惬意,哈哈。
wblearn
2018/08/27
1.8K0
简书搜索自动匹配功能
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
原 each()、map()
作者:汪娇娇 日期:2016.9.1 如果说到某个元素的开关事件,第一反应那就是用一个变量做标记,比如flag,为1时开,为0时关,这是很简单的。下面我将以li的opacity为例,没点之前opacity为1,点击后变成0.5,然后就是1和0.5之间的循环: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
jojo
2018/05/03
1.8K0
原                                                                                each()、map()
jQuery之制作简单的轮播图效果
        通过修改每一张图片的透明度,让其每隔一段时间将其中的某一张图片透明度设为 1,而其他的设为0,从而实现图频轮流播放的效果。首先让一组图片绝对定位,并使其重叠,通过函数切换控制图片的透明度和定时器来触发该函数,改变不同图片的透明度。
思索
2024/08/16
3190
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.7K0
jquery学习
<1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
菲宇
2019/06/13
2.3K0
解决bootstrap-table-fixed-columns.js固定的列不能排序问题
我们用bootstrap-table-fixed-columns插件固定列的时候,发现固定的列不能排序,其他的列是能排序的,需要修改下,
tianyawhl
2019/04/04
4.1K0
相关推荐
分页
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验