使用jQuery快速高效制作网页交互特效第五章上机练习四制作广告图片轮播切换效果

轮播应有的功能大致都有，分享给一些在学的朋友参考学习。

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title> 广告图片轮播切换</title><link rel="stylesheet" href="css/style.css"><script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="adver"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
<script type="text/javascript">$(function () {//记录当前位置var index = 0;//显示左右侧按钮$(".adver").hover(function () {$(".arrowLeft,.arrowRight").toggle();})//左侧按钮$(".arrowLeft").click(function () {index--;if (index < 0) {index = 5;}$(".adver").css("background","url(images/adver0" + (index+1) + ".jpg)");$("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black");});//右侧按钮$(".arrowRight").click(function () {index++;if(index > 5) {index = 0;}$(".adver").css("background","url(images/adver0" + (index+1) + ".jpg)");$("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black");});//切换图片$("ul li").hover(function () {index = $(this).index();$(".adver").css("background","url(images/adver0" + (index+1) + ".jpg)");$("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black");});//定时滚动var runId = "";function run() {runId = setInterval(function(){index++;if(index > 5) {index = 0;}$(".adver").css("background","url(images/adver0" + (index+1) + ".jpg)");$("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black");},1000);}run();//移入暂停和移出恢复定时滚动$(".adver").mousemove(function () {clearInterval(runId);}).mouseout(function () {run();})})
</script>
</body>
</html>

使用jQuery快速高效制作网页交互特效第五章上机练习四制作广告图片轮播切换效果相关推荐

使用JQuery快速高效制作网页交互特效第五章所有上机
上机一 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8& ...
jQuery实现广告图片轮播切换
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
使用JQuery快速高效制作网页交互特效第六章所有上机
上机一样式 body,h1,h2,h3,p,ul,li,dl,dt,dd,div,section{margin: 0;padding: 0;} body{font-family: "微软雅 ...
Jquery 广告图片轮播切换
要点: 1.鼠标移至图片上出现左右箭头,鼠标移出图片时,左右箭头消失 2.单击左右箭头时,显示上一个/下一个图片,当前数字背景为橙色,其他数字背景为#333333,第一个/最后一个图片显示时,单击箭 ...
15款jQuery带缩略图的图片轮播切换特效代码
JQuery宽屏电影大图幻灯片轮播切换代码 jquery带文字缩略图的图片轮播切换代码 jQuery OwlCarousel图片滚动插件世界杯图片轮播滚动代码 jQuery仿中国建设银行带缩略图控制滚 ...
横向全屏滑动插件_【案例】JQuery横向手风琴图片轮播切换代码
点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源哈喽大家好,又到了每周二经典案例环节啦~同学们还想了解哪些网页知识今天段老师给同学们带来的是JQuery横向手 ...
js 图片打碎_html5 tweenmax.js打碎玻璃图片轮播切换特效
特效描述:html5 tweenmax.js 打碎玻璃图片轮播切换特效.html5碎玻璃图片切换特效,tweenmax.js实列代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 co ...
十个jQuery的幻灯片图片轮播切换插件[转]
1.Simple Controls Gallery 是基于jQuery的一个幻灯插件,非常不错,详细演示及下载请点击下面的链接 http://www.dynamicdrive.com/dynamici ...
FlexSlider图片轮播切换jQuery插件
下载地址 flexSlider是一款强大的图片轮播插件.参数说明animation: "slide", // String: ["fade" ...

使用jQuery快速高效制作网页交互特效第五章上机练习四制作广告图片轮播切换效果

使用jQuery快速高效制作网页交互特效第五章上机练习四制作广告图片轮播切换效果相关推荐

最新文章

热门文章

使用jQuery快速高效制作网页交互特效 第五章 上机练习四 制作广告图片轮播切换效果

使用jQuery快速高效制作网页交互特效 第五章 上机练习四 制作广告图片轮播切换效果相关推荐

最新文章

热门文章

使用jQuery快速高效制作网页交互特效第五章上机练习四制作广告图片轮播切换效果

使用jQuery快速高效制作网页交互特效第五章上机练习四制作广告图片轮播切换效果相关推荐