Jquery 广告图片轮播切换

要点：

1、鼠标移至图片上出现左右箭头，鼠标移出图片时，左右箭头消失

2、单击左右箭头时，显示上一个/下一个图片，当前数字背景为橙色，其他数字背景为#333333，第一个/最后一个图片显示时，单击箭头时继续显示轮播图片

3、定时1秒换一张图片，轮播出图片，直到最后一张时换第一张轮播，依次类推。

4、鼠标移至图片上，定时就消失；鼠标移出图片，定时就开始轮播图片。

页面效果如上:

adv.html页面

<head lang="en"><meta charset="UTF-8"><title> 广告图片轮播切换</title><link rel="stylesheet" href="css/adv.css"></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></body>

adv.css

ul,
li {padding: 0;margin: 0;list-style: none;
}.adver {margin: 0 auto;width: 590px;overflow: hidden;height: 470px;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: 40px;line-height: 40px;text-align: center;top: 200px;z-index: 150;font-family: "微软雅黑";font-size: 25px;font-weight: bold;cursor: pointer;display: none;color:snow;
}.arrowLeft {left: 10px;
}.arrowRight {right: 10px;
}.bg{background: orange;
}

adv.js

$(function() {//添加第一个样式$("li:first").addClass("bg");//鼠标移动  adver$(".adver").mouseover(function() {$(".arrowLeft").show();$(".arrowRight").show();}).mouseout(function() {$(".arrowLeft").hide();$(".arrowRight").hide();});//图片数组var imgs = new Array("adver01.jpg", "adver02.jpg", "adver03.jpg", "adver04.jpg", "adver05.jpg", "adver06.jpg");//统计个数var count = 0;//单击右 边的>$(".arrowRight").click(function() {//判断if(count == imgs.length - 1) {count=0;} else {count++; //累计}$(".adver").css("background", "url(images/" + imgs[count] + ")"); //添加图片$('li:eq(' + count + ')').addClass("bg"); //添加圆圈背景$('li:eq(' + count + ')').siblings().removeClass("bg"); //删除前面的圆圈背景});//单击左边的>$(".arrowLeft").click(function() {//判断if(count == 0) {count=imgs.length - 1;} else {count--; //累计           }$(".adver").css("background", "url(images/" + imgs[count] + ")"); //添加图片$('li:eq(' + count + ')').addClass("bg"); //添加圆圈背景$('li:eq(' + count + ')').siblings().removeClass("bg"); //删除前面的圆圈背景});
图片自动滚动///开启定时器var timer = setInterval(function() {if(count == imgs.length - 1) {count=0; //回到起点0} else {count++; //累计}$(".adver").css("background", "url(images/" + imgs[count] + ")"); //添加图片$('li:eq(' + count + ')').addClass("bg"); //添加圆圈背景$('li:eq(' + count + ')').siblings().removeClass("bg"); //删除前面的圆圈背景}, 1000);//鼠标移入、移出$(".adver").hover(function() {clearInterval(timer);  //鼠标移入,定时器关闭}, function() {//鼠标移出,开启定时器timer = setInterval(function() {if(count == imgs.length - 1) {count=0; //回到起点0} else {count++; //累计}$(".adver").css("background", "url(images/" + imgs[count] + ")"); //添加图片$('li:eq(' + count + ')').addClass("bg"); //添加圆圈背景$('li:eq(' + count + ')').siblings().removeClass("bg"); //删除前面的圆圈背景}, 1000);});});

Jquery 广告图片轮播切换相关推荐

jQuery实现广告图片轮播切换
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
使用jQuery快速高效制作网页交互特效第五章上机练习四制作广告图片轮播切换效果
轮播应有的功能大致都有,分享给一些在学的朋友参考学习. <!DOCTYPE html> <html> <head lang="en"><m ...
jQuery圆点图片轮播切换插件
下载地址效果很普通的网站banner图片切换插件,但又是一款很实用的jQuery轮播图插件,可以点击圆点控制图片索引. dd:
十个jQuery的幻灯片图片轮播切换插件[转]
1.Simple Controls Gallery 是基于jQuery的一个幻灯插件,非常不错,详细演示及下载请点击下面的链接 http://www.dynamicdrive.com/dynamici ...
横向全屏滑动插件_【案例】JQuery横向手风琴图片轮播切换代码
点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源哈喽大家好,又到了每周二经典案例环节啦~同学们还想了解哪些网页知识今天段老师给同学们带来的是JQuery横向手 ...
Android广告图片轮播，支持无限循环和设置轮播样式、切换时间等
Android-----------广告图片轮播控件 Banner广告图片轮播控件,支持无限循环和多种主题,可以灵活设置轮播样式.动画.轮播和切换时间.位置.图片加载框架等! 很多Android AP ...
15款jQuery带缩略图的图片轮播切换特效代码
JQuery宽屏电影大图幻灯片轮播切换代码 jquery带文字缩略图的图片轮播切换代码 jQuery OwlCarousel图片滚动插件世界杯图片轮播滚动代码 jQuery仿中国建设银行带缩略图控制滚 ...
使用jQuery实现图片轮播与切换功能
使用jQuery实现图片轮播与切换功能文章目录使用jQuery实现图片轮播与切换功能效果图一.body 二.jQuery 三.css 四.小结效果图一.body <body>& ...
PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...

Jquery 广告图片轮播切换

Jquery 广告图片轮播切换相关推荐

最新文章

热门文章