一段不错的代码JS的顶部轮播广告
2024-08-27 11:29:12
<!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>
最新文章
- AngularJS：自定义过滤器
- mfc 在VC的两个对话框类中传递参数的三种方法
- cookie and session
- 第二个Sprint冲刺第四天
- 汇编Ring 3下实现 HOOK API
- [Objective-c 基础 - 2.7] 构造方法、重写init方法
- 【转】通用分页用户控件(DataGrid,DataList,Repeater都可以用它来分页)
- 在CAD中怎么画圆形视口的详细说明
- Linux Shell编程（23）——文本处理命令
- O - 覆盖的面积 - hdu 1255（求面积）
- C语言数组作为函数参数
- Oracle基础（五）pl/sql进阶(分页过程)
- git变基--rebase
- codeforces div2 220 解题
- Unity Bolt插件 基本使用
- Mybatis实现高级映射一对一、一对多查询
- 良好习惯成就Better程序员
- Linxu-chsh命令
- linux下命令窗口中$和#的区别
- Java的三种代理模式：静态代理/JDK动态代理/Cglib动态代理