求一段网页代码~图片跑马灯效果
一组图片，自右向左滚动展示；鼠标悬停，停止滚动；鼠标单击弹出浮层查看大图，并停止滚动；单击浮层，可将浮层关闭，继续滚动；按住鼠标左右拖动，可以使图片根据鼠标移动速度左右滚...
一组图片，自右向左滚动展示；
鼠标悬停，停止滚动；
鼠标单击弹出浮层查看大图，并停止滚动；
单击浮层，可将浮层关闭，继续滚动；
按住鼠标左右拖动，可以使图片根据鼠标移动速度左右滚动。 展开
鼠标悬停，停止滚动；
鼠标单击弹出浮层查看大图，并停止滚动；
单击浮层，可将浮层关闭，继续滚动；
按住鼠标左右拖动，可以使图片根据鼠标移动速度左右滚动。 展开
1个回答
展开全部
使用两个jQuery插件可以满足你的要求。第一个，跑马灯插件jquery.liMarquee，第二个看图浮层的插件pirobox。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery跑马灯插件</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/liMarquee.css">
<style type="text/css">
.str_wrap{
padding-left: 3em;
padding-right: 3em;
background: #fefefe;
height: 10em;
line-height: 2em;
font-size: 1.2em;
}
.str4 .str_item {
font-size:0;
line-height:0
}
.str4 img { opacity:0.8;width:640px;height:450px;border:0;}
.str4 img:hover { opacity:1}
.str4.str_wrap.str_active {
background:#fff;
}
.str2 img { opacity:0.8;width:640px;height:450px;border:0;}
</style>
<script src="js/jquery1.8.3.min.js" type="text/javascript"></script>
<link href="css/style.css" class="piro_style" media="screen" title="white" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().piroBox({
my_speed: 400,
bg_alpha: 0.1,
slideShow : true,
slideSpeed : 4,
close_all : '.piro_close,.piro_overlay'
});
});
</script>
<style type="text/css">
body{margin:0 0;}
div{float:left;}
#maindiv{width:1920px;height:1080px;background-color:#ccc;}
a{text-decoration:none;}
img{border:0;}
#zhudiv{width:1920px;height:900px;background-color:#002fa7;}
</style>
</head>
<body>
<div id="maindiv">
<div id="zhudiv">
<div class="str4 str_wrap">
<a class="pirobox_gall" href="img/1.jpg"><img src="img/1.jpg"></a>
<a class="pirobox_gall" href="img/2.jpg"><img src="img/2.jpg"></a>
<a class="pirobox_gall" href="img/3.jpg"><img src="img/3.jpg"></a>
<a class="pirobox_gall" href="img/4.jpg"><img src="img/4.jpg"></a>
<a class="pirobox_gall" href="img/5.jpg"><img src="img/5.jpg"></a>
<a class="pirobox_gall" href="img/6.jpg"><img src="img/6.jpg"></a>
<a class="pirobox_gall" href="img/7.jpg"><img src="img/7.jpg"></a>
</div>
<div class="str2 str_wrap">
<a class="pirobox_gall" href="img/11.jpg"><img src="img/11.jpg"></a>
<a class="pirobox_gall" href="img/22.jpg"><img src="img/22.jpg"></a>
<a class="pirobox_gall" href="img/33.jpg"><img src="img/33.jpg"></a>
<a class="pirobox_gall" href="img/44.jpg"><img src="img/44.jpg"></a>
<a class="pirobox_gall" href="img/55.jpg"><img src="img/55.jpg"></a>
<a class="pirobox_gall" href="img/66.jpg"><img src="img/66.jpg"></a>
<a class="pirobox_gall" href="img/77.jpg"><img src="img/77.jpg"></a>
</div>
</div>
</div>
<script src="js/jquery.liMarquee.js"></script>
<script>
$(window).load(function(){
var stringEl = $('.str4').liMarquee();
stringEl.trigger('mouseenter');
stringEl.data({scrollamount:150});
stringEl.trigger('mouseleave');
});
$('.str2').liMarquee({
direction: 'right'
});
</script>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
