先看幻灯片效果图片
代码如下
| 代码如下 | 复制代码 |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单实用的图片左右滚动效果</title> <script src="jquery-1.6.4.min.js" type="text/javascript"></script> <script> function lxfScroll(main,titleli,alt,speed){ var lxfscroll = $(main); var ul = lxfscroll.find("ul"); var li = lxfscroll.find("li"); var tli = $(titleli); var alt = $(alt); var cutspeed = 350;//切换的速度 var autospeed = speed;//自动播放的速度 var n = 0; var imgwidth = li.find("img").attr("width");//获取图片高度 var lilength = li.length;//获取图片数量 var timer; li.eq(0).clone().appendTo(ul); /* 标题按钮事件 */ function hoverscroll() { tli.mouseenter(function(){ var index = tli.index($(this)); var lipoint = index*imgwidth; var imgTitle = li.find("img").eq(index).attr("alt"); alt.text(imgTitle); tli.removeClass("cur"); $(this).addClass("cur"); ul.stop(true,false).animate({"left":-lipoint+"px"},cutspeed); }); }; /* 自动轮换 */ function autoroll() { /*最后一个回到第一个的时候*/ if(n >= lilength+1) {tli.removeClass("cur").eq(0).addClass("cur"); ul.stop(true,false).css({left:"0px"});n = 1;}; var lipoint = n*imgwidth; var imgTitle = li.find("img").eq(n).attr("alt"); ul.stop(true,false).animate({"left":-lipoint+"px"},cutspeed); tli.removeClass("cur").eq(n).addClass("cur"); if(n >= lilength){tli.removeClass("cur").eq(0).addClass("cur"); }; alt.text(imgTitle); n++; timer = setTimeout(autoroll, autospeed); if(n >= lilength+1) {alt.text(li.find("img").eq(0).attr("alt"));}; }; /* 鼠标悬停即停止自动轮换 */ function stoproll() { li.hover(function() { clearTimeout(timer); n = $(this).prevAll().length+1; } , function() { timer = setTimeout(autoroll, autospeed); }); tli.hover(function() { clearTimeout(timer); n = $(this).prevAll().length+1; } , function() { timer = setTimeout(autoroll, autospeed); }); }; hoverscroll(); autoroll();//启动自动播放功能 stoproll();//启动鼠标悬停功能 }; $(function(){ lxfScroll(".lxfscroll",".lxfscroll-title li",".lxfscroll-alt",2000); }); </script> <style type="text/css">* {font-size:12px;color:#333;text-decoration:none;padding:0;margin:0;list-style:none;font-style: normal;font-family: Arial, Helvetica, sans-serif;}.lxfscroll { width:400px; margin-left:auto; margin-right:auto; margin-top: 20px; position: relative; height: 300px; border: 4px solid #EFEFEF; overflow: hidden; }.lxfscroll ul li {height: 300px;width: 400px;text-align: center;line-height: 300px;font-size: 40px;font-weight: bold;background-color: #CCC;float: left;}.lxfscroll-title {width: 400px;margin-left: auto;margin-right: auto;}.lxfscroll-title li { float: left; text-align: center; border: 1px solid #CCC; margin-top: 4px; cursor: pointer; height: 20px; width: 20px; line-height: 20px; margin-right: 4px; border-radius:10px; }.cur { color: #FFF; font-weight: bold; background:#666; }.lxfscroll ul { position: absolute; width: 3000px; }.lxfscroll-alt { position: absolute; bottom: 0px; z-index: 5; background-color: #666; color: #FFF; padding: 8px; Opacity=80);-moz-opacity:0.5; opacity: 0.5; width: 400px; overflow: hidden; }.info { text-align: center; color: #666; }.info a { color:#0000FF; }</style> </head> <body> <div class="lxfscroll"> <div class="lxfscroll-alt">图标文字标题</div> <ul><li><img src="http://liuxiaofan.com/demo/images/Koala.jpg" width="400" height="300" alt="考拉"/></li><li><img src="http://liuxiaofan.com/demo/images/Lighthouse.jpg" width="400" height="300" alt="房子"/></li><li><img src="http://liuxiaofan.com/demo/images/Penguins.jpg" width="400" height="300" alt="企鹅"/></li><li><img src="http://liuxiaofan.com/demo/images/Tulips.jpg" width="400" height="300" alt="鲜花"/></li></ul> </div> <div class="lxfscroll-title"> <ul> <li class="cur">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> |
|
很简单的这里jquery文件我们没提供大家可以自行baidu找一个喽。
时间： 2024-10-26 15:06:27