一段不错的代码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 ...
随机推荐
- javascript 和oc交互
http://www.apkbus.com/android-127963-1-1.html
- vue学习指南：第九篇(详细) - Vue的 Slot-插槽
Slot v-slot 插槽元素 浏览器在解析时候首先把它当作标签来解析,只有遇到不认识的就不管了,直接跳过,当你发现是组件,在以组件形式解析. 使用插槽的好处? 比如一个网站 分布顶部都是一样的, ...
- 如何在unbuntu 16.04上在线安装vsftpd
本文涉及命令如下: # service vsftpd status //查询vsftp服务状态 # apt-get remove vsftpd //卸载vsftpd # apt-get install ...
- Linux(Centos7)搭建LAMP(Apache+PHP+Mysql环境)
目录 Linux搭建LAMP(Apache+PHP+Mysql环境)Centos7 一. 检查系统环境 1.确认centos版本 2.检查是否安装过apache 3.检查是否安装过Mysql 4.清理 ...
- jquery 监听不起效果的小问题汇总
在写前端页面时,因为我是用jquery添加新的html字符串来实现动态添加.删除,每次新添加都需要生成新的id,当我对新的id进行监听时,却不起作用. 思考了很多方法,开始我以为,如果将监听的语句$( ...
- constant timer(固定定时器),constant throughput timer(常数吞吐量定时器);多个请求，某个请求a下，设置常数吞吐量定时器，模式：all active threads(shared)则所有请求吞吐量一致；
1.两请求之间添加'固定定时器' 1000ms,那么两请求发送间隔时间是多少? 1000ms吗? 由实验得出,2个请求发送间隔时间 = 1000ms + 第一个请求时间(发出至完成后时间) 2.单个请 ...
- Nginx内置变量以及日志格式变量
$args #请求中的参数值$query_string #同 $args$arg_NAME #GET请求中NAME的值$is_args #如果请求中有参数,值为"?",否则为空字符 ...
- SpringBoot相关的注解
一.注解(annotations)列表 @SpringBootApplication:包含了@ComponentScan.@Configuration和@EnableAutoConfiguration ...
- WARN Connection to node 2 could not be established. Broker may not be available. (
启动 kafka 集群, 出现这个问题 WARN Connection to node 2 could not be established. Broker may not be available. ...
- javaweb监听器实现与原理
参考:https://www.cnblogs.com/lxp503238/p/6678688.html https://blog.csdn.net/CPOHUI/article/details/888 ...