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多线程系列--“JUC锁”06之 Condition条件
概要 前面对JUC包中的锁的原理进行了介绍,本章会JUC中对与锁经常配合使用的Condition进行介绍,内容包括:Condition介绍Condition函数列表Condition示例转载请注明出处 ...
- 项目开发之使用 maven
本文将详述 maven 在软件项目中的使用.首先讲述 maven 的基本工作原理及环境的搭建.然后讲述开发及配置管理人员如何使用 maven,最后将介绍 maven 与 eclipse 集成使用. m ...
- L# ForUnity Helloworld的更新方法
Forunity目录结构 进入plugins 删除这三个目录 从Github代码位置copy 然后删除里面 bin obj property 项目文件等,仅留代码即可. 在editor运行test项目 ...
- Android多线程分析之五：使用AsyncTask异步下载图像
Android多线程分析之五:使用AsyncTask异步下载图像 罗朝辉 (http://www.cnblogs.com/kesalin) CC 许可,转载请注明出处 在本系列文章的第一篇<An ...
- 自制Unity小游戏TankHero-2D(4)关卡+小地图图标+碰撞条件分析
自制Unity小游戏TankHero-2D(4)关卡+小地图图标+碰撞条件分析 我在做这样一个坦克游戏,是仿照(http://game.kid.qq.com/a/20140221/028931.htm ...
- Azure China (9) 在Azure China配置CDN服务
<Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的Azure China Update 2015-11-20:Azure China CDN服 ...
- AngularJS快速入门指南17：Includes
使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...
- 可伸缩性最佳实践：来自eBay的经验
看到一篇关于系统可伸缩性(可扩展)的文章,eBay的架构师Randy Shoup写的,原文出处没找到,就不写转载的地址了.根据自己的理解对文章有修改剪切的地方. 在eBay,可伸缩性是我们每天奋力抵抗 ...
- h5原生拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Java 线程 — ThreadLocal
ThreadLocal 先来看看ThreadLocal的注释: This class provides** thread-local variables**. These variables diff ...