slide轮播图

最新推荐文章于 2024-08-12 09:03:04 发布

qq444616055

最新推荐文章于 2024-08-12 09:03:04 发布

阅读量924

点赞数

分类专栏： javascrit(jquery) 文章标签： slide 轮播图

本文链接：https://blog.csdn.net/qq444616055/article/details/87734187

版权

javascrit(jquery) 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

移动端的轮播图，支持自动轮播，触摸滑动。
最后一页右滑会滚到第一页；第一页左滑会滚到最后一页。
移动端通常有默认触摸事件，要实现在图片上触摸滑动，要先禁用默认事件。
这里还缺一个jquery，请自行下载一个。jquery的animate动画很流畅。我一开始自己写的动画不流畅，就用了jquery的animate。

slide.html

<html> 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" > 
    <title>轮播图</title> 
    <link rel="stylesheet" type="text/css" href="./slide.css"/>
    <script src="./jquery-1.10.2.min.js"></script>
    <script src="./slide.js"></script>
</head> 
<body>
	<div class="slide-cont" >
		<ul class="slides">
			<li style="background-color: green"> <img src="./slide1.jpg" alt="图片加载失败"/> </li>
			<li style="background-color: blue"> <img src="./slide2.jpg" alt="图片加载失败"/> </li>
			<li style="background-color: yellow"> <img src="./slide3.jpg" alt="图片加载失败"/> </li>
			<li style="background-color: #abc"> <img src="./slide3.jpg" alt="图片加载失败"/> </li>
		</ul>
	</div>
</body> 
</html>

slide.js

/**
 - author: wdx
 - 2017.02
*/
$(document).ready(function(){
    var slide_dom_1 = '.slides';  //轮播图ul容器
    var _SL = {
        ul : $(slide_dom_1),
        lis: $(slide_dom_1).find('li'),  //每张图

        item: 1,  //当前展示的图片序号，从1开始
        width: $(slide_dom_1).parent().width(),  //轮播图ul容器父节点div的宽度
        size: $(slide_dom_1).find('li').length,  //图的总数

        goLeft: true,  //向左滑动
        speed: 4000,   //每n秒自动滚动一次。单位ms
        speedMove: 800,  //自动滚动时动画速度
        //speedMove_temp: 1000,  //speedMove_temp = speedMove
        //speedMove_touch: 300,  //手动滚动时动画速度
        bMove: true,  //手动滚动开关
        bRun: true,   //自动滚动开关
        timer: null,  //定时器
    }

    _SL_start_run();

    //窗口大小改变时重置滚动
    window.onresize = function() {
        var time;
        if (time){
            clearTimeout(time)
        }
        time = setTimeout(function() {
            _SL_start_run();
        }, 100);

    }; 

    //开始
    function _SL_start_run() {
        clearInterval(_SL.timer);
        _SL_init();
        _SL.timer = setInterval(_SL_run, _SL.speed);
    }

    //初始化
    function _SL_init() {
        _SL.width = $(slide_dom_1).parent().width();

        //设置样式
        $(_SL.lis).width(_SL.width);
        $(_SL.ul).width(_SL.width * _SL.size);
        $(_SL.ul).css('margin-left', (1 - _SL.item) * _SL.width);
        
        //加中间底部的点
        var $slide = $('.slides');
        var thml_  = '';
       for (var i=0; i<_SL.size; i++) {
            if (i == _SL.item-1) {
                thml_ += '<li class="color-ddd slide-mark-li-active"></li>';
            } else {
                thml_ += '<li class="color-ddd"></li>';
            }
            
        }
        thml_ = '<ul>'+ thml_ +'</ul>';
        $('.slides').parent().append('<div class="slide-mark-cont">' + thml_ + '</div>');
        var width_ = _SL.size * 1.2 * 16;  //li.width + li.margin-left;
        var marginLeft_ = _SL.width/2 - width_/2;
        $('.slide-mark-cont ul').css('margin-left', marginLeft_);

    }

    //滚动到第itemGoto张图(一次)
    function _SL_goto(itemGoto) {
        //console.log('slide to '+itemGoto);
        if (itemGoto > _SL.size) {
            return;
        }
        if (_SL.bMove) {

            _SL.bMove = false;
            var left = (1 - itemGoto) * _SL.width;

            //哪张图的小圆圈变化
            $('.slide-mark-cont ul li').removeClass('slide-mark-li-active');
            $('.slide-mark-cont ul li').eq(itemGoto-1).addClass('slide-mark-li-active');

            $(_SL.ul).animate({
                'margin-left':  left,
            }, _SL.speedMove, function(){
                //_SL.speedMove = _SL.speedMove_temp;
                _SL.item = itemGoto;
                _SL.bMove = true;
                _SL.bRun = true;
            });
        }
       
    }

    //自动滚动
    function _SL_run() {
        if (_SL.bRun) {
            var itemGoto = 1;
            if (_SL.goLeft) {
                itemGoto = (_SL.item) % _SL.size + 1;
            } else {
                itemGoto = _SL.item - 1;
                itemGoto = itemGoto==0 ? _SL.size : itemGoto;
            }
            _SL_goto(itemGoto);
        }
    }

    //滑动事件
    $(_SL.ul).on("touchstart", function(e) {
        // 判断默认行为是否可以被禁用
        if (e.cancelable) {
            // 判断默认行为是否已经被禁用
            if (!e.defaultPrevented) {
                e.preventDefault();
            }
        }
        startX = e.originalEvent.changedTouches[0].pageX,
        startY = e.originalEvent.changedTouches[0].pageY;
    });
    $(_SL.ul).on("touchend", function(e) {    
        if (e.cancelable) {
            if (!e.defaultPrevented) {
                e.preventDefault();
            }
        }               
        moveEndX = e.originalEvent.changedTouches[0].pageX,
        moveEndY = e.originalEvent.changedTouches[0].pageY,
        X = moveEndX - startX,
        Y = moveEndY - startY;
        //左滑
        if ( X < 0 ) {
            //console.log('<--');
            //$(_SL.ul).stop();
            _SL.bRun = false;
            _SL.goLeft = true;
            //_SL.speedMove = _SL.speedMove_touch;
            var itemGoto = itemGoto = (_SL.item) % _SL.size + 1;
            _SL_goto(itemGoto);
        }
        //右滑
        else if ( X > 0 ) {
            //console.log('-->');
            //$(_SL.ul).stop();
            _SL.bRun = false;
            _SL.goLeft = false;
            //_SL.speedMove = _SL.speedMove_touch;
            var itemGoto = _SL.item - 1;
            itemGoto = itemGoto==0 ? _SL.size : itemGoto;
            _SL_goto(itemGoto);
        }
        //下滑
        else if ( Y > 0) {
        }
        //上滑
        else if ( Y < 0 ) {
        }
        //单击
        else{
        }
    });
});

slide.css

* {padding: 0; margin: 0;}
body {font-size: 1.4rem;}
ul, li {list-style: none;}
html, body {
	height: 100%; width: 100%;
	font-size: 62.5%;
}
.slide-cont {
	width: 100%; height: 16rem; 
	overflow: hidden;
	position: relative;
}
.slides {
	width: 100%; height: 100%; float: left;
}
.slides>li {
	width: 100%; height: 100%; float: left;
}
.slides>li>a {
	width: 100%; height: 100%;
}
.slides>li>img {
	width: 100%; height: 100%;
}
.slides>li>a>img {
	width: 100%; height: 100%;
}


.color-ddd {
	background-color: #ddd;
	opacity: 0.3;
}
.slide-mark-li-active {
	opacity: 1.0;
	background-color: #fff;
}
.slide-mark-cont {
	width: 100%; height: 0.2rem;
	position: absolute; left: 0; bottom: 0.5rem;
}
.slide-mark-cont>ul {
	height: 100%;
}
.slide-mark-cont>ul>li {
	float: left; height: 100%;  width: 1.0rem; margin-left: 0.2rem;
	
}

qq444616055

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
slide轮播图

移动端的轮播图，支持自动轮播，触摸滑动。最后一页又滑会滚到第一页；第一页左滑会滚到最后一页。slide.html&amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta http-equiv=&amp;amp;quot;Content-Type&amp;amp;quot; conten
复制链接

扫一扫

专栏目录