jquery 广告轮播图
Posted dyd520
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 广告轮播图相关的知识，希望对你有一定的参考价值。
轮播图
/*轮播图基本功能：
* 1图片切换
* 1.1图片在中间显示
* 1.2图片淡入淡出
* 2左右各有一个按钮
* 2.1点击左按钮，图片切换上一张
* 2.2点击右按钮，图片切换下一张
* 2.3鼠标滑过按钮，按钮颜色加深
* 3底部的导航点
* 3.1图片为第几张时，点在那第几张
* 3.2鼠标滑到第几个点，图片切换到第几张
* 4图片自动轮播
* 4.1默认自动下一张
* 4.2鼠标在图片范围时，停止切换
* 4.3鼠标离开图片范围，恢复自动切换
* 5鼠标放在图片范围时，变为小手样式
*/
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <style type="text/css"> /*容器*/ #content padding: 0px; margin: 0px auto; width: 966px; height: 644px; position: relative; /*容器中图片样式*/ #content img width: 966px; height: 644px; position: absolute; /*在光标图片上时,为小手状态*/ #content:hover cursor: pointer; /*图片隐藏*/ .imgshow display: block; /*图片显示*/ .imghide display: none; #left,#right position: absolute; width: 25px; height: 50px; background-color: gray; color: white; line-height: 50px; text-align: center; font-size: 22px; border-radius:5px ; #left top: 297px; left: 0px; #right top:297px; margin-left: 940px; #left:hover,#right:hover opacity: 0.5; #nav:hover cursor: default; #nav div width: 20px; height: 20px; border-radius: 10px; margin-left: 10px; margin-top: 5px; float: left; .divshow background-color: red; .divhide background-color: lawngreen; #nav div:hover opacity: 0.5; #nav position: absolute; width: 200px; height: 30px; margin-top:590px ; margin-left: 25px; </style> </head> <body> <!--存放图片、按钮、导航点--> <div id="content"class="conClass"> <!--图片--> <img src="image/美女 (1).jpg"class="imgshow"/> <img src="image/美女 (2).jpg"class="imghide"/> <img src="image/美女 (3).jpg"class="imghide"/> <img src="image/美女 (4).jpg"class="imghide"/> <img src="image/美女 (5).jpg"class="imghide"/> <img src="image/美女 (6).jpg"class="imghide"/> <div id="left"><</div> <div id="right">></div> <div id="nav"> <div class="divshow"></div> <div class="divhide"></div> <div class="divhide"></div> <div class="divhide"></div> <div class="divhide"></div> <div class="divhide"></div> </div> </div> <script type="text/javascript"> /*轮播图基本功能： * 1图片切换 * 1.1图片在中间显示 * 1.2图片淡入淡出 * 2左右各有一个按钮 * 2.1点击左按钮，图片切换上一张 * 2.2点击右按钮，图片切换下一张 * 2.3鼠标滑过按钮，按钮颜色加深 * 3底部的导航点 * 3.1图片为第几张时，点在那第几张 * 3.2鼠标滑到第几个点，图片切换到第几张 * 4图片自动轮播 * 4.1默认自动下一张 * 4.2鼠标在图片范围时，停止切换 * 4.3鼠标离开图片范围，恢复自动切换 * 5鼠标放在图片范围时，变为小手样式 */ /*实现思路 * 所有图片在同一位置 * 一张图片展示，其余图片隐藏 */ //创建一个变量来存放当前图片的位置(索引位置) var showindex=0; //定时器调用的方法 function timershow() /*样式切换图片 var index=$("img").index($(".imgshow")); //隐藏当前图片 $("img").eq(index).removeClass("imgshow").addClass("imghide"); if(index==5) index=-1 $("img").eq(index+1).removeClass("imghide").addClass("imgshow"); */ var imageindex=showindex; //点击按钮，下标向后移动 showindex++; //切换到第一张图片，showindex改为0 if(showindex==6) showindex=0 //返回当前图片的位置 //console.log(imageindex); //上一张图片淡出 $("img").eq(imageindex).fadeOut(1000); //当前图片淡出 $("img").eq((imageindex+1)%6).fadeIn(1000); //上一个导航点样式修改为divhide $("#nav div").eq(imageindex).removeClass("divshow").addClass("divhide"); //当前导航点样式修改为divshow $("#nav div").eq((imageindex+1)%6).removeClass("divhide").addClass("divshow"); $(function() //自动调用方法 var timer=setInterval(timershow,2000); //上一张图片 $("#right").click(function() /*样式切换图片 var index=$("img").index($(".imgshow")); //隐藏当前图片 $("img").eq(index).removeClass("imgshow").addClass("imghide"); if(index==5) index=-1 $("img").eq(index+1).removeClass("imghide").addClass("imgshow"); */ var imageindex=showindex; //点击按钮，下标向后移动 showindex++; //切换到第一张图片，showindex改为0 if(showindex==6) showindex=0 //返回当前图片的位置 console.log(imageindex); //上一张图片淡出 $("img").eq(imageindex).fadeOut(1000); //当前图片淡出 $("img").eq((imageindex+1)%6).fadeIn(1000); //上一个导航点样式修改为divhide $("#nav div").eq(imageindex).removeClass("divshow").addClass("divhide"); //当前导航点样式修改为divshow $("#nav div").eq((imageindex+1)%6).removeClass("divhide").addClass("divshow"); ); //下一张图片 $("#left").click(function() console.log("修改前："+showindex) var imageindex=showindex; //点击按钮，下标向后移动 showindex--; //切换到最后一张图片，showindex变为5 if(showindex==-1) showindex=5; //上一张图片淡出 $("img").eq(imageindex).fadeOut(1000); //当前图片淡出 $("img").eq((imageindex-1)%6).fadeIn(1000); //上一个导航点样式修改为divhide $("#nav div").eq(imageindex).removeClass("divshow").addClass("divhide"); //当前导航点样式修改为divshow $("#nav div").eq((imageindex-1)%6).removeClass("divhide").addClass("divshow"); ); //导航点 $("#nav div").mouseover(function() console.log("修改前"+showindex);//修改前的位置 var divindex=$("#nav div").index($(this));//获取当前鼠标在哪一个点上 //选定的为当前的自己则不产生动画效果 if(divindex!=showindex) //将以前的点的样式修改成divhide $("#nav div").eq(showindex).removeClass("divshow").addClass("divhide"); //将现在的点的样式修改成div $("#nav div").eq(divindex).removeClass("divhide").addClass("divshow"); //以前图片淡出 $("img").eq(showindex).fadeOut(1000); //新图片淡入 $("img").eq(divindex).fadeIn(1000); showindex=divindex; console.log("修改后"+divindex);//修改后的位置 ); //鼠标在图片范围时停止切换(清除定时器) $("#content").mouseenter(function() window.clearInterval(timer); ); $("#content").mouseleave(function() timer=window.setInterval(timershow,2000); ); ); </script> </body> </html>
以上是关于jquery 广告轮播图的主要内容，如果未能解决你的问题，请参考以下文章