标签：容器 log idt this 广告轮播 ack add img seo
轮播图
/*轮播图基本功能：
* 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>
标签：容器 log idt this 广告轮播 ack add img seo
原文地址：https://www.cnblogs.com/dyd520/p/11348043.html
