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

您的位置:首頁技術(shù)文章
文章詳情頁

基于JavaScript實現(xiàn)輪播圖效果

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

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

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

先看實現(xiàn)效果:

基于JavaScript實現(xiàn)輪播圖效果

代碼僅供參考:

<!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'; } } //設(shè)置計時器 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>

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 12cr1mov无缝钢管切割-15crmog无缝钢管切割-40cr无缝钢管切割-42crmo无缝钢管切割-Q345B无缝钢管切割-45#无缝钢管切割 - 聊城宽达钢管有限公司 | 护腰带生产厂家_磁石_医用_热压护腰_登山护膝_背姿矫正带_保健护具_医疗护具-衡水港盛 | 桐城新闻网—桐城市融媒体中心主办| 重庆中专|职高|技校招生-重庆中专招生网 | jrs高清nba(无插件)直播-jrs直播低调看直播-jrs直播nba-jrs直播 上海地磅秤|电子地上衡|防爆地磅_上海地磅秤厂家–越衡称重 | YT保温材料_YT无机保温砂浆_外墙保温材料_南阳银通节能建材高新技术开发有限公司 | 耐力板-PC阳光板-PC板-PC耐力板 - 嘉兴赢创实业有限公司 | 冷镦机-多工位冷镦机-高速冷镦机厂家-温州金诺机械设备制造有限公司 | 编织人生 - 权威手工编织网站,编织爱好者学习毛衣编织的门户网站,织毛衣就上编织人生网-编织人生 | 干法制粒机_智能干法制粒机_张家港市开创机械制造有限公司 | 智能家居全屋智能系统多少钱一套-小米全套价格、装修方案 | 预制舱-电力集装箱预制舱-模块化预制舱生产厂家-腾达电器设备 | LOGO设计_品牌设计_VI设计 - 特创易 | 华禹护栏|锌钢护栏_阳台护栏_护栏厂家-华禹专注阳台护栏、楼梯栏杆、百叶窗、空调架、基坑护栏、道路护栏等锌钢护栏产品的生产销售。 | 贵阳用友软件,贵州财务软件,贵阳ERP软件_贵州优智信息技术有限公司 | 贴片电容-贴片电阻-二三极管-国巨|三星|风华贴片电容代理商-深圳伟哲电子 | 钛合金标准件-钛合金螺丝-钛管件-钛合金棒-钛合金板-钛合金锻件-宝鸡远航钛业有限公司 | 扒渣机,铁水扒渣机,钢水扒渣机,铁水捞渣机,钢水捞渣机-烟台盛利达工程技术有限公司 | 冷油器-冷油器换管改造-连云港灵动列管式冷油器生产厂家 | 农业仪器网 - 中国自动化农业仪器信息交流平台 | 酒瓶_酒杯_玻璃瓶生产厂家_徐州明政玻璃制品有限公司 | (中山|佛山|江门)环氧地坪漆,停车场地板漆,车库地板漆,聚氨酯地板漆-中山永旺地坪漆厂家 | 选矿设备-新型重选设备-金属矿尾矿重选-青州冠诚重工机械有限公司 | 武汉画册印刷厂家-企业画册印刷-画册设计印刷制作-宣传画册印刷公司 - 武汉泽雅印刷厂 | 北京三友信电子科技有限公司-ETC高速自动栏杆机|ETC机柜|激光车辆轮廓测量仪|嵌入式车道控制器 | 婚博会2024时间表_婚博会门票领取_婚博会地址-婚博会官网 | 天津散热器_天津暖气片_天津安尼威尔散热器制造有限公司 | 电子天平-华志电子天平厂家 | 橡胶接头|可曲挠橡胶接头|橡胶软接头安装使用教程-上海松夏官方网站 | 丹佛斯变频器-丹佛斯压力开关-变送器-广州市风华机电设备有限公司 | 高精度电阻回路测试仪-回路直流电阻测试仪-武汉特高压电力科技有限公司 | 空调风机,低噪声离心式通风机,不锈钢防爆风机,前倾皮带传动风机,后倾空调风机-山东捷风风机有限公司 | 温州在线网| 广州监控安装公司_远程监控_安防弱电工程_无线wifi覆盖_泉威安防科技 | 储能预警-储能消防系统-电池舱自动灭火装置-四川千页科技股份有限公司官网 | 荣事达手推洗地机_洗地机厂家_驾驶式扫地机_工业清洁设备 | 焊接烟尘净化器__焊烟除尘设备_打磨工作台_喷漆废气治理设备 -催化燃烧设备 _天津路博蓝天环保科技有限公司 | 紫外线老化试验箱_uv紫外线老化试验箱价格|型号|厂家-正航仪器设备 | 河南砖机首页-全自动液压免烧砖机,小型砌块水泥砖机厂家[十年老厂] | 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 真空乳化机-灌装封尾机-首页-温州精灌|