其实写轮播的插件很多 ，但是终归不是自己写的 ，改起来还是很麻烦的 ，看过各种各样的轮播插件之后 ，自己写了这个 ，可能不完美 ，但是可复用，还算简洁，带有自动轮播以及按钮点击，前后滑动效果，基本的轮播已经够用了倒是。
HTML部分代码-直接引用类传入参数即可
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/css.css"/>
<script src="js/jquery.js"></script>
</head>
<body>
<div class="main">
<div class="container">
<ul class="list">
<li>
<img src="images/a1.jpg" alt=""/>
</li>
<li>
<img src="images/a2.jpg" alt=""/>
</li>
<li>
<img src="images/a3.jpg" alt=""/>
</li>
<li>
<img src="images/a2.jpg" alt=""/>
</li>
</ul>
<ol class="iconList">
</ol>
<a class="leftBtn"></a>
<a class="rightBtn"></a>
</div>
</div>
<script>
$(function(){
var arg=new Slider({
mainBox:‘.main‘,
conBox:‘.container‘,
listBox:‘.list‘,
listItem:‘.list li‘,
iconList:‘.iconList‘,
iconItem:‘.iconList li‘,
imgSpeed:‘1000‘,
boxNum:‘1‘,
sliderSpeed:‘3000‘,
autoplay:true,
leftBtn:‘.leftBtn‘,
rightBtn:‘.rightBtn‘
})
});
</script>
</body>
</html>
js代码部分
function Slider(a){
this.mainBox= a.mainBox;
this.conBox= a.conBox;
this.listBox= a.listBox;
this.listItem= a.listItem;
this.iconList= a.iconList;
this.iconItem= a.iconItem;
this.leftBtn= a.leftBtn;
this.rightBtn= a.rightBtn;
this.autoplay= a.autoplay;
this.sliderSpeed= a.sliderSpeed;
this.imgSpeed= a.imgSpeed;
this.boxNum= a.boxNum;
this.init();
}
Slider.prototype.init=function(){
var k=0;
var w=0;
var that=this;
var timer=null;
var list=$(this.listBox);
var len=$(this.listItem).length;
var width=parseInt($(this.listItem).css(‘width‘));
var num=Math.ceil(len/this.boxNum);
// 添加小按钮页数
for(var i=0;i<num;i++){
var j=i+1;
$(this.iconList).append(‘<li>‘+(i+1)+‘</li>‘)
}
$(this.iconItem).eq(0).addClass(‘active‘);
list.append($(this.listItem).eq(0).clone(true));
// 小按钮页数点击事件
$(this.iconList).on(‘click‘,‘li‘,function(){
k=$(this).index();
w=$(this).index();
$(that.iconItem).eq(k).addClass(‘active‘).siblings().removeClass(‘active‘);
list.stop().animate({"left":k*width*-1+"px"},that.imgSpeed);
})
// 判断轮播状态
if(this.autoplay===true){
timer=setInterval(function(){
autoPlay();
},that.sliderSpeed)
}
// 左按钮点击事件
$(this.leftBtn).on(‘click‘,function(){
clearInterval(timer);
leftSlider();
});
// 右按钮点击事件
$(this.rightBtn).on(‘click‘,function(){
clearInterval(timer);
rightSlider();
})
if(this.autoplay===true){
(function hover(){
$(that.conBox+‘ a‘).hover(function(){
clearInterval(timer);
timer=null;
},function(){
timer=setInterval(function(){
autoPlay();
},that.sliderSpeed)
})
})()
}
//自动轮播
function autoPlay(){
k++;
w++;
if(k>num-1){
k=0;
}
$(that.iconItem).eq(k).addClass("active").siblings().removeClass("active");
if(w>num){
w=1;
list.css(‘left‘,‘0px‘);
}
list.stop().animate({"left":w*width*-1+"px"},that.imgSpeed);
}
function leftSlider(){
k--;
w--;
if(k<0){
k=num-1;
}
$(that.iconItem).eq(k).addClass(‘active‘).siblings().removeClass(‘active‘);
if(w<0){
list.css({"left":len*width*-1});
w=num-1;
}
list.stop().animate({"left":w*width*-1+"px"},that.imgSpeed);
}
function rightSlider(){
autoPlay();
}
}
css代码部分
/*css reset*/
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,input,select,textarea,form{margin: 0; padding: 0;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset,img, legend, input, textarea, p, blockquote, th, td, em, i, b, button, font, span {
margin: 0;
padding: 0;
list-style: none;
font-style: normal;
font-weight: normal;
font-family: "microsoft yahei";
}
*{box-sizing: border-box}
body{font:16px/1.5 "宋体";}
img{border:none;}
ul,ol{list-style:none;}
input,select,textarea{outline:none;border:none;background:none;}
textarea{resize:none;}
a{text-decoration:none;}
/*清浮动*/
.clearfix:after{content:"";
display: block;clear: both;
*display:block;
*clear:both;}
.clearfix{zoom:1;}
/*选择*/
::selection {background-color:#669900; color:#ffffff; text-shadow:none;}
::-moz-selection {background-color:#669900; color:#ffffff;text-shadow:none;}
/*去掉a的下划线*/
a {blr:expression(this.onFocus=this.blur())} /*if IE*/
a {outline:none;
color: #000;}/*if 火狐等现代浏览器浏览器*/
/*浮动*/
.left{float: left}
.right{float: right}
.parent_position{position: relative}
*{
box-sizing: border-box;
}
ul,ol,li {
padding: 0;
margin: 0;
}
.container{
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid #dddddd;
overflow: hidden;
position: relative;
}
.list{
width: 9999999px;
height: 300px;
left: 0;
position: absolute;
}
.list li{
float: left;
}
.iconList{
text-align: center;
position: absolute;
bottom: 10px;
/*border: 1px solid #dddddd;*/
height: 20px;
left: 50%;
margin-left: -45px;
overflow: hidden;
width: 160px;
}
.iconList li{
width:20px;
height: 20px;
/*border: 2px solid #ffffff;*/
border-radius: 50%;
float: left;
margin-left:10px;
color: #000000;
background: #ffffff;
cursor: pointer;
z-index: 10;
font-size: 10px;
}
.iconList li.active{
color: #ffffff;
background: #ff0000;;
}
.list li img{
width: 500px;
height: 300px;
}
.leftBtn,.rightBtn{
position: absolute;
top: 44%;
width: 25px;
height: 30px;
cursor: pointer;
}
.leftBtn{
left: 10px;
background: url(../images/s_btn.png) 0px 0px no-repeat;
}
.rightBtn{
right: 10px;
background: url(../images/s_btn.png) 0px -40px no-repeat;
}
时间： 2024-11-10 08:25:28