<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>途牛旅游网首页</title> <meta name="keywords" content="jQuery途牛幻灯片切换,jQuery焦点图轮播" /> <meta name="description" content="途牛旅游网首页jquery幻灯片轮播js特效。" /> <style type="text/css"> body{background:url("images/bg.webp");} *{margin:0px;padding:0px;} #box{ width:735px;height:350px; margin:50px auto;position:relative; background:#fff; } .con{ width:735px;height:350px;overflow:hidden; } .con ul li{list-style-type:none;} .prev{ width:45px;height:100px; position:absolute;left:0px;top:50%;margin-top:-50px; background:url("images/button.webp");cursor:pointer; display:none;opacity:0.5; } .next{ width:45px;height:100px; position:absolute;right:0px;top:50%;margin-top:-50px; background:url("images/button.webp"); background-position:-55px 0px;cursor:pointer; display:none;opacity:0.5; } .nav{ width:720px;height:30px; position:absolute;left:50%;margin-left:-360px; bottom:10px; } .nav ul li{ width:119px;height:30px;background:rgba(255,255,255,0.6); list-style-type:none;float:left; margin-right:1px;text-align:center; line-height:30px;font-size:12px;color:#333;cursor:pointer; } .nav ul .bg{background:rgba(0,0,0,0.6);color:#fff;} .nav ul .bg a{color:#fff;} a{text-decoration: none;color:#333} </style> </head> <body> <div id="box"> <div class="con"> <ul> <li><a href='/d/jc/20230411/jforjzaymj242.webp' alt='elastiStack拖拽堆叠在一起的图片' /> </a></li> <li><a href='/d/jc/20230411/gu00c1f4e5m43.webp' alt='jQuery以波浪形式展现图片' /> </a></li> <li><a href='/d/jc/20230411/0edup5x4ofa43.webp' alt='simpleBtChecks美化复选框checkbox' /> </a></li> <li><a href='/d/jc/20230411/bk0qfrgzsz243.webp' alt='css3演示4种不同的全屏幻灯片滑动效果' /> </a></li> <li><a href='/d/jc/20230411/xnlv1cbm40z43.webp' alt='lightbox制作个性化弹出层' /> </a></li> <li><a href='/d/jc/20230411/dymtocfps2m43.webp' alt='classicAccordion演示三种经典的手风琴效果' /> </a></li> </ul> </div> <div class="prev"></div> <div class="next"></div> <div class="nav"> <ul> <li class="bg"><a href='http://www.jsdaima.com/p-373.html' target='_blank'>位置插件 </a></li> <li><a href='http://www.jsdaima.com/p-372.html' target='_blank'>瀑布流</a></li> <li><a href='http://www.jsdaima.com/p-371.html' target='_blank'>幻灯片</a></li> <li><a href='http://www.jsdaima.com/p-370.html' target='_blank'>日期时分秒</a></li> <li><a href='http://www.jsdaima.com/p-369.html' target='_blank'>裁剪图片</a></li> <li><a href='http://www.jsdaima.com/p-368.html' target='_blank'>星级插件 </a></li> </ul> </div> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var i = 0; var time = 0; $("#box").hover(function() { $(".prev").fadeIn(300); }, function() { $(".prev").fadeOut(300); }) $("#box").hover(function() { $(".next").fadeIn(300); }, function() { $(".next").fadeOut(300); }) $(".nav ul li").hover(function() { i = $(this).index(); $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100); $(this).addClass("bg").siblings().removeClass("bg"); clearInterval(time); }, function() { time = setInterval("junmper()", 3000); }) $(".prev").click(function() { i--; if (i < 0) i = 5; $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100); $(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg"); }) $(".next").click(function() { i++; if (i > 5) i = 0; $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100); $(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg"); }) $(".prev").hover(function() { clearInterval(time); }, function() { time = setInterval("junmper()", 3000); }) $(".next").hover(function() { clearInterval(time); }, function() { time = setInterval("junmper()", 3000); }) function junmper() { i++; if (i > 5) i = 0; $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100); $(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg"); } time = setInterval("junmper()", 3000); </script> </body> </html> |
