jquery 轮播图（从零开发编写）

news/2024/7/11 1:09:58 标签: jquery, 轮播图

淡入淡出效果

利用的是绝对定位，绝对定位的元素会出现堆叠，jquery控制图片的隐藏与显示。

分享一个定位相关知识点

html

<div class="banner">
        <ul class="bannerImg">
            <li><a href="script:;"><img src="./img/pic_01.jpg" alt=""></a></li>
            <li><a href="script:;"><img src="./img/pic_02.jpg" alt=""></a></li>
            <li><a href="script:;"><img src="./img/pic_03.jpg" alt=""></a></li>
            <li><a href="script:;"><img src="./img/pic_04.jpg" alt=""></a></li>
            <li><a href="script:;"><img src="./img/pic_05.jpg" alt=""></a></li>
        </ul>
        <ul class="navigation">
            <li class="actived"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <a href="script:;" class="banner-arrow arrow-left"><img src="./img/arrow-left.png" alt=""></a>
        <a href="script:;" class="banner-arrow arrow-right"><img src="./img/arrow-right.png" alt=""></a>
    </div>

 css

*{
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}
.banner {
    width: 630px;
    height: 300px;
    margin: 100px auto;
    position: relative;
}
.bannerImg {
    width: 100%;
    height: 100%;
    position: absolute;
}
.bannerImg li {
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
}
.bannerImg li:first-child {
    display: block;
}
.bannerImg li a img {
    width: 100%;
    height: 100%;
}
/* 左右切换按钮 */
.banner-arrow {
    display: inline-block;
    width: 30px;
    height: 30px;
    border:1px solid transparent;
    border-radius: 50%;
    background: #ddd;
    position: absolute;
    bottom: 135px;
    transition: all .3s linear;
}
.banner-arrow:hover {
    background: #333;
    opacity: 0.7;
}
.banner-arrow img {
    position: absolute;
    top:4px;
    left:10px;
}
.banner-arrow.arrow-left {
    left: 15px;
}
.banner-arrow.arrow-left img {
    left:6px;
}
.banner-arrow.arrow-right {
    right:15px;
}
/* 导航小圆点 */
.navigation {
    position: absolute;
    bottom:15px;
    left: 240px;
}
.navigation li {
    width: 15px;
    height:15px;
    float:left;
    margin-left: 10px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
}
.navigation li.actived {
    background: #e4393c;
}

js

$(function () {
// 自动轮播
var i = 0;
var flag = false;
function carouse () {
    i++;
    if(i>4){
        i = 0;
    }
    $(".bannerImg li")
        .eq(i)
        .fadeIn(500)
        .siblings()
        .fadeOut(500);
    $(".navigation li")
        .eq(i)
        .addClass("actived")
        .siblings()
        .removeClass("actived");
}
var timer = setInterval(carouse,2000)
// 鼠标移入停止轮播，鼠标移出开始轮播
$(".banner").hover(function() {
    clearInterval(timer);
    timer = null;
},function() {
    timer = setInterval(carouse,2000);
});
// 点击左边切换按钮
$(".arrow-left").click(function() {
    i--;
    if(i === -1){
        i = 4;
    };
    $(".bannerImg li")
        .eq(i)
        .stop(true)
        .fadeIn(500)
        .siblings()
        .fadeOut(500);
    $(".navigation li")
        .eq(i)
        .stop(true)
        .addClass("actived")
        .siblings()
        .removeClass("actived");
});
// 点击右边切换按钮
$(".arrow-right").click(function() {
    i++;
    if(i > 4){
        i = 0;
    };
    $(".bannerImg li").eq(i).stop(true).fadeIn(500).siblings().fadeOut(500);
    $(".navigation li").eq(i).stop(true).addClass("actived").siblings().removeClass("actived");
})
// 点击小圆点切换图片
$(".navigation li").click(function () {
    var $this = $(this);
    var i = $this.index();
    $(".bannerImg li").eq(i).stop(true).fadeIn(500).siblings().fadeOut(500);
    $(".navigation li").eq(i).stop(true).addClass("actived").siblings().removeClass("actived");
})


})

左滑右滑效果（不废话了）

html

<div class="banner">
        <ul class="bannerImg">
            <li><a href="script:;"><img src="./img/winter1.jpg" alt=""></a></li>
            <li><a href="script:;"><img src="./img/winter2.jpg" alt=""></a></li>
            <li><a href="script:;"><img src="./img/winter3.jpg" alt=""></a></li>
            <li><a href="script:;"><img src="./img/winter4.jpg" alt=""></a></li>
            <li><a href="script:;"><img src="./img/winter5.jpg" alt=""></a></li>
        </ul>
        <ul class="navigation">
            <li class="actived"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <a href="script:;" class="banner-arrow arrow-left"><img src="./img/arrow-left.png" alt=""></a>
        <a href="script:;" class="banner-arrow arrow-right"><img src="./img/arrow-right.png" alt=""></a>
    </div>

css

* {
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}
.banner {
    width: 800px;
    height: 400px;
    margin: 100px auto;
    overflow: hidden;
    position: relative;
}
/* 设置bannerImg的初始化位置及决定定位 是为了方便轮播实现 */
.bannerImg {
    position: absolute;
    left:0;
}
.bannerImg li {
    width: 800px;
    height: 400px;
    float: left;
}
.bannerImg li img {
    width: 100%;
    height: 100%;
}
/* 导航小圆点 */
.navigation {
    position: absolute;
    bottom: 15px;
    left: 40%;

}
.navigation li {
    float: left;
    width: 15px;
    height: 15px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #999;
    margin-left: 15px;

}
.navigation li.actived {
    background: #0aa1ed;
}
/* 左右切换箭头 */
.banner-arrow {
    position: absolute;
    top: 48%;
    width: 35px;
    height: 35px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #ccc;
    transition: all .3s linear;
}
.banner-arrow:hover {
    background: #aaa;
}
.banner-arrow img {
    position: absolute;
    top: 7px;
    left: 10px;
}
.banner-arrow.arrow-left {
    left: 10px;
}
.banner-arrow.arrow-right {
    right: 10px;
}

js

$(function() {
var timer = null, // 定时器
    move = 0, // 当前图片位置下标
    LIWIDTH = 800, // 图片容器宽度（li）
    wait = 3000, // 每隔多长时间播放一次
    interval = 500, // 图片的移动时间
    bannerImg = $(".bannerImg"),
    navigation = $(".navigation");
bannerImg.css("width",LIWIDTH*5);
// 自动轮播
function automove() {
    move++;
    if(move === 4){
        bannerImg.css("left",0);
        move = 0;
    }
    bannerImg.animate({
        left:-move*LIWIDTH
    },interval);
    // 导航小圆点的切换如果写在animate自带的function里
    // 则会出现一个延迟显现，所以单独提出来
    navigation.children()
                .eq(move)
                .addClass("actived")
                .siblings()
                .removeClass("actived");
}
function moved(){
    timer = setInterval(automove,wait);
}
moved();
// 点击左右边箭头切换图片
$(".arrow-left").click(function() {
    if(!bannerImg.is(":animated")){
        if(move === 0){
            move = 4;
            bannerImg.css("left",-LIWIDTH*move);
        }
        move--;
        bannerImg.animate({
            left:-move*LIWIDTH
        },interval);
        navigation.children()
                    .eq(move)
                    .addClass("actived")
                    .siblings()
                    .removeClass("actived");
    }
});
$(".arrow-right").click(function() {
    if(!bannerImg.is(":animated")){
        automove();
        console.log("向右移动");
    }
})
// 点击导航小圆点切换图片
navigation.on("click","li",function() {
    var $li = $(this);
    var index = $li.index();
    move = index;
    bannerImg
    .stop(true)
    .animate({
        left:-LIWIDTH*move
    },interval);
    $li.addClass("actived")
        .siblings()
        .removeClass("actived");
});
// 鼠标悬浮停止动画播放      鼠标移入和移出
$(".banner").hover(function() {
    clearInterval(timer);
    timer = null;
},function() {
    moved();
});

})

 


http://www.niftyadmin.cn/n/509288.html

相关文章

css选择器兼容性

css选择器兼容性

ID选择器&#xff1a; #header {} 类选择器&#xff1a; .header {} 元素选择器&#xff1a; div {} 子选择器&#xff1a; ul > li {} 后代选择器&#xff1a; div p {} 伪类选择器&#xff1a; a:hover {} 属性选择器&#xff1a; input[type"text&quo…
阅读更多...
vue-lazyload 插件使用((图片懒加载)

vue-lazyload 插件使用((图片懒加载)

1&#xff0c;安装 // 安装 npm install vue-lazyload --save 2&#xff0c;注册 // 注册 main.js全局注册 import Vue from vue import vueLazyload from vue-lazyloadVue.use(vueLazyload);在注册的时候是可以传入配置参数的&#xff0c;常规配置如下 Vue.use(VueLazy…
阅读更多...
开发记录(切换上一页下一页)

开发记录(切换上一页下一页)

有一个table&#xff0c;某一列渲染数据是可查看的&#xff0c;点击当前单元格&#xff0c;弹出模态框&#xff0c;模态框为子组件&#xff0c;table属于父组件&#xff0c;模态框渲染从父组件获取的数据&#xff0c;框架为vue 父组件 html <template><el-containe…
阅读更多...
Vue中的watch 和computed 属性

Vue中的watch 和computed 属性

之前写过一篇关于computed计算属性的文章&#xff0c;详见这里。 computed内的function只执行一次&#xff0c;仅当function内涉及到Vue实例绑定的data的值的改变&#xff0c;function才会从新执行&#xff0c; 并修改DOM上的内容。 在官方文档中&#xff0c;强调了computed…
阅读更多...
Vue使用viewerjs (图片查看插件)

Vue使用viewerjs (图片查看插件)

项目创建 vue init webpack mytest001 安装viewerjs npm install viewerjs 删掉生成的项目里面的helloWord.vue 修改路由 创建一个index.vue index.vue代码: " title"" data-original-title"复制"> </div></div><pre class"…
阅读更多...
ElementUI图片上传 回显

ElementUI图片上传 回显

html内容 <!-- 图片上传 --><el-row><el-col :span"24"><el-form-item label"LOGO" prop"logoImg"><el-uploadclass"upload-demo"ref"upload"name"logoImg":action"action"…
阅读更多...
vue 文件导出

vue 文件导出

文件的导出格式为excel 简单的总结一下&#xff0c;前段做导出功能的话都是根据后台接口返回的数据再去做相应的处理&#xff0c; 简单来讲&#xff0c;后台返回的数据格式有两种&#xff0c;他们分别对应不同的导出方法&#xff0c;如下&#xff1a; 第一种 后台会直接返回…
阅读更多...
Vue filter 过滤器使用详解

Vue filter 过滤器使用详解

在Vue中当我们想要对一个数值进行处理时&#xff08;改变格式、大小&#xff0c;类型&#xff0c;过滤等&#xff09;可以使用filter Vue过滤器有两种注册方式&#xff0c;全局、或者是局部注册 在一个组件内部想要使用一个不太常用的过滤器&#xff0c;可以局部注册 局部注…
阅读更多...
最新文章

Copyright @ 2022~2023