求jquery图片滚动的效果代码
就是在一个据矩形的div里面，比方说或800px×80px的div，里面的图片水平滚动，鼠标放上去最好能停下，另外最好能在图片下面加几个字的代码，要jquery版本的，有...
就是在一个据矩形的div里面，比方说或800px × 80px 的div，里面的图片水平滚动，鼠标放上去最好能停下，另外最好能在图片下面加几个字的代码，
要jquery版本的，有个MSClass里面的滚动效果不错，但是和jquery效果有冲突， 展开
要jquery版本的，有个MSClass里面的滚动效果不错，但是和jquery效果有冲突， 展开
3个回答
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播例子</title>
<style>
body,ul,li,h2{ list-style-type: none; padding: 0; margin: 0;}
.wrap{ width: 700px; margin: 0 auto;}
.wrap .img_banner {position:relative; width:698px; height:258px; border:1px solid #5576af;overflow:hidden; float: left;}
.wrap .img_banner ul {position:absolute; z-index:1002;bottom:15px; right:10px;}
.wrap .img_banner ul li { float:left; background:#fff; cursor:pointer; width:14px;height: 14px;line-height: 14px;margin-right: 15px; font-size: 12px; text-align: center;text-indent: -10000px;}
.wrap .img_banner ul li.on { background:#ffb80e}
.wrap .img_banner .img_list a{position:absolute;} /* 让四张图片都可以重叠在一起 */
.wrap .img_banner .img_list img {border:0px; width: 698px; height: 258px;}
</style>
</head>
<body>
<div class="wrap">
<div class="img_banner">
<div class="img_list">
<a href="#" target="_blank"><img src="/6rooms/html/img/gsh/gsh_banner1.jpg"></a>
<a href="#" target="_blank"><img src="/6rooms/html/img/gsh/gsh_banner2.jpg"></a>
<a href="#" target="_blank"><img src="/6rooms/html/img/gsh/gsh_banner3.jpg"></a>
</div>
</div>
</div>
</body>
<script src="/6rooms/html/js/jquery.js"></script>
<script>
$(function(){
function imgBannerChange(oImgBanner){
var Timer = AutoNum =0;
oImgBanner.append("<ul class='img_btn'></ul>");//生成按钮列表
var oImgUl = oImgBanner.children('ul');//ul列表
var oImg = oImgBanner.find('.img_list a');//找出图片
var oImgNum = oImg.length;//找出图片张数
//根据图片张数，生成按钮
for (var oli = 0; oli < oImgNum; oli++) {
var liHtml = "<li>"+oli+"</li>"
oImgUl.append(liHtml);
};
var oImgList = oImgUl.children('li');//ul列表
oImgList.first().addClass('on');//第一个按钮加on
if (oImgNum <=1) {oImgList.css('display', 'none'); return;};
//$(".img_list a:not(:first-child)").hide();
oImg.not(oImg.first()).hide();
oImgList.click(function(){
$(this).addClass("on").siblings().removeClass("on");
var i = $(this).text();//获取Li元素内的值，即1，2，3，4
AutoNum = i;
if (i >= oImgNum) return;
oImg.filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
});
//定时器
Timer = setInterval(showAuto, 4000);
oImgBanner.hover(function(){clearInterval(t)}, function(){t = setInterval(showAuto, 4000);});
//自动轮播
function showAuto(){
AutoNum = AutoNum >=(oImgNum -1) ?0 : ++AutoNum;
$(".img_banner li").eq(AutoNum).trigger('click');
};
}
imgBannerChange($(".img_banner"));
})
</script>
</html>
你看一下这个怎么样，把里面的jquery文件地址和图片地址换一下就好了。
追问
哥们可能我没说清楚，你理解错了，我要的不是轮播器，是滚动效果，水平滚动，像火车那样...
追答
好，我再看一下！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把你邮箱告诉我，我给你发过去，如果收到了，有用的话，请采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
