jquery制作一个简单的轮播
效果图：
演示地址：
http://ae6623.cn/demo/slider/index.html
思路：
利用css的定位属性 left 进行调整图片的显示，每次点击上一页下一页按钮的时候，-图片宽度 * index(当前li索引)即可。
代码：
<!DOCTYPE HTML>
<html>
<head>
<!--申明当前页面的编码集-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--网页标题-->
<title>slider</title>
<!--网页关键词-->
<meta name="keywords" content="" />
<!--网页描述-->
<meta name="description" content="" />
<!--适配当前屏幕-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!--禁止自动识别电话号码-->
<meta name="format-detection" content="telephone=no" />
<!--禁止自动识别邮箱-->
<meta content="email=no" name="format-detection" />
<!--iphone中safari私有meta标签,
允许全屏模式浏览,隐藏浏览器导航栏-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--iphone中safari顶端的状态条的样式black(黑色)-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style type="text/css">
/*reset 重置*/
body,ul,ol,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea,
td,th,button,strong,em,select,video,canvas{margin:0;padding:0;}
li{list-style:none;vertical-align:top;}
table{ border-collapse:collapse;}
textarea{resize:none;overflow:auto;}
img{ border:none; vertical-align:middle;}
em{ font-style:normal;}
a{ text-decoration:none;}
a,input{
-webkit-appearance: none;/*屏蔽阴影*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
/*ios android去除自带阴影的样式*/
}
a, img {
/* 禁止长按链接与图片弹出菜单 */
-webkit-touch-callout: none;
}
html, body {
/* 禁止选中文本(如无文本选中需求,此为必选项) */
-webkit-user-select: none;
user-select: none;
}
/*public*/
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
body{font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif;
overflow-x:hidden; overflow-y:auto; font-size:0.7rem;
}
.clear{zoom:1;}
.clear:after{content:''; display:block; clear:both;}
.fl{float:left;}
.fr{float:right;}
.viewport{ max-width:640px; margin:0 auto; overflow-x:hidden;}
#slider{width:400px;position: relative;overflow: hidden;}
#slider-head{width:400px;}
#silder-head>div{float: left;height: 20px;line-height: 20px;vertical-align: middle;}
#slider-head-button{width:350px;}
#slider-head-button span{font-size: 12px;display: block;float: left;margin:3px;}
#slider-content ul{position:relative;height: 150px;width:2000px;}
#slider-content li{position:relative;width:200px;height: 150px;float: left;margin-right:5px;}
#slider-content .li1{background-color:#3399cc;}
#slider-content .li2{background-color: #cc3333;}
#slider-head-dots{ }
#slider-head-dots li{display: inline-block; width: 10px; height: 10px; margin: 5px 0px; text-indent: -999em; border: 2px solid #fff; border-radius: 6px; cursor: pointer; opacity: .4; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s; background: #000;}
#slider-head-dots li.active,li:hover {
background: #000;
opacity: 1;
}
</style>
</head>
<body>
<div>
<div id="main">
<div id="slider">
<div id="silder-head">
<div id="slider-head-button"><span class="l"> <a href="#" class="pri"><</a></span><span class="r"> <a href="#" class="next">></a> </span></div>
<div id="slider-head-dots">
<ol class="dots">
<li class="dot active">1</li>
<li class="dot">2</li>
</ol>
</div>
</div>
<div class="clear"></div>
<div id="slider-content">
<ul>
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li1">3</li>
<li class="li2">4</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
console.log('author:Luo Yu');
//拿到小圆点
var nav = $('#slider-head-dots ol').find('li');
//轮播内容
var content = $("#slider-content").find('ul');
//按钮 左右剪头，我没用图片，用了大于号小于号临时将就一下
var head_button = $("#slider-head-button").find("a");
//第一张图片的宽度
var imgWidth = content.find("li").eq(0).width() + 5;
//点击了小圆点
nav.click(function() {
var me = $(this);
var index = me.index();
nav.removeClass("active");
me.addClass("active");
//轮播
content.animate({
"left": -imgWidth * 2 * index
});
});
//点击了左右剪头
head_button.click(function(){
var me = $(this);
var index = me.attr("class");
if(index == "pri"){
index = 0;
}else{
index = 1;
}
nav.removeClass("active");
nav.eq(index).addClass("active");
content.animate({
"left": -imgWidth * 2 * index
});
});
});
</script>
</body>
</html>
jquery制作一个简单的轮播的更多相关文章
- 使用JavaScript制作一个好看的轮播图
目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...
- jquery做一个小的轮播插件---有BUG，后续修改
//首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...
- JQuery手写一个简单的轮播图
做出来的样式: 没有切图,就随便找了一些图片来实现效果,那几个小星星萌不萌. 这个轮播图最主要的部分是animate(),可以先熟悉下这个方法. 代码我放到了github上,链接:https://gi ...
- Jquery制作--焦点图左右轮播
公司项目经常用到轮播焦点图,于是自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型.改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js ...
- 用jquery制作一个简单的导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- JQuery制作基础的无缝轮播与左右点击效果
在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...
- 原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
- Jquery教你写一个简单的轮播.
这个我表示写的不咋地-_-//,但是胜在简单,可优化性不错. 实际上我本来想写个复杂点的结构的,但是最近忙成狗了!!!!所以大家就讲究着看吧 HTML结构 <div class="ba ...
- 用jquery制作的简单轮播图
我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...
随机推荐
- 解决请求参数的中文乱码问题（get、post）
2018-11-28 在web请求与响应中,会遇到乱码问题,比如填写表单数据时,难免会输入中文,姓名.公司名称等.由于HTML设置了浏览器在传递请求参数时,采用的编码方式是UTF-8,但在解码时采用的 ...
- mac下递归创建ctags报错: "illegal option -- R"
在mac系统下不论是使用vim还是sublime text2的ctags插件都会碰到“illegal option -- R”这个错误,原因是mac使用的是自己的ctags,而我们通常在linux或w ...
- 关于clipboard插件的使用问题
概述: clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件.通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中 clipboard.js ...
- 配置tomcat让shtml嵌套文件显示
之前,我知道tomcat可以直接解析shtml文件,在浏览器中显示效果来,后来由于需求发生改变,比如说 在做静态化生成的时候一个网站的头部和底部都是一样的,如果每个页面都生成一次,显然很浪费时间,所有 ...
- [Node.js]Domain模块
Domain(域)模块简化了异步代码的异常处理方式,可以捕捉处理try catch无法捕捉的异常. 引入 var domain=require("domain"); domain模 ...
- Material Design（原质化设计）视觉设计语言规范 踏得网镜像
Android 5.0 Lollipop(棒棒糖,也就是之前的代称Android L)全面实践了谷歌最新研发的 Material Design 设计语言规范,只是该设计规范并不是仅针对移动平台. 我们 ...
- UITableView 让 cell 被选中的颜色底色快速消失，而不是一直停留在cell上
//单元格被选中 -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath ...
- Serializable java序列化
Bean Serializable Interface 的接口让BEAN可以串行化,将其变成一个可保存为以后使用的二进制流.当一个BEAN被系列化到磁盘上或者其他任何地方,其状态被保存起来,其中的属性 ...
- 表单提交的3种方式，http post的contentType
application/x-www-form-urlencoded:窗体数据被编码为名称/值对.这是标准的编码格式.这是默认的方式 multipart/form-data:窗体数据被编码为一条消息,页 ...
- Coursera课程《大家的Python》中一些资料
Printed copies of Python for Informatics are available for $10 or less from Amazon and $2 or less on ...