JS 实现banner图片轮播效果(鼠标事件)
一.要实现的效果
1.点击左右可切换图片
2.点击小圆点 可切换图片
二.效果图
三.代码
1.css
<style type="text/css">
body,img,span,ul,li{margin: 0;padding: 0;}
#div1{width: 600px;height: 350px;margin: 150px auto;border: 10px solid #eee;position: relative;}
img{width: 600px;height: 350px;}
span{display: inline-block;position: absolute;width: 50px;height: 50px;border-radius: 25px;background:rgba(0,0,0,.3); font-size: 30px;line-height: 50px;text-align: center;cursor: pointer;color: white;}
span:hover{background:rgba(255,255,255,.5);color:black;transform:scale(1.3);}
span#L{left: 10px;top: 150px;}
span#R{right: 10px;top: 150px;}
#div1 #ul{position: absolute;bottom: 10px;left: 250px;width: 125px;height: 20px;}
#div1 #ul li{list-style: none;float: left;height: 20px;width: 20px;border-radius: 10px;background:rgba(255,255,255,.5); margin-right: 5px;cursor: pointer;}
#div1 #ul .active{background:rgba(0,0,0,.5);}
</style>
2.html
<body>
<div id="div1">
<img src="" alt="">
<span id="L"><</span>
<span id="R">></span>
<ul id="ul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
3.js
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementById('div1');
var oImg=div1.getElementsByTagName('img')[0];
var spanL=document.getElementById('L');
var spanR=document.getElementById('R');
var oUl=document.getElementById('ul');
var oLi=oUl.getElementsByTagName('li');
var arrImg=['img2/1.jpg','img2/2.jpg','img2/3.jpg','img2/4.jpg','img2/5.jpg'];
var num=0;
var oldLi=0;
function fn(num) {
oImg.src=arrImg[num];
}
fn(0);
function fnLi(num){
oLi[oldLi].className='';
oLi[num].className='active';
oldLi=num;
}
fnLi(0);
/*点击左右span图片切换*/
/*点击左右span时li切换*/
spanL.onclick=function(){
if (num<1) {
num=arrImg.length-1;
fn(num);
fnLi(num);
}else{
num--;
fnLi(num);
fn(num);
}
}
spanR.onclick=function(){
if (num==arrImg.length-1) {
num=0;
fn(num);
fnLi(num);
}else{
num++;
fnLi(num);
fn(num);
}
}
/*点击li实现图片切换*/
for (var i = 0; i < oLi.length; i++) {
oLi[i].index=i;
oLi[i].onclick=function(){
fn(this.index);
fnLi(this.index);
}
}
}
</script>
总结
以上所述是小编给大家介绍的JS 实现banner图片轮播效果(鼠标事件)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
原生javascript移动端滑动banner效果
本文实例为大家分享了移动端滑动banner效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,
-
javascript 上下banner替换具体实现
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="
-
js实现三张图（文）片一起切换的banner焦点图
本文实例讲述了js实现三张图(文)片一起切换的banner焦点图.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的三张图(文)片一起切换的banner焦点图,带有左右箭头,同一个焦点图,三个位置的图片可以同时实现切换,图片中间可以穿插文字说明. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现三张图(文)片一起切换的banner焦点图代
-
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
本文实例讲述了JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码.分享给大家供大家参考.具体如下: 这是一款阿里妈妈网站顶部banner代码,采用滑出的方式,一个经典的工具条代码,可以当作菜单来用,同时还有完善的功能,可以适时关闭工具条,整体效果设计美观,简洁漂亮. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-float-banner-alimama-style-codes/ 具体代码如下: <!DOCTYPE ht
-
JS选项卡动态替换banner图片路径的方法
本文实例讲述了JS选项卡动态替换banner图片路径的方法.分享给大家供大家参考.具体分析如下: 这里演示一个选项卡演示如何动态替换图片的方法,用一个JS函数实现的定义鼠标滑过替换图片的路径. 参数说明如下: obj 当前触发事件的对象 hc 当前选中元素的类名 content 选择需要替换路径的图片 url 为图片的路径 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http
-
JS 实现banner图片轮播效果(鼠标事件)
一.要实现的效果 1.点击左右可切换图片 2.点击小圆点 可切换图片 二.效果图 三.代码 1.css <style type="text/css"> body,img,span,ul,li{margin: 0;padding: 0;} #div1{width: 600px;height: 350px;margin: 150px auto;border: 10px solid #eee;position: relative;} img{width: 600px;height
-
JS实现简易图片轮播效果的方法
本文实例讲述了JS实现简易图片轮播效果的方法.分享给大家供大家参考.具体如下: 这里使用JS制作简易图片轮播效果: 制作比较粗糙,使用的图片是width:660ppx,height:550px; 效果图如下: 代码部分如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; char
-
JS实现简单图片轮播效果
本文实例为大家分享了JS实现简单图片轮播效果的具体代码,供大家参考,具体内容如下 实现效果 左右按钮可点击左右移动显示图片进行无缝滚动 下面的小圆圈点击可跳到对应的图片索引 不进行上述操作时,图片自动轮播 html源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati
-
Android自动播放Banner图片轮播效果
先看一下效果图 支持本地图片以及网络图片or本地网络混合. 使用方式: <com.jalen.autobanner.BannerView android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="230dip"> </com.jalen.autobanner.BannerView> 核心代码: int length
-
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he
-
js实现图片轮播效果
本文实例讲解了js实现图片轮播效果代码,分享给大家供大家参考,具体内容如下 运行代码如下 具体代码如下 插件是基于jQuery写的,主要实现的功能:自动播放.鼠标悬停.左右箭头控制+禁止点击 CSS样式: <style> .cooperation-box { position: relative; height: 91px; border-bottom: 1px solid #E0DED9; overflow: hidden; } .cooperation { position: relati
-
js支持键盘控制的左右切换立体式图片轮播效果代码分享
本文实例讲述了js支持键盘控制的左右切换立体式图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现支持键盘控制的左右切换立体式图片轮播效果,特别有立体感,最重要的一点是可以利用键盘进行控制. 特性介绍: 1.轻松的改变幻灯变的宽度. 2.轻易改变下一张展示图片的数量. 3.最后一张图片会循环回到第一张图片里. 4.嵌入了Fancy查看插件,在每张图片上都能查看详细图片信息. 运行效果图:
-
js图片轮播效果实现代码
首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示: 1.遍历所有放数字索引的li,将每个li上的类去掉. 2.根据传递过来的index值找到对应的li给
-
js实现图片轮播效果学习笔记
本文实例为大家分享了js实现图片轮播效果的具体代码,供大家参考,具体内容如下 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示: 1.遍历所有放数字索引的li,将每个li上的类去掉. 2.根据传递过
-
JS实现图片轮播效果实例详解【可自动和手动】
本文实例讲述了JS实现图片轮播效果.分享给大家供大家参考,具体如下: 本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换 以下为实现代码: 首先是html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播效果</title&g