用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过，一个绚丽的轮播可以为网页增色不少，最近闲来无事，也用原生js封装了一个轮播，可能不像网上的插件那么炫，但是也有用心去做。主要用了闭包的思想。需要传递的参数有：图片地址的数组，图片宽度，上一页，下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间。功能：实现了轮播的自动轮播，可以点击上一页，下一页进行切换。
下面是html中的代码,只需要把存放的容器写好，引入jquery即可：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/lunboCss.css"/> </head>
<body>
<div id="wapper">
<div id="imgList" style="left:px;">
</div>
<div><a href="#" id="next">></a></div>
<div><a href="#" id="pre"><</a></div>
<div id="ulList">
<ul id="listBtn">
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lunboJs.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
在main.js中进行调用封装的轮播，传递相应的参数即可：
window.onload=function(){
var prePage=$("#pre");//上一页
var nextPage=$("#next");//下一页
var imglist=$("#imgList");//得到图片列表
var listBtn=document.getElementById("listBtn");//得到切换列表ul
var oLi=listBtn.getElementsByTagName("li");//切换小圆点
var imgWidth=980;//图片宽度
var imgArray=['img/img1.jpg','img/img2.jpg','img/img3.jpg','img/img4.jpg',
'img/img5.jpg','img/img6.jpg'];//存放图片地址的数组
for(var i=0;i<imgArray.length;i++){
imglist.innerHTML+="<img src="+imgArray[i]+"/>";
listBtn.innerHTML+="<li></li>";
}
lunbo(imgArray,imgWidth,prePage,nextPage,imglist,2000,oLi);//传参
}
以下是封装的轮播js，通过闭包，提供调用的接口，这样可以更安全.只需调用该js文件，传递相应的参数，即可生成一个简单的而轮播：
(function(){
/*
* imgArray:图片数组
* imgwidth：图片宽
* prePage：上一页
* nextPage：下一页
* imglist：图片放在哪个div
* moveTime：自动轮播切换时间
* */
function carousel(imgArray,imgwidth,prePage,nextPage,imglist,moveTime,oLi){
var nextTimer;//定时器名
//上一页
prePage.onmousedown=function(){
imglist.style.left=parseInt(imglist.style.left)+imgwidth+"px";
imglist.style.transition="all 0.8s ease";
if(parseInt(imglist.style.left)>0){
imglist.style.left=-(imgArray.length-2)*imgwidth+"px";
imglist.style.transition="";
}
stop();//清除自动播放
}
//下一页
nextPage.onmousedown=function(){
showNextPage();
stop();//清除自动播放
}
//自动播放
function play(){
nextTimer=setInterval(function () {
showNextPage();
},moveTime);
}
play();
function stop(){
clearInterval(nextTimer);
}
prePage.onmouseout=play;//鼠标移开，重开定时器
nextPage.onmouseout=play;
//独立的函数，显示下一页
function showNextPage(){
imglist.style.left=parseInt(imglist.style.left)-imgwidth+"px";
imglist.style.transition="all 0.8s ease";
if(parseInt(imglist.style.left)<=-(imgArray.length-1)*imgwidth){
imglist.style.left=0+"px";
imglist.style.transition="";
}
}
//btnOnclik();
function btnOnclik(){
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onmousedown= function () {
imglist.style.left=-imgwidth*(this.index)+"px";
stop();//清除自动播放
console.log("inin");
}
oLi[i].onmouseout=play;
}
}
}
window.lunbo=carousel;//提供调用的接口
})();
在CSS中进行了简单的设置：
*{
padding:0px;
margin:0px;
font-family:"Microsoft YaHei";
}
a{
text-decoration: none;
}
ul li{
list-style-type: none;
}
#wapper{
width:980px;
height:330px;
margin: 10px auto;
overflow: hidden;
position: relative;
}
#wapper #imgList{
width:5580px;
height:330px;
position: absolute;
/*left: 0px;*/
/*top: 0px;*/
}
#wapper img{
width:980px;
height:330px;
float:left;
}
#wapper a{
display: inline-block;
color:#ccc;
font-size:36px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: rgba(0,0,0,0.5);
position: absolute;
}
#wapper #pre,#wapper #next{
opacity:;
-webkit-transition: all 0.7s linear;
position: absolute;
top: 135px;
}
#pre{
left: 20px;
}
#next{
right: 20px;
}
#wapper:hover #pre,#wapper:hover #next{
opacity:;
-webkit-transition: all 0.7s linear;
}
#pre:hover,#next:hover{
background-color: rgba(0,0,0,0.9);
color: white;
-webkit-transition: all 0.7s linear;
}
#ulList ul{
width: 445px;
height: 10px;
padding-left: 435px;
text-align: center;
line-height: 10px;
position: absolute;
bottom: 20px;
}
#ulList ul li{
list-style-type: none;
float: left;
margin: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #CCC;
}
以上就是基于原生js实现的轮播封装
用jQuery基于原生js封装的轮播的更多相关文章
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 基于原生JS封装数组原型上的sort方法
基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...
- 原生js实现无缝轮播
原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- 类似jQuery的原生JS封装的ajax方法
一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = ne ...
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
随机推荐
- 手机app开发：浅谈APP登录方式的优劣
手机app开发公司亿合科技要是给你一个机会设计一款APP,你会用什么方式做这个APP的登录模块?根据APP的业务模型的不同会有不同的设计方法.如果是偏内容型的APP,需要优先展示内容给用户,当用户需要 ...
- c/c++ qsort 函数的简单使用（1）
#include <stdio.h> #include <stdlib.h> //打印数组元素 void print(int arr[], int n){ ; i < n ...
- C#,C++修改vs文件模板，添加自定义代码版权版本信息
简单型的修改类似该路径下的模板文件即可(vs版本或安装路径不同路径可能不同) C#: 模板参数参考https://msdn.microsoft.com/zh-cn/library/eehb4faa.a ...
- 论文阅读（Xiang Bai——【TIP2014】A Unified Framework for Multi-Oriented Text Detection and Recognition）
Xiang Bai--[TIP2014]A Unified Framework for Multi-Oriented Text Detection and Recognition 目录 作者和相关链接 ...
- windows下利用virtual 安装 flask
出处: https://segmentfault.com/a/1190000002450878 本文介绍Windows下如何从零开始搭建Python + Flask开发环境. 安装Python 2.7 ...
- iOS GCD 编程小结
一.简单介绍 1.GCD简介? 全称是Grand Central Dispatch,可译为“牛逼的中枢调度器” 纯C语言,提供了非常多强大的函数 2.GCD优势 GCD是苹果公司为多核的并行运算提出的 ...
- 写个shell脚本
以前更新网站程序都是手动噼里啪啦敲代码,即麻烦又慢,还神经紧张.终于忍不住写个shell脚本. cd /usr/local/tomcat7/apache-tomcat-9.0.0.M4/ bin/ ...
- mssql数据库添加，修改，删除字段
通用式: alter table [表名] add [字段名] 字段属性 default 缺省值 default 是可选参数 增加字段: alter table [表名] add 字段名 smalli ...
- dr.wondr博士随笔之某古旧非智能机T6XXX 恢复一例
大家好!欢迎再次来到dr.Wonde的微博! 今次我给大家带来索尼爱立信古董机T650i的取证工作展示! 首先请出今天我们的主角索尼爱立信 T650i>> 然后在工厂模式下,连接设备,看图 ...
- catalina
用catalina启动tomcat容器,将项目放到tomcat中,通过cmd:启动:catalina,相当于本地的测试环境.