网页直播源码，JQuery实现轮播图方法

网页直播源码，JQuery实现轮播图方法
html

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title> 广告图片轮播切换</title><link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="adver" id="adver"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><div class="arrowLeft" id="left"><</div><div class="arrowRight" id="right">></div>
</div><!-- 制作广告图片轮播切换效果，默认第1个数字背景颜色为橙色，其他背景为#333333，数字颜色为白色
鼠标移至图片上出现左右箭头，鼠标移出图片时，左右箭头消失
单击左历右箭头时，显示上一个/下一个图片，当前数字背景为橙色，其他数字背景为#333333，第一个/最后一个图片显示时，单击箭头时弹出提示
实现思路：*** 使用数组保存网页中图片, 定义一个变量用于设置图片数组【索引】，点击下一张变量加一，改变网页背景url路径--><script src="js/jquery-1.12.4.js"></script><script>$(function(){//使用数组保存网页中图片var img = ["images/adver01.jpg","images/adver02.jpg","images/adver03.jpg","images/adver04.jpg","images/adver05.jpg","images/adver06.jpg"];$("#adver").mouseover(function(){$(this).children("div").show();}).mouseout(function(){$(this).children("div").hide();});/* 切换下一张 */var i = 1;//设置值为是为了li 元素的 li:nth-of-type("+i+")")相对应$("#right").click(function(){i++;if(i>6){alert("已经是最后一张了");i=6;//最后一张图片return false;}var imgs = img[i-1];console.log("下一张"+i);console.log("url"+'('+imgs+')');/* 改变广告背景图 */$("#adver").css("background","url"+'('+imgs+')');/* 设置当前 li的背景 */$("li:nth-of-type("+i+")").css("background","orange");/* 设置其他 li的背景 */$("li:nth-of-type("+i+")").siblings().css("background","#333333");});/* 切换上一张 */$("#left").click(function(){i--;if(i<1){alert("已经是第一张了");i=1;return false;}var imgs = img[i-1];console.log("上一张"+i);console.log("url"+'('+imgs+')');$("#adver").css("background","url"+'('+imgs+')');/* 设置当前 li的背景 */$("li:nth-of-type("+i+")").css("background","orange");/* 设置其他兄弟 li的背景 */$("li:nth-of-type("+i+")").siblings().css("background","#333333");});});</script>
</body>
</html>

style.css

ul,li{padding: 0;margin: 0; list-style: none;}
.adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}
ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "΢���ź�"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
.arrowLeft,.arrowRight{position: absolute;width: 30px;background:rgba(0,0,0,0.2);height: 50px;line-height: 50px;text-align: center;top:200px;z-index: 150;font-family: "΢���ź�";font-size: 28px;font-weight: bold;cursor: pointer;display: none;
}
.arrowLeft{left: 10px;}
.arrowRight{right: 10px;}
li:nth-of-type(1){background: orange;
}

以上就是网页直播源码，JQuery实现轮播图方法，更多内容欢迎关注之后的文章

网页直播源码，JQuery实现轮播图方法相关推荐

实现网页直播源码的直播与视频回放功能
流程介绍网页直播源码直播.视频回放大致流程:获取视频流或本地音视频文件,将流推入到流媒体服务器当中,在 web 端使用合适的 js 拉流并播放音视频: 三种网页直播源码常见的流媒体协议介绍(RTMP ...
php直播pk规则,直播源码中的主播PK功能是如何实现的
直播行业为赢得更广泛用户的青睐,自然要不断开发更有趣的玩法.模式,在直播源码中加入主播PK功能就是一种提高直播互动性.激发用户好胜心的方法,一方面这种方法可以吸引更多用户观看,增加主播的曝光率,另一方 ...
网页直播源码，实现界面左右滑动
网页直播源码,实现界面左右滑动的相关代码 @interface ViewController ()<UIPageViewControllerDataSource, UIPageViewContr ...
网页直播源码与编解码
在网页直播源码开发过程中我们一定会涉及到音视频压缩编码知识,压缩编码过程是一种有损的压缩,它的目的是减少音视频文件所需占用的空间和带宽并提高兼容性,在此期间还要尽可能保障音视频"不失真&qu ...
jQuery实现轮播图（无缝轮播，附效果图），代码有详解。
jQuery实现轮播图这里用了一些有颜色的div块当做图片,复制之后可以直接用,有需要的话再根据自己的需求替换就可以了. 功能: (1)左右无缝轮播. (2)鼠标移上去会停止,移走继续动. (3)点 ...
用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
ajax轮播图控件,基于json数据的jquery卡片轮播图插件
这是一款基于json数据的jquery卡片轮播图插件.该插件通过ajax来获取卡片的信息,动态显示卡片.它还提供不使用ajax的方式来获取数据,和其它一些api接口. 使用方法在页面中引入jquer ...
基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧使用需要准备(往下滑动会看到): ...
在线直播源码，npm设置镜像的方法可切换
在线直播源码,npm设置镜像的方法可切换一.通过命令配置淘宝镜像切换为镜像命令(安装一些package容易报错) npm config set registry https://registry ...

网页直播源码，JQuery实现轮播图方法

网页直播源码，JQuery实现轮播图方法相关推荐

最新文章

热门文章