JS轮播图怎么做?

广告合作

需要广告位置可以直接联系1272345426。

现在购买

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!如发现资源不能下载或者失效请联系QQ1272345426

久全技术网-www.52jqw.cn
久全技术网-www.52jqw.cn
摘要:制作方法图片轮播最先必须梳理构思,打开另一个定时开关用于实行图片轮播的作用。当鼠标放到高清图片上边时...

JS轮播图怎么做?

教程名称:

JS轮播图怎么做?

教程说明:

1、启用另一个单片机定时器。
方式 名:window.setInterval(code,MilliSec),每过特定时间段实行code,無限实行
2、单片机定时器涵数关键用于实行图片轮播实际效果。
3、当鼠标放到高清图片上边时,高清图片终止轮播图实际效果 消除单片机定时器。
方式 名:window.clearInterval (timer),消除特定单片机定时器
4、当鼠标离开图片上边时,高清图片再次实行轮播图实际效果 再次启用单片机定时器基本功能。
5、当鼠标放到li标贴上边时,高清图片终止轮播图实际效果 消除单片机定时器。
6、当鼠标放到li标贴上边时,还会显示信息li标贴上边相匹配大数字高清图片。
7、当鼠标选择离开li标贴上边时,高清图片就会再次刚开始轮播图实际效果 再次启用单片机定时器基本功能。
8、li标贴上边高亮显示实际效果它们是伴随着高清图片滚动式滚动式。

代码教程:(HTML部分)

<body>

<div id="content">

        <!--轮换显示的横幅广告图片-->

        <div class="scroll_top"></div>

        <div class="scroll_mid"> 

        <img src="images/dd_scroll_1.jpg" alt="轮换显示的图片广告" id="dd_scroll" οnmοuseοver="stopScroll()" οnmοuseοut="goon()"/>

            <div id="scroll_number">

                <ul>

                    <li class="scroll_number_over" οnmοuseοver="stopScroll(1)"  οnmοuseοut="goon()">1</li>

                    <li  οnmοuseοver="stopScroll(2)" οnmοuseοut="goon()">2</li>

                    <li  οnmοuseοver="stopScroll(3)" οnmοuseοut="goon()">3</li>

                    <li  οnmοuseοver="stopScroll(4)" οnmοuseοut="goon()">4</li>

                    <li  οnmοuseοver="stopScroll(5)" οnmοuseοut="goon()">5</li>

                    <li  οnmοuseοver="stopScroll(6)" οnmοuseοut="goon()">6</li>

                </ul>

            </div>

        </div>

        <div class="scroll_end"></div>

</div>

</body>

代码教程:(JS部分)

<script type="text/javascript">

window.οnlοad=function(){

timer=setInterval("imgScroll()",500);

var scroll_number=document.getElementById('scroll_number');

scrLi=scroll_number.getElementsByTagName('li');

scrLiLen=scrLi.length;

}

var n=2;

function imgScroll(){

for(var i=0;i<scrLiLen;i++){

scrLi[i].className="";

}

scrLi[n-1].className="scroll_number_over";

var imgObj=document.getElementById('dd_scroll');

imgObj.src="images/dd_scroll_"+n+".jpg";

n++;

if(n>6){

n=1;

}

}

function stopScroll(imgN){

if(imgN){

n=imgN;

imgScroll();

}

clearInterval(timer);

}

function goon(){

timer=setInterval('imgScroll()',500);

}

</script>

 

未经允许不得转载:作者:久全技术猿, 转载或复制请以 超链接形式 并注明出处 久全技术网
原文地址:《JS轮播图怎么做?》 发布于2019-09-18

分享到:
赞(0) 打赏
久全技术网-aidezy.com 久全技术网-www.52jqw.cn
久全技术网-aidezy.com 久全技术网-www.52jqw.cn

评论 抢沙发

3 + 8 =


JS轮播图怎么做?

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册