jquery左右箭头切换
到头不轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.contain {
width: 396px;
height: 50px;
background: red;
margin: 80px auto;
position: relative;
}
.box {
width: 396px;
height: 50px;
/* margin: 0 20px; */
position: relative;
overflow: hidden;
}
.box_wheel {
height: 50px;
position: absolute;
overflow: hidden;
}
.box_wheel li {
width: 132px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
float: left;
}
.btn {
width: 50px;
height: 60px;
background: bisque;
line-height: 60px;
text-align: center;
color: red;
font-size: 30px;
cursor: pointer;
}
.btn_left {
position: absolute;
left: -50px;
top: 50%;
margin-top: -30px;
}
.btn_right {
position: absolute;
right: -50px;
top: 50%;
margin-top: -30px;
}
</style>
</head>
<body>
<div class="contain">
<div class="box">
<ul class="box_wheel">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<div class="btn btn_left"><</div>
<div class="btn btn_right">></div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
// 获取每个li元素的宽度
var liW = $(".box_wheel li").width()
// 获取li元素的长度(个数)
var len = $(".box_wheel li").length
// 计算ul的总宽度
var ulW = len*liW
// 设置ul的宽度
$(".box_wheel").css("width",ulW)
var index = 0
$(".btn_left").click(()=>{
// if(index == -1){//判断如果索引为-1了，就让它为最后一个li元素的索引
// index = len - 1
// }
if(index == 0){//判断如果索引为-1了，就让它为最后一个li元素的索引
index = 0
}else{
index -- //索引自加
}
showLi(index)
})
$(".btn_right").click(()=>{
// if(index == len){//判断如果索引超过长度了，就让它为第一个li元素的索引
// index = 0
// }
if(index == len-1){//判断如果索引超过长度了，就让它为第一个li元素的索引
index =len-1
}else{
index ++ //索引自减
}
showLi(index)
})
function showLi(index){
var move = -index * liW
$(".box_wheel").stop().animate({"left":move},300)
}
</script>
</body>
</html>
循环轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.contain {
width: 396px;
height: 50px;
background: red;
margin: 80px auto;
position: relative;
}
.box {
width: 396px;
height: 50px;
/* margin: 0 20px; */
position: relative;
overflow: hidden;
}
.box_wheel {
height: 50px;
position: absolute;
overflow: hidden;
}
.box_wheel li {
width: 132px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
float: left;
}
.btn {
width: 50px;
height: 60px;
background: bisque;
line-height: 60px;
text-align: center;
color: red;
font-size: 30px;
cursor: pointer;
}
.btn_left {
position: absolute;
left: -50px;
top: 50%;
margin-top: -30px;
}
.btn_right {
position: absolute;
right: -50px;
top: 50%;
margin-top: -30px;
}
</style>
</head>
<body>
<div class="contain">
<div class="box">
<ul class="box_wheel">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<div class="btn btn_left"><</div>
<div class="btn btn_right">></div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">
// 获取每个li元素的宽度
var liW = $(".box_wheel li").width()
// 获取li元素的长度(个数)
var len = $(".box_wheel li").length
// 计算ul的总宽度
var ulW = len*liW
// 设置ul的宽度
$(".box_wheel").css("width",ulW)
var index = 0
$(".btn_left").click(()=>{
index -- //索引自加
if(index == -1){//判断如果索引为-1了，就让它为最后一个li元素的索引
index = len - 1
}
showLi(index)
})
$(".btn_right").click(()=>{
index ++ //索引自减
if(index == len){//判断如果索引超过长度了，就让它为第一个li元素的索引
index = 0
}
showLi(index)
})
function showLi(index){
var move = -index * liW
$(".box_wheel").stop().animate({"left":move},300)
}
</script></body>
</html>
jquery左右箭头切换相关推荐
- jQuery箭头切换图片 - 学习笔记
jQuery箭头切换图片 布局 3d位移 变形原点 jQuery transform:translate3d(x,y,z): x 代表横向坐标移向量的长度 y 代表纵向坐标 ...
- 左右箭头切换的tabs
需求 1: tab切换功能 2: 左右箭头切换 效果 代码 注意!!: 此功能: 未完全完成! 记录一下后期完善! 注意!!: 此功能:依赖于JQuery 和 layui 后期需求: tab页过多时, ...
- 3种风吹图片jquery堆叠图片切换效果插件
dreamweaver免费视频教程: http://www.51rgb.com/mproductzh.aspx?classid=31 加讨论群390180913 入群即可参加周一至周五免费公开课并获得 ...
- jquery背景自动切换特效
查看效果网址: http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: 1 <!DOCTYPE html PUBL ...
- jquery ui动态切换主题的一种实现方式
这两天看coreservlets上的jQuery教程,虽然比较老了,不过讲得还是不错. 最后一部分讲jQuery ui 主题切换,用他介绍的方法实现不了.于是自己修改了下,可以了. 代码如下: htm ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
- html 折叠焦点图切换,jQuery层叠式图片切换焦点图插件
本文作者html5tricks,转载请注明出处 之前我们为大家分享过一款jQuery内容层叠滚动切换动画插件,主要是针对文字的层叠式切换.今天要介绍的也是一款层叠式切换插件,不过它是一款 下面我们一起 ...
- 基于jquery的tab切换
一款基于jquery的tab切换哦 转载于:https://blog.51cto.com/11670972/1943140
- jquery显示隐藏切换_jQuery显示，隐藏，切换
jquery显示隐藏切换 Earlier we looked into how we can use jQuery get attribute, today we will look into thr ...
最新文章
- Jsoup解析XML
- 《Easy RL：强化学习教程》出版了！文末送书
- vi - a linux command
- php嵌入html代码的三种方法
- 心电图系统服务器与存储系统,心电图网络信息化管理系统
- linux dosbox使用教程,在主流Linux操作系统上安装DOSBox的方法
- JAVA简历解析（无规则简历）
- 当时明月在，曾照彩云归。
- 概率论 —— 条件数学期望
- LeetCode 青蛙跳问题
- 即时聊天工具混战中国
- 奥德赛商务车改装哪一些是必要的？
- 邮储银行的规模有多大？凭什么可以成为第6大国有银行？
- Mac下制作Linux Centos7启动盘
- 八字四柱排盘原理及源码（PHP、Java和Python）
- NPDP知识推送-第七章产品生周期管理（4）
- 一，Weston简介
- 11种典型的时间序列回归预测方法大集合——附代码
- Unity鼠标图标更换/点击图标更换
- 计算机网络组建毕业论文,网络组建毕业论文范文