一段不错的代码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 ...
随机推荐
- 汇编之JCC指令
版权声明:本文为博主原创文章,转载请附上原文出处链接和本声明.2019-09-06,21:59:16.作者By-----溺心与沉浮----博客园 JCC指令决定它跳不跳转跟别的没关系,只跟EFLAG标 ...
- 【分布式搜索引擎】Elasticsearch之如何安装Elasticsearch
在Macos上安装 一.下载安装过程 最新版本下载地址: https://www.elastic.co/cn/downloads/elasticsearch 历史版本下载地址: https://www ...
- .net 4.0+ 应用接入openid Server步骤
.net 4.0+ 应用接入openid Server步骤: Requirements:Microsoft.AspNet.Mvc 5.2.4+ 1 确认应用是否是katana启动(项目引用了owin, ...
- shell 多行重定向方法（多重嵌套）
这里讲的是多重嵌套.没用过 EOF的朋友请参考其他基础贴 在自动化运维中,常常需要shell脚本.在自动化创建脚本时,会遇到脚本内容里有用EOF重定向到配置文件的代码. 这样就不能用EOF来创建脚本了 ...
- 关于JMeter线程组中线程数，Ramp-Up Period，循环次数之间的设置概念
关于JMeter线程组中线程数,Ramp-Up Period,循环次数之间的设置概念 笔者是个刚刚踏入压力测试领域不到2个月的小菜,这里分享一下线程组中3个参数之间关系的个人见解,不喜请!喷!,望大家 ...
- Comet 67E: ffort
题目传送门:Comet 67E. 用了个傻逼做法 A 了这题,欢迎观赏睿智做法! 题意简述: 题目说得很清楚了(这次是我不想写了). 题解: 为了方便,令 \(m\) 为敌人数,\(n\) 为己方士兵 ...
- 201871010108-高文利《面向对象程序设计（java）》第十二周学习总结
项目 内容 这个作业属于哪个课程 <任课教师博客主页链接> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址> ht ...
- 使用构造函数 Boolean 创造的对象不是布尔值，而是对象，typeof new Boolean(1) == 'object'
注意,使用构造函数 Boolean 创造的对象不是布尔值: 事实上 new Boolean() 返回的是一个 Boolean 对象: typeof new Boolean(1) == 'object' ...
- Excel-逻辑函数
1.Excel计算的两种方式 Excel计算的两种方式: 1.公式:一些运算符和数值组成的数学表达式 2.函数:是Excel内部设置好的运算模块 2.EXcel的运算符 3.运算顺序 4.excel公 ...
- 1.Vue前端核心分析
1.Vue SoC:关注点分离原则 网络通信:axios 页面跳转:vue-router 页面管理:vuex Vue-UI:ICE.ElementUI 集大成者:MVVM+虚拟DOM 2.MVVM 异 ...