<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> <style> #lunbobox { 500px; height:300px; position:relative; } .lunbo { 500px; height:300px; } .lunbo img { 500px; height:300px; position:absolute; top:0px; left:0px; } #lunbobox ul { 285px; position:absolute; bottom:10px; right:0px; z-index:5; } #lunbobox ul li { cursor:pointer; 10px; height:4px; border:1px solid #cccccc; float:left; list-style:none; background:#cccccc; text-align:center; margin:0px 5px 0px 0px; } #toleft { display:none; 30px; height:100px; font-size:40px; line-height:100px; text-align:center; color:#f4f4f4; /*background:#cccccc; */ /*background:url("../images/toleft.jpg")no-repeat center; */ position:absolute; top:90px; left:12px; cursor:pointer; z-index:99; opacity:0.4; } #toright { display:none; 30px; height:100px; font-size:40px; line-height:100px; text-align:center; color:#f4f4f4; /*background:#cccccc; */ position:absolute; top:90px; right:0px; cursor:pointer; z-index:99; opacity:0.4; }</style> </head> <body> <div class="middle_right"> <div id="lunbobox"> <div id="toleft"> <</div> <div class="lunbo"> <a href="#"><img src="images/bangcheng.png"></a> <a href="#"><img src="images/bangcheng.png"></a> <a href="#"><img src="images/bangcheng.png"></a> </div> <div id="toright">></div> <ul> <li></li> <li></li> <li></li> </ul> <span></span> </div> </div> <script> ///轮播 $(function() { //$("#toright").hide(); //$("#toleft").hide(); $('#toright').hover(function() { $("#toleft").hide() }, function() { $("#toleft").show() }) $('#toleft').hover(function() { $("#toright").hide() }, function() { $("#toright").show() }) }) var t; var index = 0; /////自动播放 t = setInterval(play, 1000) function play() { index++; if (index > 2) { index = 0 } // console.log(index) $("#lunbobox ul li").eq(index).css({ "background": "#999", "border": "1px solid #ffffff" }).siblings().css({ "background": "#cccccc", "border": "" }) $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); }; ///点击鼠标 图片切换 $("#lunbobox ul li").click(function() { //添加 移除样式 //$(this).addClass("lito").siblings().removeClass("lito"); //给当前鼠标移动到的li增加样式 且其余兄弟元素移除样式 可以在样式中 用hover 来对li 实现 $(this).css({ "background": "#999", "border": "1px solid #ffffff" }).siblings().css({ "background": "#cccccc" }) var index = $(this).index(); //获取索引 图片索引与按钮的索引是一一对应的 // console.log(index); $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings 找到 兄弟节点(不包括自己） }); /////////////上一张、下一张切换 $("#toleft").click(function() { index--; if (index <= 0) //判断index<0的情况为：开始点击#toright index=0时 再点击 #toleft 为负数了 会出错 { index = 2 } console.log(index); $("#lunbobox ul li").eq(index).css({ "background": "#999", "border": "1px solid #ffffff" }).siblings().css({ "background": "#cccccc" }) $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings 找到 兄弟节点(不包括自己）必须要写 }); // $("#imgbox a ")获取到的是一个数组集合 。所以可以用index来控制切换 $("#toright").click(function() { index++; if (index > 2) { index = 0 } console.log(index); $(this).css({ "opacity": "0.5" }) $("#lunbobox ul li").eq(index).css({ "background": "#999", "border": "1px solid #ffffff" }).siblings().css({ "background": "#cccccc" }) $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings 找到 兄弟节点(不包括自己） }); $("#toleft,#toright").hover(function() { $(this).css({ "color": "black" }) }, function() { $(this).css({ "opacity": "0.3", "color": "" }) }) /// ///////鼠标移进 移出 $("#lunbobox ul li,.lunbo a img,#toright,#toleft ").hover( ////////鼠标移进 function() { $('#toright,#toleft').show() clearInterval(t); }, ///////鼠标移开 function() { //$('#toright,#toleft').hide() //alert('aaa') t = setInterval(play, 3000) function play() { index++; if (index > 2) { index = 0 } $("#lunbobox ul li").eq(index).css({ "background": "#999", "border": "1px solid #ffffff" }).siblings().css({ "background": "#cccccc" }) $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); } })</script> </body> </html>