jquery 广告轮播图
轮播图
/*轮播图基本功能：
* 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鼠标放在图片范围时，变为小手样式
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.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=0;
//定时器调用的方法
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==6){
showindex=0
}
//返回当前图片的位置
//console.log(imageindex);
//上一张图片淡出
$("img").eq(imageindex).fadeOut(1000);
//当前图片淡出
$("img").eq((imageindex+1)%6).fadeIn(1000);
//上一个导航点样式修改为divhide
$("#nav div").eq(imageindex).removeClass("divshow").addClass("divhide");
//当前导航点样式修改为divshow
$("#nav div").eq((imageindex+1)%6).removeClass("divhide").addClass("divshow");
} $(function(){
//自动调用方法
var timer=setInterval(timershow,2000);
//上一张图片
$("#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==6){
showindex=0
}
//返回当前图片的位置
console.log(imageindex);
//上一张图片淡出
$("img").eq(imageindex).fadeOut(1000);
//当前图片淡出
$("img").eq((imageindex+1)%6).fadeIn(1000);
//上一个导航点样式修改为divhide
$("#nav div").eq(imageindex).removeClass("divshow").addClass("divhide");
//当前导航点样式修改为divshow
$("#nav div").eq((imageindex+1)%6).removeClass("divhide").addClass("divshow");
});
//下一张图片
$("#left").click(function(){
console.log("修改前："+showindex)
var imageindex=showindex;
//点击按钮，下标向后移动
showindex--;
//切换到最后一张图片，showindex变为5
if(showindex==-1){
showindex=5;
}
//上一张图片淡出
$("img").eq(imageindex).fadeOut(1000);
//当前图片淡出
$("img").eq((imageindex-1)%6).fadeIn(1000);
//上一个导航点样式修改为divhide
$("#nav div").eq(imageindex).removeClass("divshow").addClass("divhide");
//当前导航点样式修改为divshow
$("#nav div").eq((imageindex-1)%6).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(1000);
//新图片淡入
$("img").eq(divindex).fadeIn(1000);
showindex=divindex;
console.log("修改后"+divindex);//修改后的位置
}
});
//鼠标在图片范围时停止切换(清除定时器)
$("#content").mouseenter(function() {
window.clearInterval(timer);
} );
$("#content").mouseleave(function(){
timer=window.setInterval(timershow,2000);
});
});
</script>
</body>
</html>
jquery 广告轮播图的更多相关文章
- iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 用jQuery实现轮播图效果，js中的排他思想
---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 自实现PC端jQuery版轮播图
最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...
- JQuery实现轮播图及其原理
源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...
- Jquery无缝轮播图的制作
轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...
- jquery优化轮播图2
继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- jquery改造轮播图1
g改造轮播图1:https://www.cnblogs.com/huanghuali/p/8677338.html <!DOCTYPE html> <html lang=" ...
- JavaScripts广告轮播图以及定时弹出和定时隐藏广告
轮播图: 函数绑定在body标签内 采用3张图,1.jpg 2.jpg 3.jpg 利用定时任务执行设置图片属性 src 利用for循环可以完成3秒一次 一替换. 定时弹出广告: 由于bod ...
随机推荐
- 配置interfaces
demo1 # This file describes the network interfaces available on your system # and how to activate th ...
- Ubuntu 14.04 源
清华源https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu/ ubuntu 14.04 官方源 # deb cdrom:[Ubuntu 14.04.4 LT ...
- springboot开启gzip压缩
springboot 2.x开启gzip压缩 1.application.yml配置 server: compression: enabled: true min-response-size: mim ...
- ZR#959
ZR#959 解法: 对于一个询问,设路径 $ (u, v) $ 经过的所有边的 $ gcd $ 为 $ g $,这可以倍增求出. 考虑 $ g $ 的所有质因子 $ p_1, p_2, \cdots ...
- meshing-球体网格划分
原视频下载地址:https://yunpan.cn/cqwvgQQ2xy3G6 访问密码 a54b
- [RK3399] 汇顶gt9xx触摸屏在RK原始代码调试
CPU:RK3399 系统:Android 7.1 触摸屏:1024x768 8inch 触摸IC:GT9271 基于RK3399,从瑞芯微服务器更新到最新的 Android 7.1 代码中,瑞芯 ...
- Linux make menuconfig打开失败
OS:Ubuntu 16.04 LTS 使用“make menuconfig”配置kernel时,提示make menuconfig打开失败 $ make menuconfig *** Unable ...
- madam、Linux LVM的使用
.RaidRAID(独立冗余磁盘阵列)概念:RAID技术通过把多个硬盘设备组合成一个容量更大.安全性更好的磁盘阵列,并把数据切割成多个区段后分别存放在各个不同的物理硬盘设备上,然后利用分散读写技术来提 ...
- gis空间分析案例_坐标文件高斯投影变换地理处理工具
gis空间分析案例_坐标文件投影变换地理处理工具 商务科技合作:向日葵,135—4855__4328,xiexiaokui#qq.com 功能: 对文件进行投影变换 特点: 1. 地理处理工具,可以与 ...
- Django学习笔记009-django models进行数据库增删查改
引入models的定义 from app.models import myclass class myclass(): aa = models. CharField (max_length=No ...