使用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="data:images/meinv1.jpg" alt="">
<img src="data:images/meinv2.jpg" alt="">
<img src="data:images/meinv3.jpg" alt="">
<img src="data:images/meinv4.jpg" alt="">
<img src="data:images/meinv5.jpg" alt="">
<img src="data: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实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
- Flutter实战视频-移动电商-10.首页_FlutterSwiper轮播效果制作
10.首页_FlutterSwiper轮播效果制作 博客地址: https://jspang.com/post/FlutterShop.html#toc-5c2 flutter_swiper http ...
- js图片轮播效果实现代码
首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
- 超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...
- ios图片轮播效果
代码地址如下:http://www.demodashi.com/demo/11959.html ImageCarousel 简单封装的图片轮播器 内存过大由于我加载的图片分辨率较高(4k) 文件目录 ...
- axure 动态面板实现图片轮播效果（淘宝）
淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现 工具/原料 axure7.0 方法/步骤 下载需要轮播的图片 将图片引入至axure中,将引入的第一张图片转为 ...
随机推荐
- ASP.NET 5中的那些K
ASP.NET 5最大的变化是什么?首当其冲的就是多了很多K,K表示的是ASP.NET vNext的项目代号“Project K”,但很容易让人想到一个汉字——“坑”,希望K不要成为“坑”的缩写. K ...
- 邻接表有向图(一)之 C语言详解
本章介绍邻接表有向图.在"图的理论基础"中已经对图进行了理论介绍,这里就不再对图的概念进行重复说明了.和以往一样,本文会先给出C语言的实现:后续再分别给出C++和Java版本的实现 ...
- Deep learning：四十一(Dropout简单理解)
前言 训练神经网络模型时,如果训练样本较少,为了防止模型过拟合,Dropout可以作为一种trikc供选择.Dropout是hintion最近2年提出的,源于其文章Improving neural n ...
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- 对于placeholder浏览器兼容性（包括密码输入框）解决办法
将以下脚本和样式引入你的页面(对于密码输入框,要设置ID属性值): <script type="text/javascript"> $(function () { // ...
- hadoop的概念
hadoop的概念 网上会经常遇到各种hadoop的概念,Hive,HBase,Hdfs都各是什么呢? 首先从hdfs说起,hdfs是分布式文件系统,它把集群当作单机一样做文件操作,文件可能存在于多个 ...
- 阅读《LEARNING HARD C#学习笔记》知识点总结与摘要二
今天继续分享我的阅读<LEARNING HARD C#学习笔记>知识点总结与摘要二,仍然是基础知识,但可温故而知新. 七．面向对象 三大基本特性: 封装:把客观事物封装成类,并隐藏类的内部 ...
- IStream 接口
IStream 接口 https://msdn.microsoft.com/en-us/library/windows/apps/aa380034 IStream接口允许您读取和写入 stream ...
- c# 打开指定的网址
System.Diagnostics.Process.Start(url);
- 控制器描述者(ControllerDescriptor)，行为方法描述者(ActionDescriptor)，参数描述者(ParameterDescriptor)的小结
Model的绑定是在Action方法绑定参数时发生的,这个绑定的参数过程要用到的元数据来自于控制器,行为方法和参数的描述者ContrllerDescriptor,ActionDescriptor和Pa ...