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

 更新时间:2016年09月01日 11:57:23   转载 作者:骑猪敲代码  
这篇文章主要介绍了JS仿hao123导航页面图片轮播效果,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧

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的动态增加类的实现方法

    Javascript的动态增加类的实现方法

    下面小编就为大家带来一篇Javascript的动态增加类的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • js根据给定的日期计算当月有多少天实现思路及代码

    js根据给定的日期计算当月有多少天实现思路及代码

    根据给定的日期计算当月有多少天,想必这样的功能大家都想实现吧,所以本文的出现相当有必要,接下来看下实现代码,感兴趣的朋友可以了解下,希望对你有所帮助
    2013-02-02
  • IE 下的只读 innerHTML

    IE 下的只读 innerHTML

    可以先使用 DOM 的 createElement 方法创建 tr 和 td,然后对 td 的 innerHTML 进行相应操作,最后用 appendChild 方法把创建的元素添加到 DOM 树中。这样在 IE 下就可以正常运行了。
    2009-08-08
  • 浅析javascript中的事件代理

    浅析javascript中的事件代理

    这篇文章主要介绍了浅析javascript中的事件代理,由一道面试题讲起,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 三种方式实现瀑布流布局

    三种方式实现瀑布流布局

    本文主要介绍了分别使用javascript,jquery,css实现瀑布流布局的方法。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • javascript中的return和闭包函数浅析

    javascript中的return和闭包函数浅析

    这篇文章主要介绍了javascript中的return和闭包函数浅析,至少可以让你搞懂那么多()是什么意思,需要的朋友可以参考下
    2014-06-06
  • json传值以及ajax接收详解

    json传值以及ajax接收详解

    下面小编就为大家带来一篇json传值以及ajax接收详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • ES6新增数据结构WeakSet的用法详解

    ES6新增数据结构WeakSet的用法详解

    WeakSet和Set类似,同样是元素不重复的集合,它们的区别是WeakSet内的元素必须是对象,不能是其它类型。接下来通过本文给大家详细介绍ES6新增数据结构WeakSet的用法,感兴趣的朋友一起看看吧
    2017-08-08
  • js实现手机web图片左右滑动效果

    js实现手机web图片左右滑动效果

    这篇文章主要为大家详细介绍了js实现手机web图片左右滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • JavaScript获取当前url路径过程解析

    JavaScript获取当前url路径过程解析

    这篇文章主要介绍了JavaScript获取当前url路径过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12

最新评论