图片轮播器

最新推荐文章于 2019-03-28 20:29:09 发布
最新推荐文章于 2019-03-28 20:29:09 发布
阅读量539 收藏 1
点赞数
分类专栏： JQuery的学习 文章标签： html 图片轮播器 图片自动滑动 图片的动态显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanyuwebant/article/details/72677681
版权

一、轮播器
1、HTML框架

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>图片轮播器</title>
        <link rel="stylesheet" type="text/css" href="slider.css" />
        <script src="Jquery.js"></script>
        <script src="slider.js"></script>
    </head>
    <body>
    <div class="wrap">
    <!--快捷键 .wrap>(ul>li*4>img[src=$.jpg])+ol>li*4 -->
        <ul>
            <li><img src="1.jpg" alt="11" /></li>
            <li><img src="2.jpg" alt="22" /></li>
            <li><img src="3.jpg" alt="33" /></li>
            <li><img src="4.jpg" alt="44" /></li>
        </ul>
        <ol>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
        <p class="introduce"></p>
    </div>
    </body>
</html>

2、css的样式

/*清除列表前默认黑点*/
*{
    margin: 0;
    padding: 0;
}
img{
    border:0;
}
ol, ul ,li{list-style: none;} 
body{
    margin: 50px;
}
.wrap{
    width: 500px;/*一张图片的高和宽*/
    height: 350px;
    border: 1px solid red;
    position: relative;/*以这一张图的边框为基准位置*/
    overflow: hidden;/* 将超过这个长宽高的部分隐藏 */
}
.wrap ul{
    width: 2000px;/*列表的行是四张图片的宽度*/
    position: absolute;/* 防止图片溢出 */
    left: 0;
    top: 0;
}
.wrap ul li {
    float: left;/* 将四张图片紧挨着横着排列 */
    width: 500px;
}
.wrap ol{
    position: absolute;
    bottom: 10px;
    right:10px;
}
.wrap ol li{
    float: left;/* 达到 横着排列 的目的*/
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;/* 字体在列元素中举重显示 */
    color: #fff;
    background: #000;
    border: 1px solid yellow;
    margin-right: 3px;/* 列与列之间的距离 */
    cursor: pointer;
}
.wrap ol li.current{
    background: #fff;
    color:#000;
}
.wrap .introduce{
    width:400px ;
    height: 30px;
    line-height: 30px;
    background: rgba(0, 0, 0, 0.5);/* 达到透明显示的作用；或者用“opacity:0.5 ;
    filter: alpha(opacity = 50);” */
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    /*opacity:0.5 ;
    filter: alpha(opacity = 50);*/
}

3、JS控制

/* 
* @Author: Marte
* @Date:   2017-05-04 20:44:04
* @Last Modified by:   Marte
* @Last Modified time: 2017-05-24 08:49:19
*/

$(document).ready(function(){
    var oul = $('.wrap ul');     //获取 行；
    var ali = $('.wrap ul li');  //获取 列；
    var numLi = $('.wrap ol li');//获取数字的 列；
    var aliWidth = $('.wrap ul li').eq(0).width();  //获取单张图片的宽度；
    var _now = 0;//这个控制数字样式的计数器
    var _now2 = 0;//这个是控制图片运动距离的计数器
    var timeId;  //定时器的开关
    var aimg = $('.wrap ul img');//获取wrap中img元素
    var op = $('.wrap p')        //获取wrap中p元素

/*
    numLi.click(function() {                         //鼠标点击触发的函数；
        var index = $(this).index();      //如果点击第一张图片，index=0；索引
        _now = index;                     //不管_now还是_now2都要和点击时index同步；
        _now2 = index;
        var imgAlt = aimg.eq(_now).attr('alt');//获取 _now时刻的的alt值
        op.html(imgAlt);                       //并将atl值显示

        $(this).addClass('current').siblings().removeClass();//数字样式 的 增和删；
        oul.animate({'left':-aliWidth*index},500);
        //根据一组css属性执行动画          
        //图片的移动，行元素的左侧距离wrap的左侧-500*index
    });
*/

    function slider(){
        if (_now==numLi.size()-1) {            //当滚动到第四张图片的时候
                ali.eq(0).css({                //返回到第一张图片的  index或_new值
                    'position':'relative',
                    'left':oul.width()
                });
            _now=0;
        }
        else{
            _now++;                             //如果没达到第四张，那就将_new+1；
        }
        _now2++;                                //图片控制计数器  +1；
        numLi.eq(_now).addClass('current').siblings().removeClass();     //数字样式 的 增和删；
        var imgAlt = aimg.eq(_now).attr('alt');                          //获取 _now时刻的的alt值
        op.html(imgAlt);                                                  //并将atl值显示
        oul.animate({'left':-aliWidth*_now2},500,function(){          
        //图片的移动，行元素的左侧距离wrap的左侧-500*now2
            if (_now==0) {
                ali.eq(0).css('position','static');
                oul.css('left',0);
                _now2=0;
            }
        });
    }

    timeId = setInterval(slider,1500);         //妹1500ms，自动切换图片
    //鼠标点击图片则停止计时器，停止“自动切换图片”；离开则继续定时器切换图片
    // $('.wrap').mouseover(function(event) {
    //     clearInterval(timeId);
    // });

    // $('.wrap').mouseover(function(event) {
    //     timeId = setInterval(slider,1500);
    // });
/*
    $('.wrap').hover(function() {                
        clearInterval(timeId);

    }, function() {
        timeId = setInterval(slider,1500);

    });
*/


});

*重要函数
1、获取各个标签值并显示

var imgAlt= aimg.eq(_now).attr('alt');//获取_now时刻的的alt值

        op.html(imgAlt);                       //并将atl值显示

2、改变数字样式

$(this).addClass('current').siblings().removeClass();

        //数字样式 的 增和删；

3、滚动图片

oul.animate({'left':-aliWidth*index},500);           

   //图片的移动，行元素的左侧距离wrap的左侧-500*index

*注意点
1、同步

_now = index;

         //不管_now还是_now2都要和点击时index同步；

         //index可能在点击鼠标之后变成3,；松开鼠标后我们希望_now变成从3变成0，但是因为setInterval之后_now加1，_now其实还是从0变成1；所以需要同步_now和index；

2、计数器

_now2的作用是防止父元素在第一张留出空白图片；数字定时器和图片运动控制定时器是不同步的

var _now= 0;//这个控制数字样式的计数器

    var _now2= 0;//这个是控制图片运动距离的计数器

3、去relative属性

if (_now==0) {

                ali.eq(0).css('position','static');//去relative属性

                oul.css('left',0);//当去完relative之后，要还原ul的“left”值为0；

                _now2=0;

4、去属性的时机

Oul.animate({css属性的设置},500,function())其中function就是在500ms执行完之后的操作；

oul.animate({'left':-aliWidth*_now2},500,function(){                    

        //图片的移动，行元素的左侧距离wrap的左侧-500*now2

        //根据一组css执行属性动画          

            if (_now==0) {

                ali.eq(0).css('position','static');

                oul.css('left',0);

                _now2=0; //当_now为0的时候，_now2也应该还原回去为0；

            }

        });

*难点

首先，要学会获取元素值；

其次，了解几种函数；

再则，变量的灵活使用，达到了解变量每时每刻的值；

最后，定时器的控制是最难的；

hanyuwebant
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单的图片轮播器
qq_28147861的博客
10-22 322
#con { width: 400px; height: 400px; border: 10px solid #ccc; position: relative; margin: 0 auto 100px; } #con a{ width: 40px; height: 40px; background: #000;
JS 图片轮播器
godogoflive
12-02 1731
    1.index.html 一个JS大图轮播器<!--body { background-color: #FFFFFF;}-->body { background-color: #FFFFFF;} <DIV id=fttltxt style="MARGIN-TOP: 305px; FLOAT: lef
iOS实现图片轮播器
01-03
有时候肯能会用到图片轮播器，做广告的效果。下面详细介绍iOS如何实现图片轮播器 1.新建一个项目，导入5张图片（为了代码方便，我把图片命名规范了，其实无所谓） 2.在mainstoryboard中拖入ScrollView和Page ...
jquery实现图片轮播器
10-19
图片轮播器实现的核心是利用JavaScript控制图片的显示和隐藏，通过更改图片位置实现动画效果，以及同步更新数字导航列表的样式。具体到技术细节，可以通过设置定时器和监听鼠标点击事件来控制轮播行为，利用CSS控制...
图片轮播器demo
04-21
图片轮播器是一种常见的网页或应用程序组件，用于展示一组图片并自动进行切换，为用户提供动态且吸引人的视觉体验。在本“图片轮播器demo”中，我们可以探讨以下几个关键知识点： 1. **基本结构**：图片轮播器通常...
无限循环图片轮播器
01-12
无限循环的图片轮播器，处理了从最后一页到第一页和第一页到最后一页的无缝衔接，封装成一个控件添加自定义属性方便调用
js实现的图片轮播器效果
08-19
用javascript实现的图片轮播器效果
图片轮播器——javascript
农夫仔
12-07 4333
在网页中，图片轮播器用得比较多。 效果图： .d1 { width: 443px; height: auto; overflow: hidden; border: #666666 2px s
图片轮播
木易一
03-28 4877
一、淡入淡出 轮播特点： 实现图片自动以淡入淡出的方式轮播，当鼠标悬停在图片上面的时候轮播停止； 图片下面表示顺序的原点会随着图片切换颜色改变，当鼠标悬停在圆点上时图片切换为鼠标当前悬停的圆点对应的图片； 图片两边代表左右的箭头在点击的时候切换前后的图片； 图片的淡入淡出轮播，可以理解为每一张图片切换到最上面的时候透明度由0慢慢变为1； <!DOCTYPE html&g...
一个JS图片轮播器
李蓝箫
07-16 6036
一个JS图片轮播器 效果如图：    实现代码：1.index.html 一个JS大图轮播器body { background-color: #FFFFFF;}-->http://blog.csdn.net/elifefly是示例，请根据实际需要修改，或者添加相应代码修改成动态。elifefly-->http://blog.csdn.net/elifefly"
简单的图片轮播器（二）：以前最常见的图片轮播
殇痕TT的博客
07-09 390
图片轮播（二）这是和之前的图片轮播器(地址)差不多，效果也是大同小异，主要用的都是一个简单的渐变框架，大家可以看看区别效果图：布局不多说，基本思路还是和上次的一样的，点击下面的按钮，改变按钮就的样式，图片一开始就向下堆叠，用绝对布局点击的时候只要把只要修改top值就可以了.html代码<!DOCTYPE html> <html> <head> <meta charset="U
iOS,图片轮播器，简单好用，拿来直接用
gujinyue
12-14 1338
有时候肯能会用到图片轮播器，做广告的效果。下面详细介绍如何实现图片轮播器 1.新建一个项目，导入5张图片（为了代码方便，我把图片命名规范了，其实无所谓） 2.在mainstoryboard中拖入ScrollView和Page Control（也可以代码写，或者是自定义xib）   设置page control的 Current Page属性，决定轮播的当前页显示的颜色
无限循环 图片轮播器
pilgrim1385的专栏
02-03 556
使用方法：（注意：如果使用autoLayout适配，需要先做完适配，再给图片数组赋值。） YJBannerView * bannerView = [[YJBannerView alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];     [self.view addSubview:bannerView];     [bannerView
轮播器
StreamLine_WenLiang的博客
04-25 345
1. .h #import typedef void(^ClickImageBlock)(NSInteger currentIndex); @interface LoopScrollView : UIView - (instancetype)initWithFrame:(CGRect)frame imageArray:(NSArray *)imageArr
图片轮播器 html css
最新发布
06-25
图片轮播器是一种常见的网页元素，它用于在页面上展示一系列图片，通常通过连续切换或滑动显示下一张图片。HTML、CSS和JavaScript一起使用可以实现这样的效果。以下是创建一个基本图片轮播器的基本步骤： **HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值