多张图片轮播和展示的几种常见效果写法
2024-06-03 19:09:04
1、几张图片计时器简单轮播(jQuery)
<!DOCTYPE html>
<html><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><style type="text/css">.banner{width: 100%;height: 350px;overflow: hidden;
}.banner img{width:100%;
}
</style><div class="banner"><img src="data:images/1.jpg" alt="">
</div><script>var timer = null;clearInterval(timer)var n = 1;timer = setInterval(function () {$('.banner > img').attr('src', 'images/' + n++ + '.jpg')if (n > 3) {n = 1;}}, 3000)
</script></html>2-1、图片向左/右滚动（jQuery）
<!DOCTYPE html>
<html><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<style type="text/css">
#imgshow{position: relative;width:1000px;overflow: hidden;
}#imgshow ul{display: flex;justify-content: flex-start;
}#imgshow ul li {float: left;background: #ddd;margin:0 10px 0 0;
}#imgshow li img{display: block;margin:0 auto;height:58px;padding:5px;border:1px solid #ddd
}
</style><div id="imgshow"><ul><li><img src="sky-1.jpg"></li><li><img src="sky-2.jpg"></li><li><img src="sky-3.jpg"></li></ul>
</div><script type="text/javascript">
var oDiv = $('#imgshow')[0];var oUl = $('#imgshow>ul')[0];var aLi = oUl.getElementsByTagName('li')var closeTime = null;console.log(oDiv,oUl,aLi)console.log(aLi[0].offsetWidth);var index = -2;oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;oUl.style.width = aLi[0].offsetWidth * aLi.length + "px"if(oUl.offsetWidth < 3000){oUl.style.width = 3355 +'px';}function a() {if (oUl.offsetLeft < -oUl.offsetWidth / 2) {oUl.style.marginLeft = 0;}if (oUl.offsetLeft > 0) {oUl.style.marginLeft = -oUl.offsetWidth / 2 + 'px';}oUl.style.marginLeft = oUl.offsetLeft + index + "px"}closeTime = setInterval(a, 30)$(oDiv).hover(function () {clearInterval(closeTime)}, function () {closeTime = setInterval(a, 30)})
</script></html>
2-2、箭头控制图片向左/右滚动
<!DOCTYPE html>
<html>
<style type="text/css">
*{margin: 0;padding: 0;}#div1{position: relative;border:1px solid #0ff;width:1100px; height: 180px;margin:50px auto 0;overflow: hidden;}#div1 ul{position: absolute;left: 0;}#div1 ul li{list-style: none;width:200px;float: left;padding: 10px;height: 160px;}#div1 ul li img{width:100%;}
</style>
<script type="text/javascript">window.onload=function(){var oDiv=document.getElementById('div1');var oUl=oDiv.getElementsByTagName('ul')[0];var aLi=oUl.getElementsByTagName('li');var aA=document.getElementsByTagName('a');//获取向右向左的箭头var timer=null;var iSpeed=10;oUl.innerHTML+=oUl.innerHTML;//定义图片可以循环播放oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';//定义外层ul的宽度，根据图片的个数和每个图片的宽度计算，保证总宽度是可调整的function fnMove(){if(oUl.offsetLeft<-oUl.offsetWidth/2){oUl.style.left=0;}else if(oUl.offsetLeft>0){oUl.style.left=-oUl.offsetWidth/2+'px';}//定义到边界的时候，实现无缝衔接oUl.style.left=oUl.offsetLeft+iSpeed+'px';
//定义图片的右边距随着速度不断不断增加，或减小，实现运动的效果}timer=setInterval(fnMove,30);aA[0].onclick=function(){iSpeed=-10;
//按下左箭头，定义向左运动}aA[1].onclick=function(){iSpeed=10;
//按下右箭头，定义向右运动}oDiv.onmouseover=function(){clearInterval(timer);
//鼠标移动到图片上，清除定时器，停止运动}oDiv.onmouseout=function(){timer=setInterval(fnMove,30);
//鼠标移出，重新开启定时器，重新运动}};
</script>
<body><a href="javascript:;">←</a><a href="javascript:;">→</a>
<div id="div1"><ul><li><img src="sky-1.jpg"></li><li><img src="sky-2.jpg"></li><li><img src="sky-3.jpg"></li><div style="clear: none;"></div></ul>
</div>
</body>
</html>
3、图片点击箭头上/下滚动，松开即停止
<!DOCTYPE html>
<html>
<head><style type="text/css">*{margin:0;padding: 0;}div#miaovslide {text-align: center;}.wrap{width:500px;overflow: hidden; height: 700px;margin: 0 auto;position: relative;}.wrap img{width: 100%;}li{list-style: none;width: 700px;height: 344px;padding: 10px 0;}ul{position: absolute;top: 0;left: 0;}}</style><script type="text/javascript">window.onload=function(){var oDiv=document.getElementById('miaovslide');var oUl=oDiv.getElementsByTagName('ul')[0];var aLi=oUl.getElementsByTagName('li');//获取所有的livar oUp=document.getElementById('up');//获取向上轮播的按钮var oDown=document.getElementById('down');//获取向下轮播的按钮var timer=null;//定义定时器var iSpeed=0;//定义初始速度oUl.innerHTML+oUl.innerHTML; //实现循环无间断的图片流oUp.onmousedown=function(){timer=setInterval(doMove,30);iSpeed=-5;//当按下向左的按钮时，设置速度为负，即向上滚动};oUp.onmouseup=function(){clearInterval(timer);//当抬起鼠标时，清除定时器};oDown.onmousedown=function(){iSpeed=5;timer=setInterval(doMove,30);//当鼠标按下向右的按钮时，设置速度为正，即向下滚动}oDown.onmouseup=function(){clearInterval(timer);//当鼠标抬起时，清除定时器}function doMove(){oUl.style.top=oUl.offsetTop+iSpeed+'px';if(oUl.offsetTop<-oUl.offsetHeight/2){oUl.style.top='0px';}else if(oUl.offsetTop>0){oUl.style.top=-oUl.offsetHeight/2+'px';}};};</script>
</head>
<body>
<div class="slide_module" id="miaovslide"><div id="up"><img src="data:images/prevup.png"></div><div class="wrap"><ul><li><img src="sky-1.jpg"></li><li><img src="sky-2.jpg"></li><li><img src="sky-3.jpg"></li><li><img src="sky-1.jpg"></li></ul></div><div id="down"><img src="data:images/nextdown.png"></div>
</div>
</body>
</html>
4-1、图片自动滚动+手动轮播(jQuery)
<!DOCTYPE html>
<html><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<style type="text/css">.wrap{width: 100%;display: flex;margin: 15px auto;justify-content: space-between;flex-flow: row;flex-wrap: wrap;position: relative;overflow: hidden;
}.wrap ul{width: 50%;overflow: hidden;
}.wrap ul#img img{width: calc(100% - 10px);border: 1px solid #ddd;padding: 5px;
}
.box {height: 100%;
}
.inner{width: 500px;height: 300px;position: relative;overflow: hidden;margin:0 auto;
}
.inner img{width: 500px;height: 300px;vertical-align: top
}
.inner ul {width: 1000%;position: absolute;list-style: none;left:0;top: 0;
}
.inner li{float: left;}.inner ol {position: absolute;height: 20px;right: 20px;bottom: 20px;text-align: center;padding: 5px;
}
.inner ol li{display: inline-block;width: 20px;height: 20px;line-height: 20px;background-color: #fff;margin: 5px;cursor: pointer;}
.inner ol .current{background-color: red;
}
#arr{display: none;
}
#arr span{width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #fff;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #000;opacity: 0.5;border: 1px solid #fff;
}
#arr #right {right: 5px;left: auto;
}</style><div class="wrap"><div class="box" id="box"><div class="inner"><ul><li><a href="#" target="_blank" title=""><img src="data:images/hend1.jpg" alt="hend1"/></a></li><li><a href="#" target="_blank" title=''><img src="data:images/hend2.jpg" alt="hend2" /></a></li><li><a href="#" target="_blank" title=""><img src="data:images/hend3.jpg" alt="hend3"/></a></li></ul><ol class="bar"></ol><div id="arr"><span id="left"> < </span> <span id="right"> ></span></div></div></div>
</div><script type="text/javascript">/**** @param id 传入元素的id* @returns {HTMLElement | null} 返回标签对象，方便获取元素*/function my$(id) {return document.getElementById(id);}//获取各元素，方便操作var box = my$("box");var inner = box.children[0];var ulObj = inner.children[0];var list = ulObj.children;var olObj = inner.children[1];var arr = my$("arr");var imgWidth = inner.offsetWidth;var right = my$("right");var pic = 0;//根据li个数，创建小按钮for (var i = 0; i < list.length; i++) {var liObj = document.createElement("li");olObj.appendChild(liObj);liObj.innerText = (i + 1);liObj.setAttribute("index", i);//为按钮注册mouseover事件liObj.onmouseover = function () {//先清除所有按钮的样式for (var j = 0; j < olObj.children.length; j++) {olObj.children[j].removeAttribute("class");}this.className = "current";pic = this.getAttribute("index");animate(ulObj, -pic * imgWidth);}}//设置ol中第一个li有背景颜色olObj.children[0].className = "current";//克隆一个ul中第一个li,加入到ul中的最后=====克隆ulObj.appendChild(ulObj.children[0].cloneNode(true));var timeId = setInterval(onmouseclickHandle, 2000);//左右焦点实现点击切换图片功能box.onmouseover = function () {arr.style.display = "block";clearInterval(timeId);};box.onmouseout = function () {arr.style.display = "none";timeId = setInterval(onmouseclickHandle, 2000);};right.onclick = onmouseclickHandle;function onmouseclickHandle() {//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,//所以,如果用户再次点击按钮,用户应该看到第二个图片if (pic == list.length - 1) {//如何从第6个图,跳转到第一个图pic = 0;//先设置pic=0ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置}pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,if (pic == list.length - 1) {//第五个按钮颜色干掉olObj.children[olObj.children.length - 1].className = "";//第一个按钮颜色设置上olObj.children[0].className = "current";} else {//干掉所有的小按钮的背景颜色for (var i = 0; i < olObj.children.length; i++) {olObj.children[i].removeAttribute("class");}olObj.children[pic].className = "current";}}left.onclick = function () {if (pic == 0) {pic = list.length - 1;ulObj.style.left = -pic * imgWidth + "px";}pic--;animate(ulObj, -pic * imgWidth);for (var i = 0; i < olObj.children.length; i++) {olObj.children[i].removeAttribute("class");}//当前的pic索引对应的按钮设置颜色olObj.children[pic].className = "current";};//设置任意的一个元素,移动到指定的目标位置function animate(element, target) {clearInterval(element.timeId);//定时器的id值存储到对象的一个属性中element.timeId = setInterval(function () {//获取元素的当前的位置,数字类型var current = element.offsetLeft;//每次移动的距离var step = 10;step = current < target ? step : -step;//当前移动到位置current += step;if (Math.abs(current - target) > Math.abs(step)) {element.style.left = current + "px";} else {//清理定时器clearInterval(element.timeId);//直接到达目标element.style.left = target + "px";}}, 10);}
</script></html>4-2、图片自动轮播+手动轮播（需要jQuery包）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"><style>
* { padding:0; margin:0;
}
ul { list-style:none;
}
.out { width:350px; height:245px; margin:50px auto; position:relative;
}
.img li { position:absolute; top:0px; left:0px; display:none
}
.out .num { position:absolute; bottom:0px; left:0px; font-size:0px; text-align:center; width:100%;
}
.num li { width:20px; height:20px; background:#666666; color:#FFFFFF; text-align:center; line-height:20px; display:inline-block; font-size:16px; border-radius:50%; margin-right:10px; cursor:pointer;
}
.out .btn { position:absolute; top:50%; margin-top:-30px; width:30px; height:60px; background:rgba(0,0,0,0.5); color:#FFFFFF; text-align:center; line-height:60px; font-size:40px; display:none; cursor:pointer;
}
.out .num li.active-1 { background:#AA0000;
}
.out:hover .btn { display:block
}
.out .left { left:0px;
}
.out .right { right:0px;
}
</style>
</head>
<body>
<div class="out"> <!--上面--> <ul class="img"> <li><a href=""><img src="sky-1.jpg" width="350" height="245" alt=""></a></li> <li><a href=""><img src="sky-2.jpg" width="350" height="245" alt=""></a></li> <li><a href=""><img src="sky-3.jpg" width="350" height="245" alt=""></a></li> </ul> <!--下面--> <ul class="num"> </ul> <div class="left btn"><</div> <div class="right btn">></div>
</div>
<script>
$(function(){
//下方for循环 var size=$(".img li").size() for(var i=1; i<=size; i++){ var li="<li>"+i+"</li>"; $(".num").append(li) }
/*size 获取当前元素个数*/ var speed = 1000;
//手动控制轮播
$(".img li").eq(0).show()
$(".num li").eq(0).addClass('active-1')
/*mouseover 可以改成点击事件 click*/
$(".num li").mouseover(function(){
$(this).addClass('active-1').siblings('li').removeClass('active-1')
var index=$(this).index() /*index 当前元素的意思索引值*/
i=index; //i值和自动轮播值是相同的
$(".img li").eq(index).stop(true).show().siblings().stop(true).hide() /*eq 0开始*/ }); //自动控制轮播 var i=0; var t=setInterval(move,1500) //定时器 //右 function move(){ i++; if(i==size){i=0;} $(".num li").eq(i).addClass('active-1').siblings('li').removeClass('active-1'); $(".img li").eq(i).stop(true).show().siblings().stop(true).hide(); }; //左 function moveL(){ i--; if(i==-1){i=size-1;} $(".num li").eq(i).addClass('active-1').siblings('li').removeClass('active-1'); $(".img li").eq(i).stop(true).show().siblings().stop(true).hide(); };
//自动轮播鼠标经过移入和移除 $(".out").hover(function(){ clearInterval(t) },function(){ t=setInterval(move,1500) }); //左右按钮 $(".out .left").click(function(){ moveL() }) $(".out .right").click(function(){ move() })
});
</script>
</body>
</html>
5、照片墙(transform)
鼠标滑到图片上时图片呈摆正略放大状态
<!DOCTYPE html>
<html>
<style type="text/css">
.images{width: 960px;margin: 60px 60px 10px 40px;position: absolute;
}.pic{width: 160px;
}.images img:hover{box-shadow: 15px 15px 20px rgba(50,50,50,0.4);transform:rotate(0deg) scale(2.20);-webkit-transform:rotate(0deg) scale(1.20);z-index: 1000;
}.images img{padding: 10px 10px 15px;background: white;border: 1px solid #ddd;box-shadow: 2px 2px 3px rgba(50,50,50,0.4);-webkit-transition: all 0.5s ease-in;-moz-transition: all 0.5s ease-in;-ms-transition: all 0.5s ease-in;-o-transition: all 0.5s ease-in;transition: all 0.5s ease-in;position: absolute;z-index: 1;
}.pic1{left: 400px;top: 0;transform:rotate(-5deg);-webkit-transform:rotate(-5deg);
}.pic2{left: 200px;top: 10px;transform:rotate(-20deg);-webkit-transform:rotate(-20deg);
}
.pic3{top: 66px;right: 240px;transform:rotate(20deg);-webkit-transform:rotate(20deg);
}.pic4{top: 100px;left: 300px;transform:rotate(-10deg);-webkit-transform:rotate(-10deg);
}
</style>
<div class="images"><img class="pic pic1" src="sky-1.jpg"><img class="pic pic2" src="sky-2.jpg"><img class="pic pic3" src="sky-3.jpg"><img class="pic pic4" src="sky-1.jpg">
</div>
</html>
6、六边形图片(transform)
<!DOCTYPE html>
<html>
<style type="text/css">
*{margin: 0;padding: 0;}
.clear{clear: both;}
body{background: #fff;}
.container{margin: 100px auto;}
<!--show01的旋转角度设a，sin（a）=height/width -->
.con-show01{width: 250px;height: 250px;float: left;margin-left: 120px;overflow: hidden;transform:rotate(45deg);}
<!--show02的旋转角度：-（90+a） -->
.con-show02{width: 100%;height: 100%;overflow: hidden;transform:rotate(-135deg);}
<!--show03的旋转角度图片使摆正即可 -->
.con-show03{width: 100%;height: 100%;overflow: hidden;transform:rotate(90deg);position: relative;background: pink;}
.con-show03 > div{width: 100%;height: 100%;position: absolute;top: 0;left: 0;opacity: 0;line-height: 250px;text-align: center;color: #fff;cursor: pointer;background: url(../images/a.png);transition: opacity 0.3s;}
.con-show03:hover > div{opacity: 1;}
.margin-left{margin-left: 305px;}
.margin-top{margin-top: -70px;}.con-show03>img{width:100%;height:100%;}
</style>
<section class="container"> <div class="con-show01"><div class="con-show02"><div class="con-show03 bg01"><img src="sky-1.jpg"><div>123</div></div></div></div><div class="con-show01"><div class="con-show02"><div class="con-show03 bg02"><img src="sky-2.jpg"><div>123</div></div></div></div><div class="clear"></div><div class="con-show01 margin-left margin-top" ><div class="con-show02"><div class="con-show03 bg04"><img src="sky-3.jpg"><div>123</div></div></div></div><div class="con-show01 margin-top"><div class="con-show02"><div class="con-show03"><img src="sky-1.jpg"><div>123</div></div></div></div> </section>
</html>
7、点击左右图片手动轮播（需要jQuery包）
点击左边的图，三张图往右移；点击右边的图，三张图往左移；（写了两个这样的轮播）
<!DOCTYPE html>
<html><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><style type="text/css">div[class^="gsdtimg"]{float:left;width: 25%;height: 150px;overflow: hidden;margin-right:2%;
}div[class="gsdtimgtwo"]{height:250px;
}div[class^="gsdtimg"] img{width:100%;
}
</style><div class = "1" ><div class="gsdtimgone" id="gsdtimgone" onclick = "gsdtimgoneEvent(this,myimgs)"><img id="oneimg" src="data:images_dl/gsdt1-2.JPG" alt="">
</div><div class="gsdtimgtwo" id="gsdtimgtwo" width="40%"><img id="twoimg" src="data:images_dl/gsdt1-3.jpg" alt="">
</div><div class="gsdtimgthree" id="gsdtimgthree" onclick = "gsdtimgthreeEvent(this,myimgs)"><img id="threeimg" src="data:images_dl/gsdt1-4.JPG" alt="">
</div></div>
<div class="clear" style="clear:both;"></div>
<div class = "1" ><div class="gsdtimgone" id="gsdtimgone" onclick = "gsdtimgoneEvent(this,myimgs2)"><img id="oneimg" src="data:images_dl/gsdt2-2.JPG" alt="">
</div><div class="gsdtimgtwo" id="gsdtimgtwo" width="40%"><img id="twoimg" src="data:images_dl/gsdt2-3.JPG" alt="">
</div><div class="gsdtimgthree" id="gsdtimgthree" onclick = "gsdtimgthreeEvent(this,myimgs2)"><img id="threeimg" src="data:images_dl/gsdt2-4.jpg" alt="">
</div></div><script>//要求图片命名按照一定的格式var myimgs=new Array("this is nothing","gsdt1-1.JPG","gsdt1-2.jpg","gsdt1-3.JPG","gsdt1-4.JPG")var myimgs2=new Array("this is nothing","gsdt2-1.JPG","gsdt2-2.JPG","gsdt2-3.JPG","gsdt2-4.jpg")//实现数字的循环function realn(n){if (n < 1 ){n = 4;}if (n > 4 ){n = 1;}else{n = n;}return n;}//点击左边div，实现整体往右轮播function gsdtimgoneEvent(oDivv,myimgs){ var oDiv = oDivv;var selfimg1 = oDiv.children[0];var selfimg2 = oDiv.parentNode.children[1].children[0];var selfimg3 = oDiv.parentNode.children[2].children[0];var src = selfimg1.getAttribute("src");//获取被点击的时候是第几张图片var m = src.charAt(16);//字符转数字，下面需加减运算n = parseInt(m);n = realn(n);selfimg1.setAttribute('src', 'images_dl/' + myimgs[realn(n - 1)] );selfimg2.setAttribute('src', 'images_dl/' + myimgs[realn(n)] );selfimg3.setAttribute('src', 'images_dl/' + myimgs[realn(n + 1)] );};//点击右边div，实现整体往左轮播function gsdtimgthreeEvent(oDivv,myimgs){var oDiv = oDivv;var selfimg1 = oDiv.children[0];var selfimg2 = oDiv.parentNode.children[1].children[0];var selfimg3 = oDiv.parentNode.children[0].children[0];var src = selfimg1.getAttribute("src");var m = src.charAt(16);n = parseInt(m);n = realn(n);selfimg1.setAttribute('src', 'images_dl/' + myimgs[realn(n + 1)] );selfimg2.setAttribute('src', 'images_dl/' + myimgs[realn(n)] );selfimg3.setAttribute('src', 'images_dl/' + myimgs[realn(n - 1)] );};
</script></html>多张图片轮播和展示的几种常见效果写法相关推荐
- 【网页前端实现多张图片轮播或者切换】三种方法实现
多张图片轮播 今天我们主要用三种方式实现多张图片轮播,运用的语言是web中的html,使用软件是HBuilder. 达到以下这种效果:班 撰写日期:2019年2月2日 轮播一般都会有几张图片来完成的,所以会用到轮播切换高亮效果来实现 ...
- css3旋转木马轮播图,超酷jQuery 3D旋转木马效果轮播图插件
jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得推荐. 由 ...
最新文章
- 如何在PowerBuilder 11.x 中通过ADO.NET访问Sybase ASE?
- 同事就是同事，职场没有兄弟姐妹
- swagger + springboot 传递 List参数解决
- 修改linux绑定的域名,手工修改linux系统下DA面板绑定的域名
- 【QT 数据库专辑】【01】搭建本地MYSQL数据库 - 工具安装
- 微信小程序-上传多张图片加进度条（支持预览、删除）
- MTK 驱动（73）---MTK 6761平台 android O bootloader启动之 Pre-loader -amp;gt; Lk
- 二十六. Python基础(26)--类的内置特殊属性和方法
- Java魔法堂：自定义和解析注解
- redis-trib.rb命令详解
- 板邓：php+mayql分页原理及案例
- 对Linux内核tty设备的一点理解（转）
- winUSB设备的开发方法
- 西门子S7-300 PLC 的50个经典问题
- python调用PHP
- jdk1.8的下载与安装教程
- 云图科技，长沙VR多方面给人们带来了新的体验！
- TI公司LDO电源芯片的选用
- 【Codecs系列】HEVC中三种Intra帧类型的区别：BLA/IDR/CRA
- 安卓指纹支付（指纹识别）