jquery实现轮播图
/**
* Created by hui on 2015/11/3.
*/
$(function(){
var circleLi = $('.poster-item');
var liLength = circleLi.length;
var L = 640;
var n = 640;
var posterUl = $('.poster-ul');
var posterUlLeft = posterUl.position().left;
var action = {
initCss:function(){
(function setCss(){
for(var i= 0;i<liLength;++i){
circleLi[i].style.left=i*L-n*2+"px";
}
})();
},
ifOver:function(Left){
if(Left<-3*n){
Left=2*n;
}
if(Left>2*n){
Left = -3*n;
}
return Left;
},
moveLeft:function(){
posterUlLeft-=n;
posterUlLeft = action.ifOver(posterUlLeft);
posterUl.animate({left:posterUlLeft+'px'});
},
moveRight:function(){
posterUlLeft+=n;
posterUlLeft = action.ifOver(posterUlLeft);
posterUl.animate({left:posterUlLeft+"px"});
}
};
action.initCss();
$('.poster-left-btn').click(action.moveLeft);
$('.poster-right-btn').click(action.moveRight);
});
原谅我"无耻"的使用了jquery,不过以后有时间我会尽量用原生的js来实现这个的。
html代码：
<html lang="en"><head>
<meta charset="UTF-8">
<title></title>
<link href="style.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="js.js"></script>
</head>
<body>
<div class="J_poster poster-main">
<div class="poster-btn poster-left-btn"><</div>
<ul class="poster-ul">
<li class="poster-item" style="left: -1280px;"><a href="#"><img src="./img/1.jpg"></a></li>
<li class="poster-item" style="left: -640px;"><a href="#"><img src="./img/2.jpg"></a></li>
<li class="poster-item" style="left: 0px;"><a href="#"><img src="./img/3.jpg"></a></li>
<li class="poster-item" style="left: 640px;"><a href="#"><img src="./img/4.jpg"></a></li>
<li class="poster-item" style="left: 1280px;"><a href="#"><img src="./img/5.jpg"></a></li>
<li class="poster-item" style="left: 1920px;"><a href="#"><img src="./img/6.jpg"></a></li>
</ul>
<div class="poster-btn poster-right-btn">></div>
<div class="poster-circle-div">
<ul class="circle-ul">
<li class="circle-li"></li>
<li class="circle-li"></li>
<li class="circle-li"></li>
<li class="circle-li"></li>
<li class="circle-li"></li>
<li class="circle-li"></li>
</ul>
</div>
</div>
<script> </script> </body></html>
css代码：
html,body,ul,li,p{
margin:;
padding:;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
}
.clearfix{
clear: both;
}
.poster-main{
width: 640px;
height: 270px;
position: relative;
margin: auto;
overflow: hidden;
}
.poster-btn{
position: absolute;
width: 50px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 3.5em;
top: 70px;
cursor: pointer;
z-index:;
background: rgba(0,0,0,.3);
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.poster-btn:hover{
background: rgba(0,0,0,.5);
}
.poster-left-btn{
left:;
}
.poster-right-btn{
right:;
}
.poster-ul{
position: absolute;
}
.poster-ul .poster-item{
text-align: center;
position: absolute;
transition: all 2s;
}
.z{
z-index:;
}
.poster-circle-div{
position: absolute;
bottom:;
left: 50%;
margin-left: -65px;
margin-bottom: 30px;
}
.circle-ul li{
float: left;
cursor: pointer;
color: #fff;
background: rgba(255,255,255,.6);
width: 12px;
height: 12px;
text-align: center;
border-radius: 50%;
margin: 2px;
}
.show{
background: rgba(0,0,0,.3) !important;
}
jquery实现轮播图的更多相关文章
- 用jQuery实现轮播图效果，js中的排他思想
---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 自实现PC端jQuery版轮播图
最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...
- JQuery实现轮播图及其原理
源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...
- Jquery无缝轮播图的制作
轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...
- jquery优化轮播图2
继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- jquery改造轮播图1
g改造轮播图1:https://www.cnblogs.com/huanghuali/p/8677338.html <!DOCTYPE html> <html lang=" ...
- jQuery无缝轮播图思路详解-唯品会
效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...
- jQuery封装轮播图插件
// 布局要求,必须有一个容器,图片和两个按钮,布局方式自定,小圆点样式固定 // <div class="all"> // <img src="img ...
- 自己随意写了个简单的依赖jquery的轮播图
//轮播图 function Switcher(obj){ this.box = $(obj.box); this.width = this.box.width(); this.banner = $( ...
随机推荐
- Java多线程5：synchronized锁方法块
synchronized同步代码块 用关键字synchronized声明方法在某些情况下是有弊端的,比如A线程调用同步方法执行一个较长时间的任务,那么B线程必须等待比较长的时间.这种情况下可以尝试使用 ...
- ListView设置headerview和footerview
[简介]headerview就是通常看到的那种listview手势下滑露出上面的部分,下拉到一定位置,松手会开始请求网络数据,然后刷新listview的列表.footerview一般就是listvie ...
- Html5 舞动的雨伞
HMTL5的学习断断续续,方法不用又生疏了,昨天做的一个雨伞的Demo,先看看效果 主要是运用了中心点变换和旋转两个方法.不同的动画用定时器控制, 下面是全部代码: <canvas id=&qu ...
- java提高篇(十八)-----数组之一：认识JAVA数组
噢,它明白了,河水既没有牛伯伯说的那么浅,也没有小松鼠说的那么深,只有自己亲自试过才知道!道听途说永远只能看到表明现象,只有亲自试过了,才知道它的深浅!!!!! 一.什么是数组 ...
- SQL-geography && Spatial result
说起geography(地理)这个类型,我感觉好陌生,以前真的没有见过,今天在查询某个Address表的时候,却发现了新大陆——Spatial result(空间的结果). (1)表的结构 (2)查询 ...
- flex 阅读器
遇到很多的困难 首先是 pdf2swf 而后又下载swftools 而后有swfcombine.exe 让制作的swf 文字可选? —— 这应该是很常见的需求啊! 可是我搜索来搜索去都找不到... 搜 ...
- 启发式算法（Heuristic Algorithm）
背景: 李航的<统计学习方法>一书中提到:决策树算法通常采用启发式算法,故了解之 问题解答: 时间有限,这里也只是将算法和启发式算法的区别和简单发展摘录如下: 一.算法和启发式方法之间的差 ...
- fir.im Weekly - Swift 3.0 的迁移适配指南
无论你是移动开发者,还是桌面端开发者,或者正在IoT领域探索的技术人员,那么应该更加关注 iDev 全平台开发者大会,也许是后半年 iOS 开发者最盛大的技术盛宴.既有知名公司带来专业视野,又有从 S ...
- 获取当前请求的URL的地址、参数、参数值、各种属性
//URL: http://localhost:1897/User/Press/UserContent.aspx/9878?id=1#toc Request.ApplicationPath; //结果 ...
- sql语句执行顺序
首先来一张朋友传给我的图 FORM: 对FROM的左边的表和右边的表计算笛卡尔积.产生虚表VT1 ON: 对虚表VT1进行ON筛选,只有那些符合<join-condition>的行才会被记 ...