jquery轮播图
2015-07-29 17:15
531 查看
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>banner</title>
<!--引入开始-->
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;color:#222;font-family:Verdana, Arial, Helvetica, sans-serif;background:#f0f0f0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}
ul, li{list-style:none;}
img{border:0;}
.wrapper{width:800px;margin:0 auto;padding-bottom:50px;}
/* 核心代码 */
.focus{width:800px;height:280px;overflow:hidden;position:relative;}
.focus ul{height:380px;position:absolute;}
.focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;}
.focus ul li div{position:absolute;overflow:hidden;}
.focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:5px;text-align:center;}
.focus .btn span{display:inline-block;_display:inline;_zoom:1;width:13px;height:13px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;border-radius:50%;}
.focus .btn span.on{background:yellow;}
.focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url("http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/sprite.png") no-repeat 0 0;cursor:pointer;display:none;}
.focus .pre{left:0;}
.focus .next{right:0;background-position:right top;}
</style>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<script>
jQuery.fn.extend({
slideFocus: function(){
var This = $(this);
var sWidth = $(This).width(),
len =$(This).find('ul li').length,
index = 0,
Timer;
// btn event
var btn = "<div class='btn'>";
for(var i=0; i < len; i++) {
btn += "<span></span>";
};
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$(This).append(btn);
$(This).find('.btn span').eq(0).addClass('on');
$(This).find('.btn span').mouseover(function(){
index = $(This).find('.btn span').index(this);
Tony(index);
});
$(This).find('.next').click(function(){
index++;
if(index == len){index = 0;}
Tony(index);
});
$(This).find('.pre').click(function(){
index--;
if(index == -1){index = len - 1;}
Tony(index);
});
// start setInterval
$(This).find('ul').css("width",sWidth * (len));
$(This).hover(function(){
clearInterval(Timer);
show($(This).find('.preNext'));
},function(){
hide($(This).find('.preNext'));
Timer=setInterval(function(){
Tony(index);
index++;
if(len == index){index = 0;}
}, 2000)
}).trigger("mouseleave");
function Tony(index){
var new_width = -index * sWidth;
$(This).find('ul').stop(true,false).animate({'left' : new_width},300);
$(This).find('.btn span').stop(true,false).eq(index).addClass('on').siblings().removeClass('on');
};
// show hide
function show(obj){ $(obj).stop(true,false).fadeIn();}
function hide(obj){ $(obj).stop(true,false).fadeOut();}
}
});
</script>
<div style="width:800px; margin:50px auto;">
<div id="focus" class="focus">
<ul>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
</ul>
</div>
</div>
<div style="width:800px; margin:50px auto;">
<div id="focus2" class="focus">
<ul>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
</ul>
</div>
</div>
<div style="width:800px; margin:50px auto;">
<div id="focus3" class="focus">
<ul>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#focus').slideFocus();
$('#focus2').slideFocus();
$('#focus3').slideFocus();
});
</script>
</body>
</html>
// jQuery.fn.extend({
slideFocus: function(){
var This = $(this);
var sWidth = $(This).width(),
len =$(This).find('ul li').length,
index = 0,
Timer;
// btn event
var btn = "";
for(var i=0; i < len; i++) {
btn += "";
};
btn += "";
$(This).append(btn);
$(This).find('.btn span').eq(0).addClass('on');
$(This).find('.btn span').mouseover(function(){
index = $(This).find('.btn span').index(this);
Tony(index);
});
$(This).find('.next').click(function(){
index++;
if(index == len){index = 0;}
Tony(index);
});
$(This).find('.pre').click(function(){
index--;
if(index == -1){index = len - 1;}
Tony(index);
});
// start setInterval
$(This).find('ul').css("width",sWidth * (len));
$(This).hover(function(){
clearInterval(Timer);
show($(This).find('.preNext'));
},function(){
hide($(This).find('.preNext'));
Timer=setInterval(function(){
Tony(index);
index++;
if(len == index){index = 0;}
}, 2000)
}).trigger("mouseleave");
function Tony(index){
var new_width = -index * sWidth;
$(This).find('ul').stop(true,false).animate({'left' : new_width},300);
$(This).find('.btn span').stop(true,false).eq(index).addClass('on').siblings().removeClass('on');
};
// show hide
function show(obj){ $(obj).stop(true,false).fadeIn();}
function hide(obj){ $(obj).stop(true,false).fadeOut();}
}
});
// ]]>
// $(function() {
$('#focus').slideFocus();
$('#focus2').slideFocus();
$('#focus3').slideFocus();
});
// ]]>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>banner</title>
<!--引入开始-->
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;color:#222;font-family:Verdana, Arial, Helvetica, sans-serif;background:#f0f0f0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}
ul, li{list-style:none;}
img{border:0;}
.wrapper{width:800px;margin:0 auto;padding-bottom:50px;}
/* 核心代码 */
.focus{width:800px;height:280px;overflow:hidden;position:relative;}
.focus ul{height:380px;position:absolute;}
.focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;}
.focus ul li div{position:absolute;overflow:hidden;}
.focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:5px;text-align:center;}
.focus .btn span{display:inline-block;_display:inline;_zoom:1;width:13px;height:13px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;border-radius:50%;}
.focus .btn span.on{background:yellow;}
.focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url("http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/sprite.png") no-repeat 0 0;cursor:pointer;display:none;}
.focus .pre{left:0;}
.focus .next{right:0;background-position:right top;}
</style>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<script>
jQuery.fn.extend({
slideFocus: function(){
var This = $(this);
var sWidth = $(This).width(),
len =$(This).find('ul li').length,
index = 0,
Timer;
// btn event
var btn = "<div class='btn'>";
for(var i=0; i < len; i++) {
btn += "<span></span>";
};
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$(This).append(btn);
$(This).find('.btn span').eq(0).addClass('on');
$(This).find('.btn span').mouseover(function(){
index = $(This).find('.btn span').index(this);
Tony(index);
});
$(This).find('.next').click(function(){
index++;
if(index == len){index = 0;}
Tony(index);
});
$(This).find('.pre').click(function(){
index--;
if(index == -1){index = len - 1;}
Tony(index);
});
// start setInterval
$(This).find('ul').css("width",sWidth * (len));
$(This).hover(function(){
clearInterval(Timer);
show($(This).find('.preNext'));
},function(){
hide($(This).find('.preNext'));
Timer=setInterval(function(){
Tony(index);
index++;
if(len == index){index = 0;}
}, 2000)
}).trigger("mouseleave");
function Tony(index){
var new_width = -index * sWidth;
$(This).find('ul').stop(true,false).animate({'left' : new_width},300);
$(This).find('.btn span').stop(true,false).eq(index).addClass('on').siblings().removeClass('on');
};
// show hide
function show(obj){ $(obj).stop(true,false).fadeIn();}
function hide(obj){ $(obj).stop(true,false).fadeOut();}
}
});
</script>
<div style="width:800px; margin:50px auto;">
<div id="focus" class="focus">
<ul>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
</ul>
</div>
</div>
<div style="width:800px; margin:50px auto;">
<div id="focus2" class="focus">
<ul>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
</ul>
</div>
</div>
<div style="width:800px; margin:50px auto;">
<div id="focus3" class="focus">
<ul>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/201909/20/8ee11872cef990d5d0bc16d6051c7676.jpg"/></a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#focus').slideFocus();
$('#focus2').slideFocus();
$('#focus3').slideFocus();
});
</script>
</body>
</html>
// jQuery.fn.extend({
slideFocus: function(){
var This = $(this);
var sWidth = $(This).width(),
len =$(This).find('ul li').length,
index = 0,
Timer;
// btn event
var btn = "";
for(var i=0; i < len; i++) {
btn += "";
};
btn += "";
$(This).append(btn);
$(This).find('.btn span').eq(0).addClass('on');
$(This).find('.btn span').mouseover(function(){
index = $(This).find('.btn span').index(this);
Tony(index);
});
$(This).find('.next').click(function(){
index++;
if(index == len){index = 0;}
Tony(index);
});
$(This).find('.pre').click(function(){
index--;
if(index == -1){index = len - 1;}
Tony(index);
});
// start setInterval
$(This).find('ul').css("width",sWidth * (len));
$(This).hover(function(){
clearInterval(Timer);
show($(This).find('.preNext'));
},function(){
hide($(This).find('.preNext'));
Timer=setInterval(function(){
Tony(index);
index++;
if(len == index){index = 0;}
}, 2000)
}).trigger("mouseleave");
function Tony(index){
var new_width = -index * sWidth;
$(This).find('ul').stop(true,false).animate({'left' : new_width},300);
$(This).find('.btn span').stop(true,false).eq(index).addClass('on').siblings().removeClass('on');
};
// show hide
function show(obj){ $(obj).stop(true,false).fadeIn();}
function hide(obj){ $(obj).stop(true,false).fadeOut();}
}
});
// ]]>
// $(function() {
$('#focus').slideFocus();
$('#focus2').slideFocus();
$('#focus3').slideFocus();
});
// ]]>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery中attr和prop的区别
- jQuery学习之元素包装集
- 使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息
- 利用jQuery扩展接口为jQuery框架定义了两个自定义函数，然后调用这两个函数
- jquery的$.extend和$.fn.extend作用及区别
- jQuery动画效果(show与hide/toggle/slideUp/slideToggle/fadeIn/fadeTo)
- DOM或Jquery修改HTML标题内容遇到的问题
- jQuery 源码分析 8： 回头看jQuery的构造器（jQuery.fn，jQury.prototype，jQuery.fn.init.prototype的分析）
- jQuery选择器
- jQuery插件-div中滚动图片
- jQuery选择器大全
- JQuery mobile 实例 api
- jQuery插件开发模式
- js/jquery操作div显示或隐藏
- ASP.NET MVC 4 (十一) Bundles和显示模式--asp.net mvc中 @Scripts.Render("~/bundles/jquery")是什么意思? 在布局文件中使用Scripts.Render()输出脚本包，Styles.Render()输出风格包：
- 基于jquery的静态页面翻页
- jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作
- jquery的DOM元素操作
- Struct2前台后台数据交互jquery+ajax
- jquery学习教程视频 链接