网页直播源码&＃xff0c;JQuery实现轮播图方法
html
<!DOCTYPE html>
<html>
<head lang&＃61;"en"><meta charset&＃61;"UTF-8"><title> 广告图片轮播切换</title><link rel&＃61;"stylesheet" href&＃61;"css/style.css">
</head>
<body>
<div class&＃61;"adver" id&＃61;"adver"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><div class&＃61;"arrowLeft" id&＃61;"left"><</div><div class&＃61;"arrowRight" id&＃61;"right">></div>
</div><!-- 制作广告图片轮播切换效果&＃xff0c;默认第1个数字背景颜色为橙色&＃xff0c;其他背景为#333333&＃xff0c;数字颜色为白色
鼠标移至图片上出现左右箭头&＃xff0c;鼠标移出图片时&＃xff0c;左右箭头消失
单击左历右箭头时&＃xff0c;显示上一个/下一个图片&＃xff0c;当前数字背景为橙色&＃xff0c;其他数字背景为#333333&＃xff0c;第一个/最后一个图片显示时&＃xff0c;单击箭头时弹出提示
实现思路&＃xff1a;*** 使用数组保存网页中图片, 定义一个变量用于设置图片数组【索引】&＃xff0c;点击下一张变量加一&＃xff0c;改变网页背景url路径--><script src&＃61;"js/jquery-1.12.4.js"></script><script>$(function(){//使用数组保存网页中图片var img &＃61; ["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 &＃61; 1;//设置值为是为了li 元素的 li:nth-of-type("&＃43;i&＃43;")")相对应$("#right").click(function(){i&＃43;&＃43;;if(i>6){alert("已经是最后一张了");i&＃61;6;//最后一张图片return false;}var imgs &＃61; img[i-1];console.log("下一张"&＃43;i);console.log("url"&＃43;&＃39;(&＃39;&＃43;imgs&＃43;&＃39;)&＃39;);/* 改变广告背景图 */$("#adver").css("background","url"&＃43;&＃39;(&＃39;&＃43;imgs&＃43;&＃39;)&＃39;);/* 设置当前 li的背景 */$("li:nth-of-type("&＃43;i&＃43;")").css("background","orange");/* 设置其他 li的背景 */$("li:nth-of-type("&＃43;i&＃43;")").siblings().css("background","#333333");});/* 切换上一张 */$("#left").click(function(){i--;if(i<1){alert("已经是第一张了");i&＃61;1;return false;}var imgs &＃61; img[i-1];console.log("上一张"&＃43;i);console.log("url"&＃43;&＃39;(&＃39;&＃43;imgs&＃43;&＃39;)&＃39;);$("#adver").css("background","url"&＃43;&＃39;(&＃39;&＃43;imgs&＃43;&＃39;)&＃39;);/* 设置当前 li的背景 */$("li:nth-of-type("&＃43;i&＃43;")").css("background","orange");/* 设置其他兄弟 li的背景 */$("li:nth-of-type("&＃43;i&＃43;")").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: "&＃xfffd;&＃xfffd;&＃xfffd;ź&＃xfffd;"; 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: "&＃xfffd;&＃xfffd;&＃xfffd;ź&＃xfffd;";font-size: 28px;font-weight: bold;cursor: pointer;display: none;
}
.arrowLeft{left: 10px;}
.arrowRight{right: 10px;}
li:nth-of-type(1){background: orange;
}
以上就是 网页直播源码&＃xff0c;JQuery实现轮播图方法&＃xff0c;更多内容欢迎关注之后的文章
京公网安备 11010802041100号