JS仿hao123导航页面图片轮播效果


Posted in Javascript onSeptember 01, 2016

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导航页面图片轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 #Javascript
AngularJs bootstrap详解及示例代码
Sep 01 #Javascript
JavaScript数据类型学习笔记分享
Sep 01 #Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 #Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 #Javascript
在web中js实现类似excel的表格控件
Sep 01 #Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 #Javascript
You might like
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
简单JS代码压缩器
2006/10/12 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
python模拟表单提交登录图书馆
2018/04/27 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
python dlib人脸识别代码实例
2019/04/04 Python
Python常用外部指令执行代码实例
2020/11/05 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
优秀老员工获奖感言
2014/02/15 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python