js制作网站首页图片轮播特效代码
本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码，供大家参考，具体内容如下
<!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>
具体效果我是仿照hao123导航页面图片轮播的效果，大家可以去那个网站参考
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生js实现图片轮播特效
本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习. 运行效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0
-
轻松实现javascript图片轮播特效
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下 还是先来看一看效果图: 具体代码: 一.HTML代码分析 <body> <div class="dota"> <ul id="content"> <li><a href="#"><img src="images/1.jpg"/></a>&l
-
js图片轮播特效代码分享
本文实例讲述了js图片轮播特效,分享给大家供大家参考.具体如下: 这是一款基于javascript实现的图片轮播特效代码,有缩略图和标题,可以自定义标题. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播特效代码如下 <head> <meta http-equiv="Content-Type" co
-
基于javascript实现样式清新图片轮播特效
本文实例为大家分享了javascript实现图片轮播特效,供大家参考,具体内容如下 一.实现效果 如上图: 1.图片自动依次轮换,每轮换到一张图片,下面对应的小图标出现红色边框,并显示对应的图片名称 2.鼠标放到大图片上面的时,图片停止轮换,一直显示当前图片:鼠标移开后图片继续轮换 3.鼠标移到小图标上时,大图片区域会显示对应的大图:鼠标移开则从当前图片开始继续轮换 二.代码 <!DOCTYPE html> <html> <head lang="en"&g
-
原生js和jquery实现图片轮播特效
(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div
-
JavaScript实现带标题的图片轮播特效
图片轮播,在一些购物网站上运用的不胜枚举,下面简单介绍一下图片轮播的实现. 如图 CSS代码: <style type="text/css"> .body{ width:524px; border:solid 1px #666; margin-left:auto; margin-right:auto; } .bg{ background-color:#E0E0E0; height:20px; border-top:solid 1px #B4B4B4; } .number{
-
让图片跳跃起来 javascript图片轮播特效
图片轮播效果,在现在的网站的首页,差不多是必备的效果显示. 所以我从三个方面来讲解这一效果的简单实现. 图片跳动起来 图片序列控制的实现 前后按钮控制的实现 这篇文章来看图片按照间隔时间进行切换. 我们先把结构代码完成,这个我就不做详细的讲解了.看效果 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <sty
-
js仿小米官网图片轮播特效
小米官网给我的感觉是大气.干净.很多特效的加入让人觉得耳目一新,big满满. 看到他们首页的轮播图实现挺有意思,于是自己模仿着写了一个. 大致的感觉出来了,贴个图先: 通过前端神器chrom的F12观察小米官网的html代码,不难看到他们使用5个div包裹图片并使用了定位通过z-index来控制div层级,通过控制每个div的opacity属性和display属性进行元素的显示.隐藏. 截图如下(红框内的opacity属性): 好的,实现的手段知道了,那么页面布局先搞出来. <!DOCTYPE
-
原生js轮播特效
作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评: 首先css代码 a{text-decoration:none;color:#3DBBF5;} *{ margin: 0; padding: 0; } .wrapper{ width: 400px; height: 300px; margin: 100px auto; } #lunbo{ position: relative; overflow: hidden; } #list{ position:
-
很棒的一组js图片轮播特效
大家经常在网页中使用轮播效果,本文为大家分享的是一组图片轮播特效,希望大家喜欢 先看一眼效果图: 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{padding:0;margin:0;} #content{width:550px;height:300px;margin:50