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 相关文章推荐
js的闭包的一个示例说明
Nov 18 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
Javascript学习指南
2014/12/01 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
Python中的urllib模块使用详解
2015/07/07 Python
python脚本监控docker容器
2016/04/27 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
python requests.post带head和body的实例
2019/01/02 Python
python实现狄克斯特拉算法
2019/01/17 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
工程部主管岗位职责
2013/11/17 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
师德学习感言
2014/01/31 职场文书
小班开学寄语
2014/04/04 职场文书
小学生植树节活动总结
2014/07/04 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
好人好事新闻稿
2015/07/17 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
如何优化vue打包文件过大
2022/04/13 Vue.js