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

网络编程 2021-07-04 19:20www.168986.cn编程入门

本文主要分享了js实现PC固定宽高滑动轮播图效果的示例代码。具有一定的参考价值，狼蚁网站SEO优化跟着长沙网络推广一起来看下吧

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
<script src="http://libs.baidu./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;
 :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;
 :50%;
 left: 0;
 width:30px;
 height: 30px;
 background: red;
 line-height: 30px;
 text-align:center;
 color:#fff;
 margin-:-15px;
 }
 .next{
 position: absolute;
 :50%;
 right: 0;
 width:30px;
 height: 30px;
 background: red;
 line-height: 30px;
 text-align:center;
 color:#fff;
 margin-:-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(){
 ("banner1",500); 
});
function (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.s().animate({left:-indexw},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.s().animate({left:-iw},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>

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

上一篇：详解jQuery事件下一篇：JavaScript利用闭包实现模块化

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设