特效 左右滑动轮播图jQuery思路
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: ;
margin: ;
list-style: none;
border: ;
} .all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
} .screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
} .screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
} .screen ul {
position: absolute;
left: ;
top: 0px;
width: 3000px; } .all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
} .all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
} .all ol li.current {
background: yellow;
} #arr {
display: none;
} #arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: %;
margin-top: -20px;
background: #;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
} #arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="data:images/1.jpg" width="" height=""/></li>
<li><img src="data:images/2.jpg" width="" height=""/></li>
<li><img src="data:images/3.jpg" width="" height=""/></li>
<li><img src="data:images/4.jpg" width="" height=""/></li>
<li><img src="data:images/5.jpg" width="" height=""/></li>
</ul>
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="jquery-1.12.2.js"></script>
<script>
$(function(){
var n=;
var $li=$(".screen ul li"); //声明变量减少服务器的请求次数
var $ul=$(".screen ul");
var $oli=$(".screen ol li");
var $arr=$("#arr");
var imgWidth=$li.width();
// var timer=null;
//克隆第一个图片
var oLi=$li.eq().clone(true);
//把克隆的图片加到ul后面
$ul.append(oLi);
var size=$li.size(); //获取li的个数
// console.log(size);
//滑过数字小图标大图跟着动
$oli.mouseenter(function(){
n=$(this).index();
tab();
})
//点击右箭头移动轮播图
$("#box #arr #right").click(function(){
toRight();
})
//点击左箭头移动轮播图
$("#box #arr #left").click(function(){
toLeft();
}) //指到盒子上左右箭头出现 离开隐藏
$("#box").hover(function(){
$arr.css("display","block");
clearInterval(timer);
},function(){
$arr.css("display","none");
autoPlay();
})
//自动轮播
autoPlay();
function autoPlay(){
timer=setInterval(function(){
toRight();
},)
}
//封装左箭头
function toLeft(){
n--;
if(n<){ $ul.css("left",-size*imgWidth+"px");
n=size-;
}
tab();
};
//封装右箭头
function toRight(){
n++;
if(n>size){
n=;
$ul.css("left",);
}
if(n==size){
$oli.eq().addClass("current").siblings().removeClass("current");
}
tab();
}
//封装移动动画
function tab(){
$ul.stop().animate({left:-imgWidth*n+"px"},);
$oli.eq(n).addClass("current").siblings().removeClass("current");
}
})
</script>
</body>
</html>
特效 左右滑动轮播图jQuery思路的更多相关文章
- jQuery 简单滑动轮播图效果
一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box"> < ...
- 最最最简单的轮播图(JQuery)
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 轮播图jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯 CSS 实现滑动轮播图效果
只使用css实现轮播图简单的操作 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 【html】【12】特效篇--轮播图
必看参考: http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html 代码: <!DOCTYPE html> <h ...
- jquery一个比较好的轮播图jQuery.kinMaxShow介绍
kinMaxShow API 可选参数以及详解 kinMaxShow 主参数详解 参数名称 默认值 简单释义 height 500 [整型 (单位:像素)]焦点图高度,必须设置 缺省则启用默认高度 5 ...
- 纯CSS手动滑动轮播图（隐藏滚动条）
HTML: <div class="bigder"> <div class="big"> <dl> <dt>&l ...
- 轮播图(jQuery)
效果图: -----------------------------------------html------------------------------------------------- ...
- 用jQuery实现优酷首页轮播图
▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...
随机推荐
- 1.7Oob 静态成员
1)public class Exse3 { static int iCounter = 0; String name; boolean bGender = false; int iAge; doub ...
- Django + Axios & Ajax post和get 传参
话说千遍淡如水,不如代码来一通. Axios post: let params = new URLSearchParams(); params.append('id',xx) axios({ ur ...
- 4、Flutter 采坑记录篇二_依赖库不兼容
1.报错信息 Because every version of flutter_test from sdk depends on package_resolver 1.0.4 which depend ...
- Spring 学习教程（三）：Spring MVC
1. 用户访问 /index2. 根据web.xml中的配置 所有的访问都会经过DispatcherServlet3. 根据 根据配置文件springmvc-servlet.xml ,访问路径/ind ...
- oracle 日期取 月 日
今天碰到只要取月份和天数,如果月份前面有0要去掉0.比如说2010-01-08 ,需要的结果是1-8. 引出了一系列的sql语句 第一: 利用to_number的函数转换自动截0 select to_ ...
- 53.CSS---CSS水平垂直居中常见方法总结
CSS水平垂直居中常见方法总结 1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是 ...
- C++ Windows API 读写INI文件
BOOL WritePrivateProfileString( LPCTSTR lpAppName, // INI文件中的一个字段名[节名]可以有很多个节名 LPCTSTR lpKeyName, // ...
- 解救小哈——bfs广搜
问题描述: 小哈去玩迷宫,结果迷路了,小哼去救小哈.迷宫由n行m列的单元格组成(n和m都小于等于50),每个单元格要么是空地,要么是障碍物. 问题:帮小哼找到一条从迷宫的起点通往小哈所在位置的最短路径 ...
- UI框架搭建DAY2
今天的主要任务是完善NormalPanel, 搭建PopupPanel. 在编写PanelManager的过程中,发现了一个bug.昨天把panelPath直接传给了ResourceManager.G ...
- 软件工程实践小项目之模拟wc.exe的小程序
github源码和工程文件地址:https://github.com/Jackchenyu/Word_counts/tree/smart 基本要求:要实现wc的基本功能即文件中字符数.单词数.行数的统 ...