仿天猫品牌街，无缝滚动广告

最新推荐文章于 2024-08-18 10:19:07 发布

iteye_6992

最新推荐文章于 2024-08-18 10:19:07 发布

阅读量135

点赞数

分类专栏： jquery 文章标签： jquery ViewUI

jquery 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
#outDiv{
width:590px;
height:460px;
border:1px solid #000;
position:relative;
margin-left:20px;
margin-top:20px;
overflow:hidden;
}
#outDiv ul{
width:9999px;
height:460px;
position:absolute;
}
#outDiv ul li{
float:left;
}
#leftBtn, #rightBtn{
position:absolute;
width:60px;
height:60px;
display:block;
background-color:#333;
top:200px;
opacity:0.6;
filter:alpha(opacity=60);
-moz-border-radius: 60px; /* Gecko browsers */
-webkit-border-radius: 60px; /* Webkit browsers */
border-radius:60px; /* W3C syntax - likely to be standard so use for future proofing */
/* http://fetchak.com/ie-css3/ ,用于兼容IE的css3属性，可以试试*/
}
#leftBtn{
left:-60px; /*30px*/
}
#rightBtn{
right:-60px; /*30px*/
}
#leftBtn b, #rightBtn b{
color:#fff;
position:absolute;
left:24px;
top:20px;
font-size:24px;
font-weight:bold;
}
</style>
</head>

<body>
<div id="outDiv">
     <ul>
     <li><a><img src="img1.jpg" /></a></li>
  <li><a><img src="img2.jpg" /></a></li>
</ul>
<div id="leftBtn">
     <b><</b>
</div>
<div id="rightBtn">
     <b>></b>
</div>
</div>
<div id="test"></div>
<div id="a"></div>
<script>
/*
* 仿天猫品牌街，无缝滚动广告；
* ie8， ff， opera 中测试通过，其余浏览器未测
* *****made by keimon*******
* *******2013-01-10********
*/
$(function(){
   var timer;
   var outWidth = $('#outDiv').width(); //外部div的宽度
   $('ul').html($('ul').html()+$('ul').html()); //ul中的li翻倍；
   function roll(){
      if(parseInt($('ul').css('left'))==-(outWidth*2)){
       $('ul').css('left',0)
   }
      $('ul').animate({left: '-=' + outWidth+'px'},'slow');
   timer = setTimeout(function(){
      roll();
   },3000)
   }
   roll();
   //点击左边按钮
   $('#leftBtn').click(function(){
      clearTimeout(timer);
   if(parseInt($('ul').css('left'))==-(outWidth*2)){
       $('ul').css('left',0)
   }
   $('ul').stop(false,true).animate({left:'-=' + outWidth+'px'},'fast')
   })
   //点击右边按钮
   $('#rightBtn').click(function(){
      clearTimeout(timer);
   if(parseInt($('ul').css('left'))==0){
       $('ul').css('left',-(4*outWidth))
   }
   $('ul').animate({left:'+=' + outWidth+'px'},'fast')
   })
   //当鼠标移入外部div框时，按钮移入
   $('#outDiv').hover(function(){
       clearTimeout(timer);
       $('#leftBtn').animate({left:'30px'},'slow');
    $('#rightBtn').animate({right:'30px'},'slow');
   },function(){
       $('#leftBtn').animate({left:'-60px'},'slow');
    $('#rightBtn').animate({right:'-60px'},'slow');
    timer = setTimeout(function(){
      roll();
   },3000)
   })
   //当鼠标移入按钮时，按钮颜色发生变化；
   $('#leftBtn').add($('#rightBtn')).hover(function(){
       $('#leftBtn').add($('#rightBtn')).css('backgroundColor','#900');
   },function(){
       $('#leftBtn').add($('#rightBtn')).css('backgroundColor','#333');
   })
})
</script>
</body>
</html>

iteye_6992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿天猫品牌街，无缝滚动广告

&lt;!DOCTYPE&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;&lt;title&gt;无标题文档&lt;/ti
复制链接

扫一扫

专栏目录