JS实现横向轮播图（中级版）
本文实例为大家分享了JS实现横向轮播图的具体代码，供大家参考，具体内容如下
描述：
轮播图，中级，横向buton或者底部数字控制轮播，可以实现自动轮播（注释了，使用的话将其注释消掉），解决了初级版本的点1再点5时多张图片滑动的问题，核心只有两张图在切换，加入了图片加载。
效果：
代码：
js文件：
/*
* 工厂模式
* */
var Method=(function () {
return {
loadImage:function (arr,callback) {
var img=new Image();
img.arr=arr;
img.list=[];
img.num=0;
img.callback=callback;
// 如果DOM对象下的事件侦听没有被删除掉，将会常驻堆中
// 一旦触发了这个事件需要的条件，就会继续执行事件函数
img.addEventListener("load",this.loadHandler);
img.self=this;
img.src=arr[img.num];
},
loadHandler:function (e) {
this.list.push(this.cloneNode(false));
this.num++;
if(this.num>this.arr.length-1){
this.removeEventListener("load",this.self.loadHandler);
this.callback(this.list);
return;
}
this.src=this.arr[this.num];
},
$c:function (type,parent,style) {
var elem=document.createElement(type);
if(parent) parent.appendChild(elem);
for(var key in style){
elem.style[key]=style[key];
}
return elem;
}
}
})();
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/Method.js"></script>
</head>
<body>
<script>
var imgCon,ul,prevLi;
var arr=["img/a.jpeg","img/b.jpeg","img/c.jpeg","img/d.jpeg","img/e.jpeg"];
var position=0;
var direction="";
var carouselBool=false;
var autoBool=false;
var time=240;
const WIDTH=1200;
const HEIGHT=400;
init();
function init() {
createCarousel();
createLiAndImg();
changeLi();
setInterval(animation,16)
}
function createCarousel() {//创建默认的div模板 用于装图片
var carousel=Method.$c("div",document.body,{
width: WIDTH+"px",
height: HEIGHT+"px",
position: "relative",
margin: "auto",
overflow:"hidden"
});
carousel.addEventListener("mouseenter",mouseHandler);
carousel.addEventListener("mouseleave",mouseHandler);
imgCon=Method.$c("div",carousel,{//图片轮播 div
width: WIDTH+"px",
height: HEIGHT+"px",
position:"absolute",
left: 0,
fontSize: 0
});
ul=Method.$c("ul",carousel,{//装5个按钮的ul
position: "absolute",
bottom: "20px",
listStyle: "none",
margin: "auto"
});
var leftBn=Method.$c("img",carousel,{//左 按钮
position: "absolute",
left: "20px",
top:"170px"
});
leftBn.src="img/left.png";
var rightBn=Method.$c("img",carousel,{//右 按钮
position: "absolute",
right: "20px",
top:"170px"
});
rightBn.src="img/right.png";
leftBn.addEventListener("click",clickHandler);
rightBn.addEventListener("click",clickHandler)
}
function createLiAndImg() {
for(var i=0;i<arr.length;i++){//arr 事先装好了 5个图片
var li=Method.$c("li",ul,{//每个li的数据
width: "20px",
height: "20px",
border:"1px solid red",
borderRadius:"10px",
float:"left",
marginLeft:"8px"
});
li.num=i;
li.addEventListener("click",liClickHandler);
}
ul.style.left=(WIDTH-ul.offsetWidth)/2+"px";
var img=Method.$c("img",imgCon,{
width: WIDTH+"px",
height: HEIGHT+"px"
});
img.src=arr[position];
}
function mouseHandler(e) {
e = e || window.event;
if(e.type==="mouseenter"){//鼠标划上 自动暂停
autoBool=false;
}else if(e.type==="mouseleave"){//鼠标离开 自动开始
autoBool=true;
}
}
function clickHandler(e) {//左右button的键位判断 点击事件
e = e || window.event;
if(carouselBool) return;
if(~this.src.indexOf("left")){
position--;
if(position<0) position=arr.length-1;
direction="right";
}else{
position++;
if(position>arr.length-1) position=0;
direction="left";
}
createCarouselImg();
}
function liClickHandler(e) {
e = e || window.event;
if(carouselBool) return;
if(this.num===position) return;
if(this.num>position){
direction="left";
}else{
direction="right";
}
position=this.num;
createCarouselImg();
}
function createCarouselImg() {
if(direction!=="left" && direction!=="right")return;
var img=Method.$c("img",null,{
width: WIDTH+"px",
height: HEIGHT+"px"
});
img.src=arr[position];
imgCon.style.width=WIDTH*2+"px";
if(direction==="left"){
imgCon.appendChild(img);
}else if(direction==="right"){
imgCon.insertBefore(img,imgCon.firstElementChild);
imgCon.style.left=-WIDTH+"px";
}
changeLi();
carouselBool=true;
}
function changeLi() {
if(prevLi){
prevLi.style.backgroundColor="rgba(255,0,0,0)";
}
prevLi=ul.children[position];
prevLi.style.backgroundColor="rgba(255,0,0,0.5)";
}
function animation() {
carouselMovie();
carouselAuto();
}
function carouselMovie() {
if(!carouselBool) return;
if(direction==="left"){
if(imgCon.offsetLeft<=-WIDTH){
carouselBool=false;
imgCon.firstElementChild.remove();
imgCon.style.left="0px";
return;
}
imgCon.style.left=imgCon.offsetLeft-40+"px";
return;
}
if(imgCon.offsetLeft>=0){
carouselBool=false;
imgCon.lastElementChild.remove();
return;
}
imgCon.style.left=imgCon.offsetLeft+30+"px";
}
/*
* 自动轮播函数
* 1、如果当前autoBool是false，就不进行自动轮播
* 这个变量是鼠标进入轮播图时是false，离开时
* 才会变化为false
* 2、让time--，因为这个函数没16毫秒执行一次，如果
* 每次进来就让time-1，然后判断time是否小于等于0，如果
* 小于等于0，说明这个函数已经进入了240次，每次16毫米，
* 合计就是4秒钟。这样可以控制让轮播图每4秒自动播放下张
* 图片
* 3、如果time小于等于0，就重新让time等于240，等待下次进入
* 4、设置图片播放定位+1，如果大于了图片的数量，就让它为0
* 5、设置轮播图方向是向左运动
* 6、执行创建轮播图片，并且继续后面的任务
*
*
*
* */
function carouselAuto() {
if(!autoBool)return;
time--;
if(time>0)return;
//当time减到0时，就不继续减了，进入下面
time=240;
position++;
if(position>arr.length-1) position=0;
direction="left";
createCarouselImg();
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现轮播图效果 z-index实现轮播图
本文实例为大家分享了js实现轮播图效果的具体代码,供大家参考,具体内容如下 实现轮播图 学习前端差不多两三个月,在这里记录分享一下.因本人菜鸟一枚,希望大佬们多多指点,勿喷. 通过计算每一张图片高度实现滑动轮播图 HTML代码: <div class="fate"> <div class="lancer"> <ul class="saber"> <li><img src="img/i
-
JS实现轮播图效果
本文实例为大家分享了JS实现轮播图展示的具体代码,供大家参考,具体内容如下 原理介绍 1.html <div id="swiper-container" class="swiper-container" onmouseenter="swiperImg()" onmouseleave="stopSwiper()"> <div id="img-list" style="left:0p
-
JS实现横向轮播图（初级版）
本文实例为大家分享了JS实现横向轮播图的具体代码,供大家参考,具体内容如下 描述: 轮播图,初级,横向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的位移达到效果. 效果: 代码: js文件: /* * 工厂模式 * */ var Method=(function () { return { loadImage:function (arr,callback) { var img=new Image(); img.arr=arr; img.
-
js实现轮播图的完整代码
今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->
-
js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
-
js实现点击左右按钮轮播图片效果实例
本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un
-
原生js实现轮播图的示例代码
很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea
-
JS实现纵向轮播图（初级版）
本文实例为大家分享了JS实现纵向轮播图的具体代码,供大家参考,具体内容如下 描述: 纵向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的透明度达到效果. 效果: 代码: js文件: /* * 工厂模式 * */ var Method=(function () { return { loadImage:function (arr,callback) { var img=new Image(); img.arr=arr; img.list=[
-
原生js实现无缝轮播图
本文实例为大家分享了js实现无缝轮播图的具体代码,供大家参考,具体内容如下 先上效果图 原理图 如图可见,是页面按顺序依次显示5张图片,包裹这五张图片的外层的盒子,我们叫ul,通过向左或右移动不同距离,实现在视图中显示的不同的图片,实现轮播,而同时下面的分页小球需要根据当前显示的内容进行点亮: 而无缝轮播图需要在第五张图片后面再加上第一张图片,这样通过右侧箭头,向右切换,当页面切换到第六张时,也就是最后一张图片,此时需要将ul的位置设置为第一张图的位置,然后从第一张图片滑动到第二张,形成一个无缝
-
js实现旋转木马轮播图效果
本文实例为大家分享了js实现旋转木马轮播图的具体代码,供大家参考,具体内容如下 整个页面的文件结构如下图所示: html部分代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="