當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

自已动手写的轮播图插件，功能不断增加中，可以下载

發(fā)布時間：2025/3/20 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了自已动手写的轮播图插件，功能不断增加中，可以下载小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前，平時總是使用別人的輪播圖插件，這次決定自已寫一個，功能越多越好。實際現(xiàn)起來，發(fā)現(xiàn)并不容易。先實現(xiàn)基本的功能，下兩周要豐富起來。

圖是別人的圖，心是自已的心。直接上代碼：

一：結(jié)構(gòu)

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

注意，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，

carousel.js代碼如下：

function carouselPlay(config){

//設(shè)置變量默認數(shù)據(jù)
?? ?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;
?? ??? ?}?? ??? ?
?? ?}
//滾動函數(shù)
?? ?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);
?? ?}
// 控制按鈕函數(shù)，功能還未寫完，但不影響其它功能！
?? ?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);
?? ?});
}

四：在頁面中調(diào)用

//更多調(diào)用可參考demo
</script>

四：測試地址

http://game.feiliu.com/zk/new/plugin/default.html

五：demo源碼下載

http://files.cnblogs.com/files/zk995/demo.rar

六：后續(xù)慢慢再增加完成各種功能，還要更新完整

這周，over...

轉(zhuǎn)載于:https://www.cnblogs.com/zk995/p/4523088.html

總結(jié)

以上是生活随笔為你收集整理的自已动手写的轮播图插件，功能不断增加中，可以下载的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。