html 轮播图从左到右,摩天轮图片轮播特效 图片从左到右循环轮播的Jquery JS特效...

MJBlog(mj.588cy.com)

* {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;}

$(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)

}

});

MJBlog

登录 注册

• 1
• 2
• 3
• 4