摩天轮图片轮播奇效 图片从左到右循环轮播的Jquery JS特效
日期：2014-05-16 浏览次数：20488 次
摩天轮图片轮播特效 图片从左到右循环轮播的Jquery JS特效
这个摩天轮图片轮播特效是图片从左到右不断循环轮播展示，轮播的时候图片会产生从右向左滑过的效果，请看下面具体演示效果。在线演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MJBlog(mj.588cy.com)</title>
<style type="text/css">
* {margin:0;padding:0;font-size:12px;list-style:none;border:0;}
body{ margin:0px; padding:0px; background-color:#f0f0f0; font-family:Arial, Helvetica, sans-serif;}
a{ text-decoration:none;}
.top{ width:800px; height:30px; border-bottom:1px solid #dbdbdb; margin:0px auto;}
.logo{ width:300px; height:30px; line-height:30px; float:left; font-size:14px; margin:0px 5px;}
.logo a{ color:#666666;}
.denglu{ height:30px; line-height:30px; float:right; font-size:14px;}
.denglu a{ color:#666666; margin:0px 10px;}
.clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;}
.box{ width:780px; height:auto; margin:0px auto; border-top:1px solid #f9f9f9; padding:30px 10px;}
.topp{ margin:100px auto; background-color: #009933; width:275px; height:275px; overflow:hidden; position:relative;}
.topp ul{ position:absolute; width:1100px;}
.topp li{ width:275px; height:275px; float:left; color:#FFFFFF;}
.topp li img{ width:275px; height:275px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var in_out_time = 800 //渐显时间
var scroll_Interval_time = 1100 //滚动间隔时间
var scroll_time = 1000 //滚动动画时间
addli()
function addli(){
$("#lunbo li:first").clone().appendTo("#lunbo");
$("#lunbo").animate({left:-275},scroll_time);
setTimeout(delLi_last,scroll_Interval_time)
}
function delLi_last(){
$("#lunbo li:first").detach();
$("#lunbo").css("left",0);
setTimeout(addli,scroll_Interval_time)
}
});
</script>
</head>
<body>
<div class="top">
<div class="logo"><a href="http://mj.588cy.com">MJBlog</a></div>
<div class="denglu"><a href="#">登录</a><a href="#">注册</a></div>
<div class="clear"></div>
</div>
<div class="box">
<div class="topp">
<ul id="lunbo">
<li>1<a href="http://item.taobao.com/item.htm?id=16115598935" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/002/55/889dc557fc68e818186deea1bd46820b9X980w_468x468.jpg" /></a></li>
<li>2<a href="http://item.taobao.com/item.htm?id=20283876790" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/002/53/0d3035d9244d85f281418ab545bf56ff8llG50_468x468.jpg" /></a></li>
<li>3<a href="http://item.taobao.com/item.htm?id=20282400638" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/002/52/83a008b4bd0a21aa99f4f66adb85f373iK0Ce0_468x468.jpg" /></a></li>
<li>4<a href="http://item.taobao.com/item.htm?id=16118254010" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/002/56/f1b090a7f8cb9197e3c5b7c686a37972jJxJ4X_468x468.jpg" /></a></li>
</ul>
</div>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
