一段不错的代码JS的顶部轮播广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
/*容器*/
#content{
padding: 0px;
margin: 0px auto;
width: 966px;
height: 644px;
position: relative;
}
/*容器中图片样式*/
#content img{
width: 966px;
height: 644px;
position: absolute;
}
/*在光标图片上时,为小手状态*/
#content:hover{
cursor: pointer;
}
/*图片隐藏*/
.imgshow{
display: block;
}
/*图片显示*/
.imghide{
display: none;
}
#left,#right{
position: absolute;
width: 25px;
height: 50px;
background-color: gray;
color: white;
line-height: 50px;
text-align: center;
font-size: 22px;
border-radius:5px ;
}
#left{
top: 297px;
left: 0px;
}
#right{
top:297px;
margin-left: 940px;
}
#left:hover,#right:hover{
opacity: 0.5;
}
#nav:hover{
cursor: default;
}
#nav div{
width: 20px;
height: 20px;
border-radius: 10px;
margin-left: 10px;
margin-top: 5px;
float: left;
}
.divshow{
background-color: red;
}
.divhide{
background-color: lawngreen;
}
#nav div:hover{
opacity: 0.5;
}
#nav{
position: absolute;
width: 200px;
height: 30px;
margin-top:590px ;
margin-left: 25px;
} </style>
</head>
<body>
<!--存放图片、按钮、导航点-->
<div id="content"class="conClass">
<!--图片-->
<img src="data:image/1.jpg"class="imgshow"/>
<img src="data:image/2.jpg"class="imghide"/>
<img src="data:image/3.jpg"class="imghide"/>
<img src="data:image/4.jpg"class="imghide"/>
<img src="data:image/5.jpg"class="imghide"/>
<img src="data:image/6.jpg"class="imghide"/>
<div id="left"><</div>
<div id="right">></div>
<div id="nav">
<div class="divshow"></div>
<div class="divhide"></div>
<div class="divhide"></div>
<div class="divhide"></div>
<div class="divhide"></div>
<div class="divhide"></div>
</div>
</div>
<script type="text/javascript">
/*轮播图基本功能：
* 1图片切换
* 1.1图片在中间显示
* 1.2图片淡入淡出
* 2左右各有一个按钮
* 2.1点击左按钮，图片切换上一张
* 2.2点击右按钮，图片切换下一张
* 2.3鼠标滑过按钮，按钮颜色加深
* 3底部的导航点
* 3.1图片为第几张时，点在那第几张
* 3.2鼠标滑到第几个点，图片切换到第几张
* 4图片自动轮播
* 4.1默认自动下一张
* 4.2鼠标在图片范围时，停止切换
* 4.3鼠标离开图片范围，恢复自动切换
* 5鼠标放在图片范围时，变为小手样式
*/
/*实现思路
* 所有图片在同一位置
* 一张图片展示，其余图片隐藏
*/
//创建一个变量来存放当前图片的位置(索引位置)
var showindex=;
//定时器调用的方法
function timershow(){
/*样式切换图片
var index=$("img").index($(".imgshow"));
//隐藏当前图片
$("img").eq(index).removeClass("imgshow").addClass("imghide");
if(index==5){
index=-1
}
$("img").eq(index+1).removeClass("imghide").addClass("imgshow");
*/
var imageindex=showindex;
//点击按钮，下标向后移动
showindex++;
//切换到第一张图片，showindex改为0
if(showindex==){
showindex=
}
//返回当前图片的位置
//console.log(imageindex);
//上一张图片淡出
$("img").eq(imageindex).fadeOut();
//当前图片淡出
$("img").eq((imageindex+)%).fadeIn();
//上一个导航点样式修改为divhide
$("#nav div").eq(imageindex).removeClass("divshow").addClass("divhide");
//当前导航点样式修改为divshow
$("#nav div").eq((imageindex+)%).removeClass("divhide").addClass("divshow");
} $(function(){
//自动调用方法
var timer=setInterval(timershow,);
//上一张图片
$("#right").click(function(){
/*样式切换图片
var index=$("img").index($(".imgshow"));
//隐藏当前图片
$("img").eq(index).removeClass("imgshow").addClass("imghide");
if(index==5){
index=-1
}
$("img").eq(index+1).removeClass("imghide").addClass("imgshow");
*/
var imageindex=showindex;
//点击按钮，下标向后移动
showindex++;
//切换到第一张图片，showindex改为0
if(showindex==){
showindex=
}
//返回当前图片的位置
console.log(imageindex);
//上一张图片淡出
$("img").eq(imageindex).fadeOut();
//当前图片淡出
$("img").eq((imageindex+)%).fadeIn();
//上一个导航点样式修改为divhide
$("#nav div").eq(imageindex).removeClass("divshow").addClass("divhide");
//当前导航点样式修改为divshow
$("#nav div").eq((imageindex+)%).removeClass("divhide").addClass("divshow");
});
//下一张图片
$("#left").click(function(){
console.log("修改前："+showindex)
var imageindex=showindex;
//点击按钮，下标向后移动
showindex--;
//切换到最后一张图片，showindex变为5
if(showindex==-){
showindex=;
}
//上一张图片淡出
$("img").eq(imageindex).fadeOut();
//当前图片淡出
$("img").eq((imageindex-)%).fadeIn();
//上一个导航点样式修改为divhide
$("#nav div").eq(imageindex).removeClass("divshow").addClass("divhide");
//当前导航点样式修改为divshow
$("#nav div").eq((imageindex-)%).removeClass("divhide").addClass("divshow");
});
//导航点
$("#nav div").mouseover(function(){
console.log("修改前"+showindex);//修改前的位置
var divindex=$("#nav div").index($(this));//获取当前鼠标在哪一个点上
//选定的为当前的自己则不产生动画效果
if(divindex!=showindex)
{
//将以前的点的样式修改成divhide
$("#nav div").eq(showindex).removeClass("divshow").addClass("divhide");
//将现在的点的样式修改成div
$("#nav div").eq(divindex).removeClass("divhide").addClass("divshow");
//以前图片淡出
$("img").eq(showindex).fadeOut();
//新图片淡入
$("img").eq(divindex).fadeIn();
showindex=divindex;
console.log("修改后"+divindex);//修改后的位置
}
});
//鼠标在图片范围时停止切换(清除定时器)
$("#content").mouseenter(function() {
window.clearInterval(timer);
} );
$("#content").mouseleave(function(){
timer=window.setInterval(timershow,);
});
});
</script>
</body>
</html>
一段不错的代码JS的顶部轮播广告的更多相关文章
- js原生实现轮播图效果（面向对象编程）
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 原生js实现无缝轮播
原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- Bootstrap的js插件之轮播(carousel)
轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> < ...
- JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用原生JS实现一个轮播（包含全部代码和详细思路）
在我看来要想实现轮播主要是要知道当前位于的页面和即将位于的页面.这个案例是通过改变图片的透明度来实现轮播的效果. 我把涉及的知识点分为两个方面,分别是HTML+css和JS. 第一部分(html+cs ...
随机推荐
- 英语AquilariaCrassna奇楠沉香
越南奇楠沉香Aquilaria crassna是瑞香科沉香属植物. 奇楠香被喻为沉香中的钻石,其与身俱来的香气,淡雅宜人,汇集天地阴阳五行之气,而成为唯一能通三界之香品.长久以来,它被视为一种珍贵罕有 ...
- Gson+GsonFormat+Postman简单粗暴解析json
现在有时候之前的项目需要返回来修改bug看到以下这段代码 if (test != null) { JSONTokener jsonParser = new JSONTokener(test); JSO ...
- 【Linux】扩展阿里云数据盘分区和文件系统
扩容云盘只是扩大存储容量,不会扩容文件系统 一.准备工作 在扩展数据盘扩展分区和文件系统前,请提前完成以下工作. 创建快照以备份数据,防止操作失误导致数据丢失. 通过ECS控制台或者API扩容云盘容量 ...
- EM算法直观认识
Expectation Maximization, 字面翻译为, "最大期望". 我个人其实一直都不太理解EM算法, 从我个人的渊源来看, 之前数理统计里面的参数估计, 也是没有太 ...
- OpenStack Train版 简单部署流程
environment 1.网络平面 management(管理网络)→软件安装,组件通信 provider(提供实例网络)→:提供者网络:直接获取ip地址,实例之间直接互通 自服务网络(私有网络 ...
- python爬虫（4）——scrapy框架
安装 urllib库更适合写爬虫文件,scrapy更适合做爬虫项目. 步骤: 先更改pip源,国外的太慢了,参考:https://www.jb51.net/article/159167.htm 升级p ...
- 模仿51cto搜索框
做这个demo遇见的问题 1==>input type=submit有默认样式 padding:1px 6px所以将他去除 2==>input submit有默认样式 去除默认边框 bor ...
- 09-webpack--配置less
<!-- cnpm i less-loader less -D 要下载两个 在入口文件main.js文件中引入 import './css/index.less' webpack.config. ...
- 【洛谷P4542】 [ZJOI2011]营救皮卡丘（费用流）
洛谷 题意: 给出\(n\)个点,\(m\)条边,现在有\(k,k\leq 10\)个人从\(0\)号点出发前往\(n\)点. 规定若某个人想要到达\(x\)点,则\(1\)~\(x-1\)号点都有人 ...
- 201871010107-公海瑜《面向对象程序设计（java）》第十二周学习总结
201871010107-公海瑜<面向对象程序设计(java)>第十二周学习总结 项目 内容 ...