电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

基于JavaScript實現輪播圖效果

瀏覽:36日期:2023-06-11 13:01:56

本文實例為大家分享了JavaScript實現輪播圖效果的具體代碼,供大家參考,具體內容如下

學習筆記(學校的課設),實現了左右切換,按指示點切換、按小圖標切換和自動切換,但是還有某些功能沒完善,如:切換到某張圖片后,左右并沒有切換到前后相應的圖片。

先看實現效果:

基于JavaScript實現輪播圖效果

代碼僅供參考:

<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title></title> <style> .div0{ height: 100px; width: 100%; background-color:black; opacity:0.75; } .div1{ background-image: url(img/bg2.png); height: 400px; width: 100%; } .div2{ height: 200px; width: 100%; background-color:black; opacity:0.75; position: absolute; } .spot{ position: absolute; left: 10%; } .spot_list1{ float: left; border:3px solid wheat; transform:rotate(-30deg); -ms-transform:rotate(-30deg); -moz-transform:rotate(-30deg); -webkit-transform:rotate(-30deg); -o-transform:rotate(-30deg); opacity:0.5; } .spot_list2{ float: left; border:3px solid wheat; transform:rotate(-15deg); -ms-transform:rotate(-15deg); -moz-transform:rotate(-15deg); -webkit-transform:rotate(-15deg); -o-transform:rotate(-15deg); opacity:0.5; } .spot_list3{ float: left; border:3px solid wheat; transform:rotate(28deg); -ms-transform:rotate(28deg); -moz-transform:rotate(28deg); -webkit-transform:rotate(28deg); -o-transform:rotate(28deg); opacity:0.5; } .div1_1{ border: 10px solid gainsboro; width: 830px; height: 300px; left: 10%; top: 10%; position: relative; overflow: hidden; } .btn { width: 100%; height: 80px; position: absolute; margin: 0 auto; top: 120px; } .box_big { position: absolute; height: 400px; vertical-align: middle } #imgList{ list-style: none; position: absolute; } #imgList li{ float: left; margin: 0 10px; } .left_btn, .right_btn { width: 30px; height: 80px; background:gray; line-height: 90px; border-radius: 10px; } .left_btn { float: left; } .right_btn { float: right; } #navDiv{ position: absolute; left: 300px; } #navDiv a{ float: left; width: 15px; height: 15px; border-radius:50%; background-color: black; margin: 0 10px; opacity: 0.5; filter: alpha(opacity=50); } #navDiv a:hover{ background-color: red; } </style> </head> <body> <div class='div0'></div> <div class='div1'> <div class='div1_1'> <div id='navDiv'> <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a> <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a> <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a> <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a> <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a> <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a> </div> <div class='box_big'> <ul id='imgList'> <li><img src='http://www.hdgsjgj.cn/bcjs/img/1.jpg' ></li> <li><img src='http://www.hdgsjgj.cn/bcjs/img/2.jpg' id='2></li> <li><img src='http://www.hdgsjgj.cn/bcjs/img/3.jpg' /></li> <li><img src='http://www.hdgsjgj.cn/bcjs/img/4.jpg' /></li> <li><img src='http://www.hdgsjgj.cn/bcjs/img/5.jpg' /></li> <li><img src='http://www.hdgsjgj.cn/bcjs/img/6.jpg' /></li> </ul> </div> <div class='btn'> <div class='left_btn'><img src='http://www.hdgsjgj.cn/bcjs/img/prev.png'></div> <div class='right_btn'><img src='http://www.hdgsjgj.cn/bcjs/img/next.png'></div> </div> </div> </div> <!--小標圖片--> <div onmouseleave='m1()'> <div class='spot'> <img src='http://www.hdgsjgj.cn/bcjs/img/thumbs/1.jpg' onmouseover='mouseover(1)' onmouseout='mouseout(1)'> <img src='http://www.hdgsjgj.cn/bcjs/img/thumbs/2.jpg' onmouseover='mouseover(2)' onmouseout='mouseout(2)'> <img src='http://www.hdgsjgj.cn/bcjs/img/thumbs/3.jpg' onmouseover='mouseover(3)' onmouseout='mouseout(3)'> <img src='http://www.hdgsjgj.cn/bcjs/img/thumbs/4.jpg' onmouseover='mouseover(4)' onmouseout='mouseout(4)'> <img src='http://www.hdgsjgj.cn/bcjs/img/thumbs/5.jpg' onmouseover='mouseover(5)' onmouseout='mouseout(5)'> <img src='http://www.hdgsjgj.cn/bcjs/img/thumbs/6.jpg' onmouseover='mouseover(6)' onmouseout='mouseout(6)'> </div> </div> </body> <script> var box=document.getElementById('1'); //var spot = document.getElementsByClassName('spot_list'); var left_btn=document.getElementsByClassName('left_btn')[0]; var right_btn=document.getElementsByClassName('right_btn')[0]; var time = null; var count = 0; var ids=document.getElementsByTagName('a'); ids[0].style.backgroundColor='red'; var spot_list1=document.getElementById('spot_list1'); spot_list1.setAttribute('class','spot_list3'); spot_list1.style.opacity='0.98'; //左按鈕 left_btn.onclick=function(){ count--; if(count<1){ count=6 } box.src='http://www.hdgsjgj.cn/bcjs/img/' + count + '.jpg'; for(var i=0;i<ids.length;i++){ ids[i].style.backgroundColor='black'; } ids[count - 1].style.backgroundColor='red'; for(var i=1;i<=6;i++){ var img=document.getElementById('spot_list'+i); if(img.id=='spot_list1' || img.id=='spot_list4'){ img.setAttribute('class','spot_list1'); img.style.opacity='0.5'; }else if(img.id=='spot_list2' || img.id=='spot_list5'){ img.setAttribute('class','spot_list2'); img.style.opacity='0.5'; }else if(img.id=='spot_list3' || img.id=='spot_list6'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.5'; } } var img=document.getElementById('spot_list'+count); if(img.id=='spot_list1' || img.id=='spot_list4'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.98'; }else if(img.id=='spot_list2' || img.id=='spot_list5'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.98'; }else if(img.id=='spot_list3' || img.id=='spot_list6'){ img.setAttribute('class','spot_list1'); img.style.opacity='0.98'; } } //右按鈕 right_btn.onclick=function(){ changeImg(); } // var x=1; var changeImg = function(){ x++; if(x > 6){ x = 1; } box.src = 'http://www.hdgsjgj.cn/bcjs/img/' + x + '.jpg'; for(var i=0;i<ids.length;i++){ ids[i].style.backgroundColor='black'; } ids[x - 1].style.backgroundColor='red'; for(var i=1;i<=6;i++){ var img=document.getElementById('spot_list'+i); if(img.id=='spot_list1' || img.id=='spot_list4'){ img.setAttribute('class','spot_list1'); img.style.opacity='0.5'; }else if(img.id=='spot_list2' || img.id=='spot_list5'){ img.setAttribute('class','spot_list2'); img.style.opacity='0.5'; }else if(img.id=='spot_list3' || img.id=='spot_list6'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.5'; } } var img=document.getElementById('spot_list'+x); if(img.id=='spot_list1' || img.id=='spot_list4'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.98'; }else if(img.id=='spot_list2' || img.id=='spot_list5'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.98'; }else if(img.id=='spot_list3' || img.id=='spot_list6'){ img.setAttribute('class','spot_list1'); img.style.opacity='0.98'; } } //設置計時器 var show; show=setInterval(changeImg, 3000); //圖片切換 function mouseover(n){ clearInterval(show); var img=document.getElementById('spot_list'+n); if(img.id=='spot_list1' || img.id=='spot_list4'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.98'; }else if(img.id=='spot_list2' || img.id=='spot_list5'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.98'; }else if(img.id=='spot_list3' || img.id=='spot_list6'){ img.setAttribute('class','spot_list1'); img.style.opacity='0.98'; } box.src='http://www.hdgsjgj.cn/bcjs/img/'+n+'.jpg'; for(var i=0;i<ids.length;i++){ ids[i].style.backgroundColor='black'; } ids[n-1].style.backgroundColor='red'; } for(let i=0;i<ids.length;i++){ ids[i].onclick=function(){ clearInterval(show); for(var n=0;n<ids.length;n++){ ids[n].style.backgroundColor='black'; } box.src='http://www.hdgsjgj.cn/bcjs/img/'+(i+1)+'.jpg'; ids[i].style.backgroundColor='red'; } } //離開小圖標時 function mouseout(n){ var img=document.getElementById('spot_list'+n); ids[n-1].style.backgroundColor='black'; if(img.id=='spot_list1' || img.id=='spot_list4'){ img.setAttribute('class','spot_list1'); img.style.opacity='0.5'; }else if(img.id=='spot_list2' || img.id=='spot_list5'){ img.setAttribute('class','spot_list2'); img.style.opacity='0.5'; }else if(img.id=='spot_list3' || img.id=='spot_list6'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.5'; } } function m1(){ //啟動計時器 show=setInterval(changeImg, 3000); } </script></html>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 雷达液位计_超声波风速风向仪_雨量传感器_辐射传感器-山东风途物联网 | 泥沙分离_泥沙分离设备_泥砂分离机_洛阳隆中重工机械有限公司 | 报警器_家用防盗报警器_烟雾报警器_燃气报警器_防盗报警系统厂家-深圳市刻锐智能科技有限公司 | 光栅尺_Magnescale探规_磁栅尺_笔式位移传感器_苏州德美达 | SMC-ASCO-CKD气缸-FESTO-MAC电磁阀-上海天筹自动化设备官网 | 清管器,管道清管器,聚氨酯发泡球,清管球 - 承德嘉拓设备 | 必胜高考网_全国高考备考和志愿填报信息平台 | 硫化罐-电加热蒸汽硫化罐生产厂家-山东鑫泰鑫智能装备有限公司 | 爱德华真空泵油/罗茨泵维修,爱发科-比其尔产品供应东莞/杭州/上海等全国各地 | 大连海岛旅游网>>大连旅游,大连海岛游,旅游景点攻略,海岛旅游官网 | 卷筒电缆-拖链电缆-特种柔性扁平电缆定制厂家「上海缆胜」 | 据信,上课带着跳 D 体验-别样的课堂刺激感受引发网友热议 | 幂简集成 - 品种超全的API接口平台, 一站搜索、试用、集成国内外API接口 | 阻垢剂-反渗透缓蚀阻垢剂厂家-山东鲁东环保科技有限公司 | 塑料造粒机「厂家直销」-莱州鑫瑞迪机械有限公司 | 苏州西装定制-西服定制厂家-职业装定制厂家-尺品服饰西装定做公司 | 锡膏喷印机-全自动涂覆机厂家-全自动点胶机-视觉点胶机-深圳市博明智控科技有限公司 | 西子馋火锅鸡加盟-太原市龙城酉鼎餐饮管理有限公司 | 新型锤式破碎机_新型圆锥式_新型颚式破碎机_反击式打沙机_锤式制砂机_青州建源机械 | 防水接头-电缆防水接头-金属-电缆密封接头-不锈钢电缆接头 | 活性炭-果壳木质煤质柱状粉状蜂窝活性炭厂家价格多少钱 | 湖南自考_湖南自学考试| 氢氧化钙设备, 氢氧化钙生产线-淄博惠琛工贸有限公司 | 奥运星-汽车性能网评-提供个性化汽车资讯 | 越南专线物流_东莞国际物流_东南亚专线物流_行通物流 | 西门子伺服控制器维修-伺服驱动放大器-828D数控机床维修-上海涌迪 | 杭州网络公司_百度SEO优化-外贸网络推广_抖音小程序开发-杭州乐软科技有限公司 | 成都离婚律师|成都结婚律师|成都离婚财产分割律师|成都律师-成都离婚律师网 | 金联宇电缆|广东金联宇电缆厂家_广东金联宇电缆实业有限公司 | 蜗轮丝杆升降机-螺旋升降机-丝杠升降机厂家-润驰传动 | 智能汉显全自动量热仪_微机全自动胶质层指数测定仪-鹤壁市科达仪器仪表有限公司 | PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | 瑞典Blueair空气净化器租赁服务中心-专注新装修办公室除醛去异味服务! | 水环真空泵厂家,2bv真空泵,2be真空泵-淄博真空设备厂 | 厂房出租-厂房规划-食品技术-厂房设计-厂房装修-建筑施工-设备供应-设备求购-龙爪豆食品行业平台 | 胶水,胶粘剂,AB胶,环氧胶,UV胶水,高温胶,快干胶,密封胶,结构胶,电子胶,厌氧胶,高温胶水,电子胶水-东莞聚力-聚厉胶粘 | 高压分散机(高压细胞破碎仪)百科-北京天恩瀚拓 | 冷镦机-多工位冷镦机-高速冷镦机厂家-温州金诺机械设备制造有限公司 | 多米诺-多米诺世界纪录团队-多米诺世界-多米诺团队培训-多米诺公关活动-多米诺创意广告-多米诺大型表演-多米诺专业赛事 | 千淘酒店差旅平台-中国第一家针对TMC行业的酒店资源供应平台 | 螺旋绞龙叶片,螺旋输送机厂家,山东螺旋输送机-淄博长江机械制造有限公司 |