hao123网站大家都很熟悉吧,具体的效果不用我多说吧,感兴趣的朋友可以去参考效果图,下面小编给大家分享下实现代码思路,当然大家可以根据需求适当的添加修改删除代码。
关键代码如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ width: 600px; height: 750px; position: relative; margin:30px auto 0; overflow: hidden; } #box{ width: 600px; height: 750px; position: absolute; top: 0px; left: 0px; overflow: hidden; /*overflow-x:auto;*/ } #box #con{ width: 6000px; height: 750px; overflow: hidden; } #con img{ float: left; width: 600px; height: 750px; } #btnL{ position: absolute; left: 0px; top: 366px; width: 36px; height: 36px; background: url(images/btnL.png) 0 0 no-repeat; cursor: pointer; } #btnR{ position: absolute; right: 0px; top: 366px; width: 36px; height: 36px; background: url(images/btnR.png) 0 0 no-repeat; cursor: pointer; } #num{ position: absolute; bottom: 10px; left: 148px; overflow: hidden; list-style: none; } #num li{ float: left; margin:0 5px; font-size: 16px; line-height: 25px; height: 25px; width: 25px; background: #ccc; text-align: center; cursor: pointer; } #num li.select{ background-color: green; color: white; } </style> </head> <body> <div class="warp"> <div id="box"> <div id="con"> <img src="images/meinv1.jpg" alt=""> <img src="images/meinv2.jpg" alt=""> <img src="images/meinv3.jpg" alt=""> <img src="images/meinv4.jpg" alt=""> <img src="images/meinv5.jpg" alt=""> <img src="images/meinv6.jpg" alt=""> </div> </div> <div id="btnL"></div> <div id="btnR"></div> <ul id="num"> <li class="select">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <script> var box=document.getElementById('box'); var con=document.getElementById('con'); var imgs=con.getElementsByTagName('img'); var btnL=document.getElementById('btnL'); var btnR=document.getElementById('btnR'); var num=document.getElementById('num'); var lis=num.getElementsByTagName('li'); var timer1=null,timer2=null; var imgw=imgs[0].clientWidth; var x=0; function imgScroll(){//图片切换 var start=box.scrollLeft; var end=imgw*x; var change=end-start; var minstep=0; var maxstep=30; var stepLength=change/maxstep; clearInterval(timer2); timer2=setInterval(function(){ minstep++; // console.log(minstep); if (minstep>=maxstep) { clearInterval(timer2); } start+=stepLength; box.scrollLeft=start; },20) for (var i = 0; i < lis.length; i++) { lis[i].className='none'; } lis[x].className='select'; } function move(){//默认向左每隔3s滚动 clearInterval(timer1); timer1=setInterval(function(){ x++; if (x>=imgs.length) { x=0; } imgScroll(); for (var i = 0; i < lis.length; i++) { lis[i].className='none'; lis[x].className='select'; } },3000); } move();//启动默认滚动函数; btnR.onclick=function(){ clearInterval(timer1); x++; if (x>=imgs.length) { x=0; } imgScroll(); move(); } btnL.onclick=function(){ clearInterval(timer1); x--; if (x<0) { x=imgs.length-1; } imgScroll(); move(); } for (var i = 0; i < lis.length; i++) { lis[i].index=i; lis[i].onclick=function(){ x=this.index; imgScroll(); move(); } } </script> </body> </html>
以上所述是小编给大家介绍的JS仿hao123导航页面图片轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
本文向大家介绍js仿小米官网图片轮播特效,包括了js仿小米官网图片轮播特效的使用技巧和注意事项,需要的朋友参考一下 小米官网给我的感觉是大气、干净。很多特效的加入让人觉得耳目一新,big满满。 看到他们首页的轮播图实现挺有意思,于是自己模仿着写了一个。 大致的感觉出来了,贴个图先: 通过前端神器chrom的F12观察小米官网的html代码,不难看到他们使用5个div包裹图片并使用了定位通过z-in
本文向大家介绍图解js图片轮播效果,包括了图解js图片轮播效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲解了js图片轮播效果的实现原理,分享给大家供大家参考,具体内容如下 两种图片轮播实现方案,先来看效果对比: 方案一: 原理:将图片摆成一行,从左到右依次滚动进入视野,当滚动到最后一张时,从右到左滚动回到第一张。这么做的缺点是,滚动到最后一张时,会有一个反向,导致整个滚动过程不连贯。
本文向大家介绍js实现图片轮播效果,包括了js实现图片轮播效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲解了js实现图片轮播效果代码,分享给大家供大家参考,具体内容如下 运行代码如下 具体代码如下 插件是基于jQuery写的,主要实现的功能:自动播放、鼠标悬停、左右箭头控制+禁止点击 CSS样式: HTML布局( a标签最好加个title属性 ): JS脚本插件: 页面调用: 希望本文所
本文向大家介绍js手动播放图片实现图片轮播效果,包括了js手动播放图片实现图片轮播效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js图片轮播具体实现代码,供大家参考,具体内容如下 一、html代码部分(et.thtml): 二、css代码部分(styleet,css): 三、js代码部分(et.js): 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教
本文向大家介绍js图片轮播效果实现代码,包括了js图片轮播效果实现代码的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现图片轮播效果的具体代码,供大家参考,具体内容如下 首先给大家看一看js图片轮播效果,如下图 具体思路: 一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index 二、添加定时器,每隔2秒钟index递
本文向大家介绍js图片轮播手动切换效果,包括了js图片轮播手动切换效果的使用技巧和注意事项,需要的朋友参考一下 利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示、推荐商品之类的栏目。它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果。 不需要调用jquery,初始化简单,使用非常的简单,便利