html5 图片轮播

HTML5 2020-09-22

///////////////////2016/09/29////////////////////
/////////////////by xbw//////////////////////////
///////////////////html 5///////////////////////////

图片轮播

index.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1,user-scalable=0" charset="UTF-8">
    <title>swipeSlide</title>
    <link href="css/suo.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="slide" id="slide3">
    <ul>
        <li>
            <a href="//m.yhd.com/">
                <img src="http://d10.yihaodianimg.com/V00/M03/4D/41/CgQDsVQG4d6AISZPAAFa7N3KyPY18100.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="//www.baidu.com/">
                <img src="http://d10.yihaodianimg.com/V00/M04/32/59/CgQDsVQDEtaAVv4BAAEFc6n3fws75000.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="//m.taobao.com/">
                <img src="http://d11.yihaodianimg.com/N05/M04/82/EC/CgQI01QEHoiAFBbgAAC9du5zOPc62900.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="//www.qq.com/">
                <img src="http://d10.yihaodianimg.com/N07/M09/26/8B/CgQI0FQFd8-ACrb7AADBtSan3a084000.jpg" alt="">
            </a>
        </li>
    </ul>
    <div class="dot">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

<script src="js/zepto.min.js"></script>
<script src="js/swipeSlide.min.js"></script>
<script> $(function(){ // demo3 $('#slide3').swipeSlide({ continuousScroll:true,speed : 3000,transitionType : 'cubic-bezier(0.22,0.69,0.72,0.88)',firstCallback : function(i,sum,me){ me.find('.dot').children().first().addClass('cur'); },callback : function(i,me){ me.find('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur'); } }); }); </script>
</body>
</html>

suo.css

*{ margin: 0; padding: 0; /* 防止点击闪烁 */ -webkit-tap-highlight-color:rgba(0,0,0); /* 缩放网页，文字大小不变 */ -webkit-text-size-adjust:none; }
body{ font-size: 14px; }
h1{ font-size: 16px; }
h2{ font-size: 14px; }
.slide{ position: relative; max-width: 640px; overflow: hidden; margin: 0px auto; }
.slide:after{ content: ''; display: block; width: 100%; padding-top: 50%; }
.slide ul{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.slide li{ list-style: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* 解决js阻塞页面显示首屏 */
.slide li:first-child{ z-index: 1; }
.slide li img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: none; }
.slide .dot{ position: absolute; right: 10px; bottom: 10px; z-index: 5; font-size: 0; }
.slide .dot span{ display: inline-block; width: 5px; height: 5px; margin-left: 5px; border: 1px solid #fff; border-radius: 50%; }
.slide .dot .cur{ background-color: #fff; }
/* 测试横竖屏 */
#slide1{ width: 320px; }

swipeSlide.min.js

/** * swipeSlide * http://ons.me/500.html * 西门 * 3.4.4(160909) */
!function(a,b){"use strict";function h(a,b,c){b.css({"-webkit-transition":"all "+c+"s "+a.opts.transitionType,transition:"all "+c+"s "+a.opts.transitionType})}function i(a,c){var d=a.opts.axisX?c+"px,0":"0,"+c+"px,0";b.css({"-webkit-transform":"translate3d("+d+")",transform:"translate3d("+d+")"})}function j(a,c){var d=a.opts.ul.children(),e=d.eq(c).find("[data-src]");e&&e.each(function(){var c=b(this);c.is("img")?(c.attr("src",c.data("src")),c.removeAttr("data-src")):(c.css({"background-image":"url("+c.data("src")+")"}),c.removeAttr("data-src"))})}function k(a){e.touch&&!a.touches&&(a.touches=a.originalEvent.touches)}function l(a,b){b.isScrolling=void 0,b._moveDistance=b._moveDistanceIE=0,b._startX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._startY=e.touch?a.touches[0].pageY:a.pageY||a.clientY}function m(a,b){b.opts.autoSwipe&&p(b),b.allowSlideClick=!1,b._curX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._curY=e.touch?a.touches[0].pageY:a.pageY||a.clientY,b._moveX=b._curX-b._startX,b._moveY=b._curY-b._startY,"undefined"==typeof b.isScrolling&&(b.isScrolling=b.opts.axisX?!!(Math.abs(b._moveX)>=Math.abs(b._moveY)):!!(Math.abs(b._moveY)>=Math.abs(b._moveX))),b.isScrolling&&(a.preventDefault?a.preventDefault():a.returnValue=!1,h(b,b.opts.ul,0),b._moveDistance=b._moveDistanceIE=b.opts.axisX?b._moveX:b._moveY),b.opts.continuousScroll||(0==b._index&&b._moveDistance>0||b._index+1>=b._liLength&&b._moveDistance<0)&&(b._moveDistance=0),i(b,-(b._slideDistance*b._index-b._moveDistance))}function n(a){a.opts.autoSwipe&&o(a),(c.ie10||c.ie11)&&(Math.abs(a._moveDistanceIE)<5&&(a.allowSlideClick=!0),setTimeout(function(){a.allowSlideClick=!0},100)),Math.abs(a._moveDistance)<=a._distance?q(a,"",".3"):a._moveDistance>a._distance?q(a,"prev",".3"):Math.abs(a._moveDistance)>a._distance&&q(a,"next",".3"),a._moveDistance=a._moveDistanceIE=0}function o(a){a.opts.autoSwipe&&(p(a),a.autoSlide=setInterval(function(){q(a,".3")},a.opts.speed))}function p(a){clearInterval(a.autoSlide)}function q(a,c){"number"==typeof b?(a._index=b,a.opts.lazyLoad&&(a.opts.continuousScroll?(j(a,a._index),j(a,a._index+1),a._index+2)):(j(a,a._index-1),a._index+1)))):"next"==b?(a._index++,a._index+2),a._index+1==a._liLength?j(a,1):a._index==a._liLength&&(j(a,2))):j(a,a._index+1))):"prev"==b&&(a._index--,0==a._index?j(a,a._liLength):a._index<0&&j(a,a._liLength-1)):j(a,a._index-1))),a.opts.continuousScroll?a._index>=a._liLength?(r(a,c),a._index=0,setTimeout(function(){r(a,0)},300)):a._index<0?(r(a,a._index=a._liLength-1,300)):r(a,c):(a._index>=a._liLength?a._index=0:a._index<0&&(a._index=a._liLength-1),r(a,c)),""!==arguments[1]&&a.opts.callback(a._index,a._liLength,a.$el)}function r(a,b){h(a,a.opts.ul,b),i(a,-a._index*a._slideDistance)}var f,g,c={ie10:a.navigator.msPointerEnabled,ie11:a.navigator.pointerEnabled},d=["touchstart","touchmove","touchend"],e={touch:a.Modernizr&&Modernizr.touch===!0||function(){return!!("ontouchstart"in a||a.DocumentTouch&&document instanceof DocumentTouch)}()};c.ie10&&(d=["MSPointerDown","MSPointerMove","MSPointerUp"]),c.ie11&&(d=["pointerdown","pointermove","pointerup"]),f={touchStart:d[0],touchMove:d[1],touchEnd:d[2]},b.fn.swipeSlide=function(a){var b=[];return this.each(function(c,d){b.push(new g(d,a))}),b},g=function(a,c){var d=this;d.$el=b(a),d._distance=50,d.allowSlideClick=!0,d.init(c)},g.prototype.init=function(d){function p(){var c,a=e.opts.ul.children();e._slideDistance=e.opts.axisX?e.opts.ul.width():e.opts.ul.height(),h(e,e.opts.ul,i(e,-e._slideDistance*e._index),a,c=e.opts.continuousScroll?-1:0,a.each(function(a){i(e,b(this),e._slideDistance*(a+c))})}var g,e=this;return e.opts=b.extend({},{ul:e.$el.children("ul"),li:e.$el.children().children("li"),index:0,continuousScroll:!1,autoSwipe:!0,speed:4e3,axisX:!0,transitionType:"ease",lazyLoad:!1,firstCallback:function(){},callback:function(){}},d),e._index=e.opts.index,e._liLength=e.opts.li.length,e.isScrolling,e.opts.firstCallback(e._index,e._liLength,e.$el),e._liLength<=1?(e.opts.lazyLoad&&j(e,!1):(e.opts.continuousScroll&&e.opts.ul.prepend(e.opts.li.last().clone()).append(e.opts.li.first().clone()),e.opts.lazyLoad&&(j(e,e._index),e.opts.continuousScroll?(j(e,e._index+1),j(e,e._index+2),0==e._index?j(e,e._liLength):e._index+1==e._liLength&&j(e,1)):0==e._index?j(e,e._index+1):e._index+1==e._liLength?j(e,e._index-1):(j(e,e._index-1))),p(),(c.ie10||c.ie11)&&(g="",g=e.opts.axisX?"pan-y":"none",e.$el.css({"-ms-touch-action":g,"touch-action":g}),e.$el.on("click",function(){return e.allowSlideClick})),o(e),e.$el.on(f.touchStart,function(a){k(a),l(a,e)}),e.$el.on(f.touchMove,m(a,e.$el.on(f.touchEnd,function(){n(e)}),e.opts.ul.on("webkitTransitionEnd MSTransitionEnd transitionend",function(){o(e)}),b(a).on("onorientationchange"in a?"orientationchange":"resize",function(){clearTimeout(e.timer),e.timer=setTimeout(p,150)}),void 0)},g.prototype.goTo=function(a){var b=this;q(b,".3")}}(window,window.Zepto||window.jQuery);

zepto.min.js

/** * swipeSlide * http://ons.me/500.html * 西门 * 3.4.4(160909) */
!function(a,window.Zepto||window.jQuery);

服务器控制图片与点击图片跳转链接

adimg.php

<?php $i=(int)$_GET['id']; if ($i==1){ header("Location:http://d10.yihaodianimg.com/V00/M03/4D/41/CgQDsVQG4d6AISZPAAFa7N3KyPY18100.jpg"); }else if($i==2){ header("Location:http://d10.yihaodianimg.com/V00/M04/32/59/CgQDsVQDEtaAVv4BAAEFc6n3fws75000.jpg"); }else if($i==3){ header("Location:http://d11.yihaodianimg.com/N05/M04/82/EC/CgQI01QEHoiAFBbgAAC9du5zOPc62900.jpg"); }else if($i==4){ header("Location:http://d10.yihaodianimg.com/V00/M04/32/59/CgQDsVQDEtaAVv4BAAEFc6n3fws75000.jpg"); }else if($i==5){ header("Location:http://d10.yihaodianimg.com/N07/M09/26/8B/CgQI0FQFd8-ACrb7AADBtSan3a084000.jpg"); } ?>

adurl.php

<?php $i=(int)$_GET['id']; if ($i==1){ header("Location:http://baidu.com"); }else if($i==2){ header("Location:http://sina.com"); }else if($i==3){ header("Location:http://youku.com"); }else if($i==4){ header("Location:http://ecfun.cc"); }else if($i==5){ header("Location:http://xbwcc.com.cn"); } ?>

相关文章

HTML5和CSS3实现3D展示商品信息的代码
HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
关于HTML5和CSS3实现机器猫的代码