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


Posted in Javascript onJanuary 13, 2017

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

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

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

Javascript 相关文章推荐
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
JavaScript利用闭包实现模块化
Jan 13 #Javascript
Vue.js基础知识小结
Jan 13 #Javascript
canvas实现流星雨的背景效果
Jan 13 #Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 #Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 #Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 #Javascript
bootstrap网格系统使用方法解析
Jan 13 #Javascript
You might like
深入理解PHP类的自动载入机制
2016/09/16 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
jQuery操作动画完整实例分析
2020/01/10 jQuery
python3+PyQt5使用数据库表视图
2018/04/24 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
会计专业自荐信范文
2013/12/02 职场文书
七年级数学教学反思
2014/01/22 职场文书
精彩的英文自荐信
2014/01/30 职场文书
大学生创业策划书
2014/02/02 职场文书
学校安全责任书
2014/04/14 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
首席执行官观后感
2015/06/03 职场文书
班委竞选稿范文
2015/11/21 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
JavaScript设计模式之原型模式详情
2022/06/21 Javascript