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 = $( ...
随机推荐
- 【腾讯Bugly干货分享】微信Tinker的一切都在这里，包括源码(一)
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57ecdf2d98250b4631ae034b 最近半年以来,Android热补 ...
- 【Bugly干货分享】手把手教你逆向分析 Android 程序
很多人写文章,喜欢把什么行业现状啊,研究现状啊什么的写了一大通,感觉好像在写毕业论文似的,我这不废话,先直接上几个图,感受一下. 第一张图是在把代码注入到地图里面,启动首页的时候弹出个浮窗,下载网络的 ...
- 浅谈Excel开发：三 Excel 对象模型
前一篇文章介绍了Excel中的菜单系统,在创建完菜单和工具栏之后,就要着手进行功能的开发了.不论您采用何种方式来开发Excel应用程序,了解Excel对象模型尤其重要,这些对象是您与Excel进行交互 ...
- 微软专家推荐11个Chrome 插件
Web开发人员,需要长时间使用浏览器,尽管Windows10 Edge浏览器启动非常快速,且支持110多种设备,Edge支持基于JS 扩展,但也删除了很多旧功能像Active-X等插件.多数情况下,插 ...
- Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力)
系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studi ...
- Flash AS实现时钟效果（全脚本实现）
最近工作中用到个Flash效果,好久没有写FlashAS脚本了,就想从以前写的代码中找一些实例.竟然看到硬盘中还留有若干年前的代码. 这个时钟效果是全部采用脚本实现,图形也是用脚本绘制的.写于2005 ...
- DIY一个前端模板引擎.(一)
前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码.个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离.为了理解模板引擎原 ...
- 10 个 Redis 建议/技巧
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/145.html?1455790611 Redis 在当前的技术社区里是非常 ...
- Java程序员的日常 —— 注册工厂的妙用
注册工厂是一种很常用的框架书写方法,它适合于快速创建相同类型的对象. 举个栗子 比如一个家具工厂,有沙发.椅子.茶几等等,正常的编程模式是这样的: //创建 class 沙发{} class 椅子{} ...
- mac下搭建lua环境
mac下安装lua(可借助:rudix 地址:http://rudix.org) curl -s https://raw.githubusercontent.com/rudix-mac/rpm/201 ...