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

仿天猫无缝滚动广告效果

最新推荐文章于 2020-03-11 21:06:53 发布

最新推荐文章于 2020-03-11 21:06:53 发布 · 176 阅读

文章标签：

#jquery #ViewUI

jquery 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种仿天猫品牌街的无缝滚动广告效果实现方案，利用jQuery进行自动化左右滚动，支持鼠标悬停暂停及手动控制方向切换。

<!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>