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 = $( ...
随机推荐
- 使用OAuth打造webapi认证服务供自己的客户端使用（二）
在上一篇”使用OAuth打造webapi认证服务供自己的客户端使用“的文章中我们实现了一个采用了OAuth流程3-密码模式(resource owner password credentials)的W ...
- 【T-SQL基础】01.单表查询-几道sql查询题
概述: 本系列[T-SQL基础]主要是针对T-SQL基础的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础]02.联接查询 [T-SQL基础]03.子查询 [T-SQL基础 ...
- 作业八—Alpha阶段项目总结
一.项目的预期目标: 我们的图书管理系统之前的目标是做出可以让读者和管理员采用不同的搜索方式,并且时要做到读者和管理者两种不同的方式的!但是我们目前做到了部分搜索方式和管理员界面,主要原因是该项目如果 ...
- [nRF51822] 2、D-BUG之诗
4线SPI彩屏局部刷屏偏移解决 ——原来我早已经在成功的旁边了 最近在研究用低速.低RAM的单片机来驱动小LCD或TFT彩屏实现动画效果 首先我用一个16MHz晶振的m0内核的8位单片机nRF5182 ...
- 异步编程之Javascript Promises 规范介绍
什么是 Promises Promises是一种关于异步编程的规范,目的是将异步处理对象和处理规则进行规范化,为异步编程提供统一接口. 传统的回调函数 说到JavaScript的异步编程处理,通常我们 ...
- UWP 入门教程2——如何实现自适应用户界面
系列文章 UWP入门教程1——UWP的前世今生 如上文所说的,布局面板根据可用的屏幕空间,指定界面元素的大小和位置.例如StackPanel 会水平或垂直排列界面元素.Grid 布局与CSS 中的表格 ...
- Git学习笔记（4）——添加远程仓库，克隆远程库，以及库的推送
本文记录了远程库的连接和库的克隆和推送. 远程仓库简介 Git是分布式版本控制系统,同一个Git仓库,可以分布到不同的机器上.有一台机器有一个原始版本库,此后,别的机器可以“克隆”这个原始版本库,而且 ...
- mac命令
mac下卸载nodesudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}xc ...
- Android开发学习之路-回调实现Service向activity传递数据
开启服务的时候,如果我们是通过bindService来绑定服务并且要向服务传递数据,可以直接在Intent中设置bundle来达到效果,但是如果是我们需要从服务中返回一些数据到Activity中的时候 ...
- [开发工具]Java开发常用的在线工具
注明: 本文转自http://www.hollischuang.com/archives/1459.作为一个Java开发人员,经常要和各种各样的工具打交道,除了我们常用的IDE工具以外,其实还有很多工 ...