特效 左右滑动轮播图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学习之路(持续更新),里面有讲解: ...
随机推荐
- [No0000197]Windows用户都应该知道的运行命令
通过"运行"命令,运行Windows丰富工具的方法.如果您知道工具或任务的相应"运行"命令,那么您就知道访问所述工具或任务的最快方法. 以下是我们最喜欢的Run ...
- 项目实战02：LNMP的搭建、nginx的ssl加密、身份验证的实现
目录 实战一:搭建lnmp及类小米等商业网站的实现 1.安装包,开启服务 2.修改nginx的配置文件 3.修改php-fpm的配置文件 4.运行mysql ,创建一会网页需要的库 5.把事先找好的小 ...
- Rob Pike
罗布·派克_百度百科 https://baike.baidu.com/item/罗布·派克 1. 你无法断定程序会在什么地方耗费运行时间.瓶颈经常出现在想不到的地方,所以别急于胡乱找个地方改代码, ...
- H5 C3
为什么学习HTML5 a.因为语义化标签的出现网页结构更加清晰 b.因为多媒体的出现,让网页播放音频和视频没有了依赖 c.因为CSS3的出现,让页面变得更加炫酷和多彩 d.因为新的API的出现,使的开 ...
- django 1.11 目录
django 信号 django form
- git中设置http代理和取消http代理
设置http代理 git config --global https.proxy https://127.0.0.1:1080 取消http代理git config --global --unset ...
- 从零开始一起学习SLAM | 给点云加个滤网
对VSLAM和三维重建感兴趣的在计算机视觉life"公众号菜单栏回复"三维视觉"进交流群. 小白:师兄,上次你讲了点云拼接后,我回去费了不少时间研究,终于得到了和你给的参 ...
- 动物管理员--zooKeeper-01
ZooKeeper集群角色介绍: 最典型集群模式:Master/Slave 模式(主备模式).在这种模式中,通常 Master 服务器作为主服务器提供写服务,其他的 Slave 服务器从服务器通过异步 ...
- python模拟面试技术题答案
目录 Python4期模拟面试技术面试题答案............................................................................ ...
- Java-HttpURLConnection详细说明与实例
URLConnection 类是一个抽象类,代表应用程序和URL之间的通信连接,此类的实例可用于读取和写入此URL引用的资源.URLConnection 允许使用GET,POST或者其他HTTP方法请 ...