js实现固定宽高滑动轮播图效果_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-10 22:31:26 点击率：次

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

<!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滑动轮播 # js左右滑动图片轮播 # js实现滑动轮播效果 # 原生JS无缝滑动轮播图 # js原生实现移动端手指滑动轮播图效果的示例 # js实现从左向右滑动式轮播图效果 # JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动) # JS实现touch 点击滑动轮播实例代码 # javascript经典特效分享手风琴、轮播图、图片滑动 # js实现支持手机滑动切换的轮播图片效果实例 # 原生js实现移动开发轮播图、相册滑动特效 # js实现上下滑动轮播 # 鼠标 # 多说 # 圆点 # size # eee # font # color # px # position # body # padding # relative # background # height # banner # width # red # solid # border # li

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：制作网页文件中图片,word文档怎么插入图片白页？

下一篇：使用强密码策略能为网站服务器带来怎样的安全提升？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：制作网页文件中图片,word文档怎么插入图片白页？

下一篇：使用强密码策略能为网站服务器带来怎样的安全提升？