自已动手写的轮播图插件，功能不断增加中，可以下载
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自已动手写的轮播图插件，功能不断增加中，可以下载相关的知识，希望对你有一定的参考价值。
一：结构
<!-- carousel begin -->
<div class="carousel-wrap">
<div class="carousel-main-wrap">
<ul class="carousel-scroll-wrap">
<li><img src="images/1.jpg" ></li>
<li><img src="images/2.jpg" ></li>
<li><img src="images/3.jpg" ></li>
<li><img src="images/4.jpg" ></li>
<li><img src="images/5.jpg" ></li>
<li><img src="images/6.jpg" ></li>
<li><img src="images/7.jpg" ></li>
<li><img src="images/8.jpg" ></li>
</ul>
<span class="carousel-left">向左</span>
<span class="carousel-right">向右</span>
</div>
</div>
<!-- carousel end -->
注意，1 必须是三张以上图片，2 最外层carousel-wrap必须要有一个宽高
二：CSS
/* css reset start*/
@charset "UTF-8";
*{
padding:0;
margin:0;
list-style:none;
border:0;
}
body{
width: 100%;
font-family: ‘SimSun‘, ‘Microsoft YaHei‘, Arial;
font-size: 14px;
color: #fff;
}
a,a:visited{
color: #fff;
text-decoration: none;
}
a:hover{
text-decoration: none;
}
img{
display: block;
}
/* css reset end */
/* carousel start */
.carousel-wrap{
width: 800px;
height: 504px;
margin: 0 auto;
}
.carousel-main-wrap{
overflow: hidden;
position: relative;
}
.carousel-scroll-wrap{
position: relative;
}
.carousel-scroll-wrap li{
overflow: hidden;
position: absolute;
top: 0;
left: 10000px;
}
.carousel-scroll-wrap li img{
width: 800px;
height: 504px;
display: block;
}
.carousel-left{
width: 50px;
height: 100px;
margin-top: -50px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: teal;
display: block;
position: absolute;
left: 0;
top: 50%;
cursor: pointer;
}
.carousel-right{
width: 50px;
height: 100px;
margin-top: -50px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: teal;
display: block;
position: absolute;
right: 0;
top: 50%;
cursor: pointer;
}
.carousel-control{
height: 10px;
overflow: hidden;
}
.carousel-control span{
width: 20%;
height: 10px;
display: inline-block;
background-color: orange;
cursor: pointer;
}
.carousel-control span.cur{
background-color: #f60;
}
/* carousel end */
三：JS
基于JQ，
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/carousel.js"></script> carousel.js代码如下： function carouselPlay(config){ //设置变量默认数据 var carouselSpeed = config.carouselSpeed || 800; var carouselFuncton = config.carouselFuncton || ‘swing‘; var imgWidth = config.imgWidth || 400; var imgHeight = config.imgHeight || 304; //以下为常量，一般不必改动 var carouselLi = (′.carousel−scroll−wrapli′);varcontrolSpan=(′.carousel−scroll−wrapli′);varcontrolSpan=(‘.carousel-control span‘); var carouselCount = carouselLi.index()+1; var curLeft = imgWidth; var nextLeft = imgWidth*2; var prevLeft = 0; var outLeft = 10000; var curIndex = 0; var nextIndex = 1; var prevIndex = carouselCount-1; //初始化 var jobInite = function(){ (′.carousel−main−wrap′).css(width:imgWidth,height:imgHeight);(′.carousel−main−wrap′).css(width:imgWidth,height:imgHeight);(‘.carousel-scroll-wrap‘).css({ width: imgWidth*3, height: imgHeight, left: -imgWidth, top: 0 }); carouselLi.eq(curIndex).css(‘left‘, curLeft); carouselLi.eq(nextIndex).css(‘left‘, nextLeft); carouselLi.eq(prevIndex).css(‘left‘, prevLeft); } jobInite(); //向右滚动一张的逻辑 function rightZero(a){ a++; if(a == carouselCount){ a = 0; } return a } //向左滚动一张的逻辑 function leftZero(a){ a--; if(a == -1){ a = carouselCount-1; } return a } // 小圆点控制图片切换的逻辑，小点控制功能还未写完，但不影响其它功能！ function controlZero(a){ curIndex = a; if(a === (carouselCount-1)){ nextIndex = 0; } else{ nextIndex = a+1; } if(a === 0){ prevIndex = carouselCount; } else{ prevIndex = a-1; } } //滚动函数 function focusAnimate(carouselLi,index,left){ carouselLi.eq(index).stop(true,true).animate({‘left‘: left}, carouselSpeed, carouselFuncton); } //处置窗口以外的图片 function imgOut(carouselLi, index){ carouselLi.eq(index).css(‘left‘, outLeft); } // 控制按钮函数，功能还未写完，但不影响其它功能！ function controlPlay(curIndex){ controlSpan.eq(curIndex).addClass(‘cur‘).siblings().removeClass(‘cur‘); } //向右切换运动 function rightPlay(){ //滚动前初始化图片索引 jobInite(); //向右切换 focusAnimate(carouselLi, curIndex, prevLeft); focusAnimate(carouselLi, nextIndex, curLeft); imgOut(carouselLi, prevIndex); //重置索引 curIndex = rightZero(curIndex); nextIndex = rightZero(nextIndex); prevIndex = rightZero(prevIndex); // 控制小圆点跟随，功能还未写完，但不影响其它功能！ controlPlay(curIndex); } //向左切换运动 function leftPlay(){ //滚动前初始化图片索引 jobInite(); //向左 focusAnimate(carouselLi, curIndex, nextLeft); focusAnimate(carouselLi, prevIndex, curLeft); imgOut(carouselLi, nextIndex); //重置索引 curIndex = leftZero(curIndex); nextIndex = leftZero(nextIndex); prevIndex = leftZero(prevIndex); // 控制小圆点跟随，功能还未写完，但不影响其它功能！ controlPlay(curIndex); } // 限制用户频繁点击 var datePrev = 0; var clickFlag = true; function clickCheck(minSecond){ var nowDate = new Date(); var dateCur = nowDate.getTime(); var dateInterval = dateCur - datePrev; datePrev = dateCur; if(dateInterval<minSecond){ clickFlag = false; } else{ clickFlag = true; } return clickFlag; } // 左右控制切换 (′.carousel−right′).click(function(event)if(clickCheck(500))rightPlay(););(′.carousel−right′).click(function(event)if(clickCheck(500))rightPlay(););(‘.carousel-left‘).click(function(event) { if(clickCheck(500)){ leftPlay(); } }); // 小圆点控制切换，功能还未写完，但不影响其它功能！ controlSpan.mouseover(function(event) { // 计算新的当前位置索引 curIndex = $(this).index(); //重置索引 controlZero(curIndex); // 初始化图片位置 jobInite(); // 小圆点位置跟随 controlPlay(curIndex); }); } 四：在页面中调用 <script type="text/javascript"> $(function(){ //配制变量 var config = { ‘carouselSpeed‘: 800, ‘carouselFuncton‘: ‘swing‘, ‘imgWidth‘: 800, ‘imgHeight‘: 504 } //轮播图的执行 var main = carouselPlay; main(config); }) //更多调用可参考demo </script>
四：测试地址
http://game.feiliu.com/zk/new/plugin/default.html
五：demo源码下载
http://files.cnblogs.com/files/zk995/demo.rar
六：后续慢慢再增加完成各种功能，还要更新完整
以上是关于自已动手写的轮播图插件，功能不断增加中，可以下载的主要内容，如果未能解决你的问题，请参考以下文章