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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
Vue-component全局注册实例
Sep 06 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 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的图形函数中显示汉字
2006/10/09 PHP
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
PHP 读取文件的正确方法
2009/04/29 PHP
php HandlerSocket的使用
2011/05/02 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
JS二分查找算法详解
2017/11/01 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
最新的互联网创业计划书
2014/01/10 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
防灾减灾活动总结
2014/08/30 职场文书
求职自我评价怎么写
2015/03/09 职场文书
2016教师国培研修感言
2015/12/08 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
Python如何使用循环结构和分支结构
2022/04/13 Python
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS