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

发布时间：2020-09-22 08:23:32 作者：带阿狸去旅行
来源：脚本之家阅读：144

话不多说，请看具体示例代码：

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

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

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

相关阅读