jQuery自适应-3D旋转轮播图
程序员文章站
2022-07-02 14:11:41
3D旋转轮播图 本例源于(站长之家实例http://sc.chinaz.com/jiaoben/170215391070.htm) 其他相似示例(https://www.cnblogs.com/incredible-x/p/9688333.html) 自己研究重写了一遍。 一、先写静态的初始样式的c ......
3d旋转轮播图
本例源于(站长之家实例http://sc.chinaz.com/jiaoben/170215391070.htm)
其他相似示例(https://www.cnblogs.com/incredible-x/p/9688333.html)
自己研究重写了一遍。
一、先写静态的初始样式的css和html。我用的是 550x300的大小一致的 5张图片,代码可拓展为三张、四张、甚至大于五张。如图是静态效果:
图后的代码是静态时的样式html和css。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <!-- jquery cdn --> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> * { margin: 0; padding: 0;word-break: break-all; } a { color:#fff;text-decoration: none;} a:hover { text-decoration: none;} ul,li { list-style: none;} html,body{width: 100%;height: 100%;} .main {max-width: 800px; margin: 0 auto;} #slide {width: 100%;height: 420px;position: relative;overflow: hidden;} #slide .pic { position: absolute; } #slide .pic img {width: calc(100% - 14px);height: calc(100% - 14px);} #slide .p1 { z-index: 3;width: 40%;height: 40%;left: -50%;top: 30%;} #slide .p2 { z-index: 4;width: 60%;height: 60%;left: -20%;top: 20%;} #slide .p3 {z-index: 5; width: 80%;height: 80%; left: 10%;top: 10%;} #slide .p4 { z-index: 4; width: 60%; height: 60%; left: 60%; top: 20%;} #slide .p5 { z-index: 3; width: 40%;height: 40%; left: 110%; top: 30%;} #slide .btn { position: absolute; z-index: 6; bottom: 20%; width: 180px; /* 计算得出 5*30+5*6=180 */ margin-left: -90px; left: 50%; } #slide .btn span { width: 24px; height: 8px; border-radius: 3px; float: left; background-color: #dedede; margin: 0 3px; } #slide .btn .on {background-color: #ffd200; } </style> </head> <body> <div class="main"> <div id="slide" class="slide"> <div class="pic"><img src="./images/1.png"></div> <div class="pic"><img src="./images/2.png"></div> <div class="pic"><img src="./images/3.png"></div> <div class="pic"><img src="./images/4.png"></div> <div class="pic"><img src="./images/5.png"></div> <div class="btn"> <!-- <span data-minibtn-id='1'></span><span></span><span></span><span></span><span></span> --> </div> </div> <button class="btn-prev">向左</button> <button class="btn-next">向右</button> </div> </body> </html>
二、然后,js编写动态交互效果。这段是js代码(要引入jquery库)
备注还比较详细,一和二的代码直接复制就可以运行。
<script> var slidenumber; //轮播图片的数量 var minislidebtn = true; //minislidebtn=true为开启滚动按钮 var isabletouch = true; //是否可以触摸滑动切换 var isautoplay = true; //是否可以自动轮播 //窗口大小改变时改变轮播图宽高 $(window).resize(function () { $(".slide").height($(".slide").width() * 0.56); }); $(function () { $("#slide").height($("#slide").width() * 0.56); //调整轮播图的高度 slidenumber = $("#slide img").length; //轮播图数量 for (let i = 0; i < slidenumber; i++) { //给每个div,而不是img,添加自定义属性编号 $("#slide .pic").eq(i).attr('data-img-id', i); } // 根据轮播图片数量添加图片位置对应的样式 // 还有 if(slidenumber=1,=2,=3,=4,>5) if (slidenumber = 5) { for (let i = 0; i < slidenumber; i++) { $("#slide .pic").eq(i).addclass('p' + (i + 1)); } } //根据图片数量设置轮播图按钮 if (minislidebtn) { for (let i = 0; i < slidenumber; i++) { $("#slide .btn").append("<span data-minibtn-id=" + i + "></span>"); } $("#slide .btn").width(slidenumber * 34); $("#slide .btn").css('margin-left', '-' + slidenumber * 17 + 'px'); //调整margin-left 负值使按钮居中 } //自动切换 if (isautoplay) { setinterval(() => { right(); }, 3000) } //触摸切换 if (isabletouch) { slidetouch(); } imgclickchange();//点击图片左右切换图片 currentbtn();//当前轮播按钮的选中状态 }); $(".btn-prev").click(function () { //点击按钮翻上一页 left(); }) $(".btn-next").click(function () { //点击按钮翻下一页 right(); }) /*下一张图片,右边的图向左走,注意:第一个变成最后一个,最后一个变成倒数第二个*/ function right() { let temp = new array(); for (let i = 0; i < slidenumber; i++) { temp[i] = $("#slide .pic[data-img-id=" + i + "]").attr('class'); //临时数组获取class是pic p1,pic p2,pic p3... } for (let i = 0; i < slidenumber; i++) { if (i == 0) { //如果编号为第一张图片,它将变成最后一个 $("#slide .pic[data-img-id=" + i + "]").attr('class', temp[slidenumber - 1]); } else { $("#slide .pic[data-img-id=" + i + "]").attr('class', temp[i - 1]); } } imgclickchange();//点击图片左右切换图片 currentbtn();//当前轮播按钮的选中状态 } /*上一张图片, 左边的图向右走,注意:最后一张会变成第一张,第一个图变成第二个*/ function left() { let temp = new array(); for (let i = 0; i < slidenumber; i++) { temp[i] = $("#slide .pic[data-img-id=" + i + "]").attr('class'); //临时数组获取class pic p1,pic p2... } for (let i = 0; i < slidenumber; i++) { if (i == slidenumber - 1) { //如果编号为最后一张图片,它将变成 $("#slide .pic[data-img-id=" + i + "]").attr('class', temp[0]); } else { $("#slide .pic[data-img-id=" + i + "]").attr('class', temp[i + 1]); } } imgclickchange();//点击图片本身切换图片 currentbtn();//当前轮播按钮的选中状态 } /*点击图片左右切换图片*/ function imgclickchange() { // $("#slide .p2").click(function(){ previmg();});//为什么这种写法无效 // $("#slide .p4").click(function(){ nextimg();});//为什么这种写法无效 $('#slide .pic').removeattr('onclick'); $("#slide .p2").attr('onclick', 'left()'); $("#slide .p4").attr('onclick', 'right()'); } /*当前轮播按钮的选中状态*/ function currentbtn() { var cur = parseint($("#slide .p3").attr('data-img-id'));//取.p3的当前img-id $("#slide .btn span").removeclass('on'); $("#slide .btn span[data-minibtn-id=" + cur + "]").addclass('on'); } /* jquery写法 slidetouch(),触摸滑动切换 */ /* function slidetouch() { let _start = 0, _end = 0; $("#slide").on('touchstart', (e) => { _start = e.originalevent.targettouches[0].pagex; }); $('#slidd').on('touchmove', (e) => { // _end = (_start - e.originalevent.targettouches[0].pagex); _end = e.originalevent.targettouches[0].pagex; }); $('#slide').on('touchend', (e) => { if ((_start - _end) < -100) { //【起点-终点】的绝对值 >100,故 x<-100 & x>100 left(); _end = 0; } else if ((_start - _end) > 100) { right(); _end = 0; } }); }*/ /* js原生写法 slidetouch(),作用完全同上,触摸滑动切换 */ function slidetouch() { let _start = 0, _end = 0, _ele = document.getelementbyid('slide'); _ele.addeventlistener('touchstart', touchstart, false); _ele.addeventlistener('touchmove', touchmove, false); _ele.addeventlistener('touchend', touchend, false); function touchstart(e) { _start = e.targettouches[0].pagex; } function touchmove(e) { _end = e.targettouches[0].pagex; } function touchend(e) { if ((_start - _end) < -100) { //【起点-终点】的绝对值 >100,故 x<-100 & x>100 left(); _end = 0; } else if ((_start - _end) > 100) { right(); _end = 0; } } } </script>
效果如下图:只显示三张,太多图的话,手机移动端显示不下