写的不是很完善只实现了效果 先码上 我会慢慢整合改进
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>图片的轮播效果 需要改进</title>
<style>
body,ul,ol{margin:0;padding:0;}
li{ list-style:none;}
img{ border:none; vertical-align:top; }
#box{width:470px;height:150px; position:relative; margin:30px auto; overflow:hidden;}
ul{ width:470px; position:absolute;left:0; top:0; z-index:1;}
ul li{width:470px;}
ol{z-index:2; width:120px; position:absolute;right:10px; bottom:10px;}
ol li{ width:20px;height:20px; float:left;margin:0 2px; display:inline; background:#fff; color:#f60; line-height:20px; text-align:center;}
ol .active{ background:#f60; color:#fff;}
body{ width: 100%; height: auto; overflow: hidden;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
;(function($,window,document,undefined){
/**
* tab选项卡的切换效果
* @param ele
* @param opt
* @constructor
*/
function Slider(ele,opt){
this.wrapContent =ele;//父级容器
this.iconTag = this.wrapContent.find(‘ol‘).find(‘li‘);
this.picShow = this.wrapContent.find(‘ul‘).find(‘li‘);
this.now = 0;//图片的起点数
this.now2 = 0;//按钮的起点数
this.timer = null;
this.oneHeight = this.picShow.height();//获取一个图片的高度
}
Slider.prototype = {
‘init‘:function(){
var _this = this;
this.iconTag.on(‘mouseover‘,function(){//li 添加mouseover的事件
var index = $(this).index();
_this.now = index ;
_this.now2 = index;
_this.change();
});
this.autoPlay();
this.stop();
},
‘autoPlay‘:function(){
var _this = this;
this.timer = setInterval(function(){
_this.play();
},2000);
},
‘play‘:function(){
if(this.now==(this.iconTag.size()-1)){
this.now = 0;
this.picShow.eq(0).css({‘top‘:this.iconTag.size()*this.oneHeight,‘position‘:‘relative‘});
}else{
this.now++;
}
this.now2++;
this.change();
},
‘change‘:function(){
var _this = this;
this.iconTag.eq(this.now).addClass(‘active‘).siblings().removeClass(‘active‘);
this.picShow.parent().stop().animate({‘top‘:-this.now2*this.oneHeight},300,function(){
if(_this.now2==_this.iconTag.size()){
_this.picShow.eq(0).css({‘position‘:‘static‘});
_this.picShow.parent().css({‘top‘:0});
_this.now2 = 0;
}
});
},
‘stop‘:function(){
var _this = this;
this.wrapContent.hover(function(){
clearInterval(_this.timer);
},function(){
_this.autoPlay();
});
}
}
$.fn.slider = function(options){
var oSlider = new Slider(this,options);
return oSlider.init();
}
})(jQuery,window,document);
$(function(){
$(‘#box‘).slider();
});
</script>
</head>
<body>
<div id="box">
<ul>
<li><img src="images/1.jpg" alt=""/></li>
<li><img src="images/2.jpg" alt=""/></li>
<li><img src="images/3.jpg" alt=""/></li>
<li><img src="images/4.jpg" alt=""/></li>
<li><img src="images/5.jpg" alt=""/></li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
新手写的 希望大神指教下
时间： 2024-10-27 09:35:02