jquery轮播图

最新推荐文章于 2024-04-24 09:22:16 发布

aili1947

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量69

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wzzl/p/4686507.html

版权

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

</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="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
<li><a href="JavaScript:;"><img src="http://www.17sucai.com/preview/215570/2015-07-28/%E7%84%A6%E7%82%B9%E5%9B%BE/img/01.jpg"/></a></li>
</ul>
</div>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/wzzl/p/4686507.html

aili1947

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery轮播图

<!DOCTYPE html ><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>banner</title>  <styl...
复制链接

扫一扫