码上敲享录 > HTML+CSS实战 > 页面实现图片循环轮播滚动效果,图片跑马灯效果

页面实现图片循环轮播滚动效果,图片跑马灯效果

上一章章节目录下一章 2020-06-03已有748人阅读 评论(0)

1.效果



2.完整html页面代码:

<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<title>图片循环滚动</title>

<style>

#box div, box ul,box  li{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}

#box ol, box ul ,box li{list-style:none}

#box img {border: 0; vertical-align:middle}

#box .clear{clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px}

#box a{color:#000000;text-decoration:none}

#box a:hover{color:#BA2636;text-decoration:underline}


#box{width:925px; margin:20px auto; padding:2px;color:#000000;background:#FFF; text-align:center}

#Marquee_x { overflow:hidden; width: 925px }

#Marquee_x ul li ,#Marquee_x ul li div{ float:left;line-height:25px;overflow:hidden}

#Marquee_x ul li div{ float:left;line-height:25px; width:142px; overflow:hidden}

#Marquee_x ul li div img{ border:1px solid #DADADA; width:140px; height:130px; display:block}

#Marquee_x ul li div span{ display:block;font-size: 12px;line-height:16px;}

</style>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script>

(function($){

$.fn.jcMarquee = function(options) {

var defaults = {

'marquee':'x',

'margin_bottom':'0',

'margin_right':'0',

           'speed':'10'

};

var options = $.extend(defaults,options);

return this.each(function() {

       var $marquee = $(this),

   $marquee_scroll = $marquee.children('ul');

$marquee_scroll.append("<li class='clone'>"+"</li>");

$marquee_scroll.find('li').eq(0).children().clone().appendTo('.clone');

var $marquee_left = $marquee_scroll.find('li');

if (options.marquee == 'x') {

var x = 0;

       $marquee_scroll.css('width','1000%');

$marquee_left.find('div').css({'margin-right':options.margin_right});

$marquee_left.css({'margin-right':options.margin_right});

               function Marquee_x(){

               $marquee.scrollLeft(++x);

_margin = parseInt($marquee_left.find('div').css('margin-right'));

           if(x==$marquee_left.width()+_margin) { x = 0 };

};

   var MyMar=setInterval(Marquee_x,options.speed);

               $marquee.hover(function(){

                   clearInterval(MyMar);

               },function(){

                   MyMar=setInterval(Marquee_x,options.speed);

               });

}

if (options.marquee == 'y') {

var y = 0;

       $marquee_scroll.css('height','1000%');

$marquee_left.find('div').css('margin-bottom',options.margin_bottom);

$marquee_left.css('margin-bottom',options.margin_bottom);

               function Marquee_y(){

               $marquee.scrollTop(++y);

_margin = parseInt($marquee_left.find('div').css('margin-bottom'));

           if(y==$marquee_left.height()+_margin) { y = 0 };

};

   var MyMar=setInterval(Marquee_y,options.speed);

               $marquee.hover(function(){

                   clearInterval(MyMar);

               },function(){

                   MyMar=setInterval(Marquee_y,options.speed);

               });

};

});

};

})(jQuery)

$(function(){

   $('#Marquee_x').jcMarquee({ 'marquee':'x','margin_right':'10px','speed':20 });

//10px代表间距,20代表滚动速度

});

</script>

</head>

<body>

<div id="box">

   <div id="Marquee_x">

       <ul style="width: 1000%;">

            <li style="margin-right: 10px;">

               <div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.3.15ea397fwbW3VD&id=619159500532" target="_blank"><img src="https://gd1.alicdn.com/imgextra/i4/1035244808/O1CN01BlGPxi1lO6t5k0GRA_!!1035244808.jpg"><span>2020短袖t恤男士潮牌夏季潮流纯棉夏装T恤男装上衣</span></a></div>

               <div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.5.15ea397fwbW3VD&id=619161180900" target="_blank"><img src="https://gd2.alicdn.com/imgextra/i1/1035244808/O1CN01Kp7KtR1lO6t67lvpt_!!1035244808.jpg"><span>男短袖T恤圆领爆款t恤2020夏季新款潮流半袖男装体恤衫</span></a></div>

               <div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.7.15ea397fwbW3VD&id=619718242434" target="_blank"><img src="https://gd3.alicdn.com/imgextra/i3/1035244808/O1CN01fS7ugn1lO6t5j9pcI_!!1035244808.jpg"><span>短袖T恤男装2020夏季新款宇宙翅膀图案圆领潮牌衣服</span></a></div>

               <div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.9.15ea397fwbW3VD&id=619726198924" target="_blank"><img src="https://gd3.alicdn.com/imgextra/i2/1035244808/O1CN01mvr2ws1lO6tA6fXXJ_!!1035244808.jpg"><span>2020年夏季纯棉短袖男士t恤男潮牌潮流韩版修身体桖</span></a></div>

             

           </li>

<!--不加下面的标签就会卡顿 -->

<li class="clone" style="margin-right: 10px;">

                <div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.3.15ea397fwbW3VD&id=619159500532" target="_blank"><img src="https://gd1.alicdn.com/imgextra/i4/1035244808/O1CN01BlGPxi1lO6t5k0GRA_!!1035244808.jpg"><span>2020短袖t恤男士潮牌夏季潮流纯棉夏装T恤男装上衣</span></a></div>

               <div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.5.15ea397fwbW3VD&id=619161180900" target="_blank"><img src="https://gd2.alicdn.com/imgextra/i1/1035244808/O1CN01Kp7KtR1lO6t67lvpt_!!1035244808.jpg"><span>男短袖T恤圆领爆款t恤2020夏季新款潮流半袖男装体恤衫</span></a></div>

               <div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.7.15ea397fwbW3VD&id=619718242434" target="_blank"><img src="https://gd3.alicdn.com/imgextra/i3/1035244808/O1CN01fS7ugn1lO6t5j9pcI_!!1035244808.jpg"><span>短袖T恤男装2020夏季新款宇宙翅膀图案圆领潮牌衣服</span></a></div>

               <div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.9.15ea397fwbW3VD&id=619726198924" target="_blank"><img src="https://gd3.alicdn.com/imgextra/i2/1035244808/O1CN01mvr2ws1lO6tA6fXXJ_!!1035244808.jpg"><span>2020年夏季纯棉短袖男士t恤男潮牌潮流韩版修身体桖</span></a></div>

             

           </li>

       </ul>

   </div>

</div>




</body></html>


向大家推荐《Activiti工作流实战教程》:https://xiaozhuanlan.com/activiti
3

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交