欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js实现固定宽高滑动轮播图效果

程序员文章站 2022-06-01 19:11:22
话不多说,请看具体示例代码: <...

话不多说,请看具体示例代码:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>document</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
 <style>
 *{
 margin:0;
 padding:0;
 }
 html, body {
  position: relative;
  height: 100%;
  }
  body {
   background: #eee;
   font-size: 14px;
   color:#000;
   margin: 0;
   padding: 0;
  }
 li{
 list-style: none;
 }
 a{
 text-decoration: none;
 }
 #banner1{
 width:500px;
 }
 .banner{
 width: 500px;
 height:100px;
 border:1px solid red; 
 position: relative;
 margin:40px auto 0;
 overflow: hidden;
 }
 .banner ul{
 width:9999px;
 position: absolute;
 top:0;
 left: 0;
 height: 100%;
 }
 .banner li{
 width:500px;
 float: left;
 height: 100%;
 line-height: 100px;
 }
 .banner li a{
 display: block;
 background:green;
 font-size:30px;
 text-align: center;
 }
 .cur{
 height: 20px;
 position: absolute;
 right: 0;
 bottom:10px;
 text-align: center;
 }
 .cur a{
 display: inline-block;
 width: 20px;
 height: 20px;
 background:yellow;
 margin-left:2px;
 }
 .cur a.active{
 background:red;
 }
 .prve{
 position: absolute;
 top:50%;
 left: 0;
 width:30px;
 height: 30px;
 background: red;
 line-height: 30px;
 text-align:center;
 color:#fff;
 margin-top:-15px;
 }
 .next{
 position: absolute;
 top:50%;
 right: 0;
 width:30px;
 height: 30px;
 background: red;
 line-height: 30px;
 text-align:center;
 color:#fff;
 margin-top:-15px;
 }
 </style>
</head>
<body>
 <div class="banner" id="banner1">
 <ul class="tab">
 <li><a href="###">1</a></li>
 <li><a href="###">2</a></li>
 <li><a href="###">3</a></li>
 </ul>
 <div class="cur"></div>
 <div class="prve"><</div>
 <div class="next">></div>
 </div>
<script>
$(function(){
 cc("banner1",500); 
});
function cc(id,w){
 var i=0;
 var id=$("#"+id);
 var tab=id.children(".tab");
 var tabli=tab.find("li");
 var clone=tabli.first().clone();
 tab.append(clone);
 var size=tab.find("li").size(); 
 var cur=id.children(".cur");
 var cura=cur.children("a");
 var prve=id.children(".prve");
 var next=id.children(".next");
 for(var j=0;j<size-1;j++){
 cur.append("<a href='###'></a>");
 }
 cur.find("a").first().addclass("active");
 /*鼠标划入圆点*/
 cur.find("a").hover(function(){
 var index=$(this).index();
 i=index;
 tab.stop().animate({left:-index*w},500) 
 $(this).addclass("active").siblings().removeclass("active") 
 }); 
 /*自动轮播*/
 var t=setinterval(function(){
 i++;
 move()
 },2000)
 /*对banner定时器的操作*/
 id.hover(function(){
 clearinterval(t);
 },function(){
 t=setinterval(function(){
 i++;
 move();
 },2000)
 });
 /*向左的按钮*/
 prve.click(function(){
 i--;
 move(); 
 });
 /*向右的按钮*/
 next.click(function(){
 i++;
 move(); 
 });
 function move(){ 
 if(i==size){
 tab.css({left:0}); 
 i=1;
 };
 if(i==-1){
 tab.css({left:-(size-1)*w});
 i=size-2;
 };
 tab.stop().animate({left:-i*w},500);
 if(i==size-1){
 cur.children("a").eq(0).addclass("active").siblings().removeclass("active") 
 }else{ 
 cur.children("a").eq(i).addclass("active").siblings().removeclass("active") 
 }; 
 };
}
</script> 
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!