使用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中,将引入的第一张图片转为 ...
随机推荐
- 自定义视图引擎,实现MVC主题快速切换
一个网站的主题包括布局,色调,内容展示等,每种主题在某些方面应该或多或少不一样的,否则就不能称之为不同的主题了.每一个网站至少都有一个主题,我这里称之为默认主题,也就是我们平常开发设计网站时的一个固定 ...
- linux的计划
我接触linux也有好几年了,至少有5年了.最近公司在搞内部培训,人人都可以报名培训别人.想到自己在linux浸淫多年,应该出来出一份力.一直以来想就linux写一个专题.今天刚好在做相关的ppt,借 ...
- 关于MVC中模型model的验证问题
今天在做项目练习的时候发现,MVC中使用自带的模型验证时会提前显示在界面上,比如下面所示: 这是什么原因了,是因为我在表示get请求的action里面返回了其界面所显示使用的model,我们知道mvc ...
- C#基础04
介绍:泛型介绍,索引,Foreach遍历的解释,yield方法,path文件操作,Directory类基本操作<目录> 一:泛型 百度资料:泛型是 2.0 版 C# 语言和公共语言运行 ...
- C#:Func的同步、异步调用
using System; namespace ActionDemo { class Program { static void Main(string[] args) { Console.Write ...
- C#模拟键盘输入(一)
主要使用了Windows API 实现,你可以在你C盘下的system32文件夹中找到user32.dll,函数的说明在MSDN都有,只需要拿名字去搜一下就行 根据窗口的类名和窗口名称获取窗口句柄,成 ...
- JS弹出框插件zDialog再次封装
zDialog插件网址:http://www.jq22.com/jquery-info2426 再次封装zDialog的代码: (function ($) { $.extend({ iDialog: ...
- 根据日期查询access数据库
获取指定日期的记录 1.select Field1 from A where format("yyyy-MM-dd",Field1)=#2011-10-07# 有时不能获取记录 ...
- 关于JQuery
整理jq基础常用(过于基础别喷): 1, $('div input[name]').css('','');//获取层中有name属性的标签 $('div input[name=txtname]').c ...
- 【Java每日一题】20161123
package Nov2016; import java.util.Scanner; public class Ques1123 { public static void main(String[] ...