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 = $( ...
随机推荐
- 通过Measure & Arrange实现UWP瀑布流布局
简介 在以XAML为主的控件布局体系中,有用于完成布局的核心步骤,分别是measure和arrange.继承体系中由UIElement类提供Measure和Arrange方法,并由其子类Framewo ...
- 设计模式之美：Visitor（访问者）
索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):Visitor 模式结构样式代码. 实现方式(二):使用 Visitor 模式解构设计. 实现方式(三):使用 Acyclic ...
- 犀利的background-clip:text，实现K歌字幕效果
今天学到了一个新的CSS3属性,更准确的说是属性值,那就是background-clip:text.利用此属性值可以制作出很神奇的效果.可惜只有chrome支持,不过今天可以先来玩玩这个属性. 先来介 ...
- UDP Client—Linux
#include <stdio.h> #include <netinet/ip.h> int main(int argc,char *argv[]) { #define PER ...
- 从Windows中卸载Apache
在重装Apache或者妳不再需要它的时候,这时就需要将它卸载. 下面是步骤: 打开开始菜单(win8中ÿ+X)或者我的电脑(废话) 找到并打开Apache的安装目录(Program Files\Apa ...
- 知方可补不足~Sqlserver中的几把锁和.net中的事务级别
回到目录 当数据表被事务锁定后,我们再进行select查询时,需要为with(锁选项)来查询信息,如果不加,select将会被阻塞,直到锁被释放,下面介绍几种SQL的锁选项 SQL的几把锁 NOLOC ...
- 搭建jekyll博客
使用jekyll将markdown文件生成静态的html文件,并使用主题有序的进行布局,形成最终的博客页面. 特点 基于ruby 使用Markdown书写文章 无需数据库 可以使用GitHub Pag ...
- Atitit vod ver 12 new feature v12 pb2 影吧 视频 电影 点播 播放系统v12新特性
Atitit vod ver 12 new feature v12 pb2 影吧 视频 电影 点播 播放系统v12新特性 项目分离从独立的se ver Run mode from brow ex to ...
- C#并行编程-线程同步原语
菜鸟学习并行编程,参考<C#并行编程高级教程.PDF>,如有错误,欢迎指正. 目录 C#并行编程-相关概念 C#并行编程-Parallel C#并行编程-Task C#并行编程-并发集合 ...
- JS脚本
js脚本是嵌在网页里打出的一块区域,一般写在最下端 script 脚本 // 这是单行注释的一种语法 /**/ 这是多行注释的一种语法 存储内容的东西叫变量 数据类型的有: 1 整型 ...