自已动手写的轮播图插件，功能不断增加中，可以下载
前，平時總是使用別人的輪播圖插件，這次決定自已寫一個，功能越多越好。實際現起來，發現并不容易。先實現基本的功能，下兩周要豐富起來。
圖是別人的圖，心是自已的心。直接上代碼：
一：結構
<!-- carousel begin -->
<div class="carousel-wrap">
?? ?<div class="carousel-main-wrap">
?? ??? ?<ul class="carousel-scroll-wrap">
?? ??? ??? ?<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>
?? ??? ??? ?<li><img src="images/6.jpg" alt=""></li>
?? ??? ??? ?<li><img src="images/7.jpg" alt=""></li>
?? ??? ??? ?<li><img src="images/8.jpg" alt=""></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;
?? ?background-color: gray;
}
.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-wrap li');
?? ?var controlSpan = $('.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-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-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
六：后續慢慢再增加完成各種功能，還要更新完整
這周，over...
轉載于:https://www.cnblogs.com/zk995/p/4523088.html
總結
以上是生活随笔為你收集整理的自已动手写的轮播图插件，功能不断增加中，可以下载的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JAVA的内存模型及结构
- 下一篇： JAVA实例，判断是否是瑞年