js实现轮播图(点击小图片切换大图片+自动切换)

实现效果如下：

点击小图切换大图和轮播标题，点击左右按钮大小图和轮播标题切换，鼠标进入清除定时器，鼠标移出恢复轮播

html代码如下：

<div class="switch fl" id="jsSwitch"><div class="switch-bottom"><div class="switch-l" ><img class="switch-img" id="jsSwitchL" src="data:images/lunbo-left.png" alt=""></div><ul class="switch-list" id="jsSwitchList"><li class="switch-item active"><img class="switch-min" src="data:images/lunbo-1-min.png "></li><li class="switch-item"><img class="switch-min" src="data:images/lunbo-2.png"></li><li class="switch-item"><img class="switch-min" src="data:images/lunbo-3.png"></li><li class="switch-item"><img class="switch-min" src="data:images/lunbo-4.png"></li><li class="switch-item"><img class="switch-min" src="data:images/lunbo-5.png"></li></ul><div class="switch-r fr" ><img class="switch-img" id="jsSwitchR" src="data:images/lunbo-right.png"></img></div></div><div class="switch-title"><p class="switch-info" id="jsSwitchInfo">北京市人民检察院第十五次代表大会召开</p></div></div>

关键部分，js代码：

var num = 0;
var arrUrl = ['images/lunbo-1.png', 'images/lunbo-2-max.png', 'images/lunbo-3-max.png', 'images/lunbo-4-max.png', 'images/lunbo-5-max.png'];
var img = document.getElementById('jsSwitch');
var li = document.getElementById('jsSwitchList').children;
var left = document.getElementById('jsSwitchL');
var right = document.getElementById('jsSwitchR');
var info = document.getElementById('jsSwitchInfo');
var timer = null;//左右按钮
left.onclick = function(){num--;if (num == -1) {num = arrUrl.length - 1;}changeImg();
}
right.onclick = function(){num++;if (num == arrUrl.length) {num =  0;}changeImg();
}setTimeout(autoplay(),1000);//鼠标进入清除定时器，鼠标离开恢复
img.onmouseover = function(ev){clearInterval(timer);
};
img.onmouseout = autoplay;//点击小图片 换大图片
for (var i = 0; i < li.length; i++){li[i].index = i;li[i].onclick = function (ev) {num = this.index;changeImg();}
}//图片切换
function changeImg() {for (var i = 0; i < li.length; i++) {//判断当前li是否包含active类if(li[i].classList.contains('active')){li[i].classList.remove('active');}}//修改小图背景li[num].classList.add('active');//修改大图var currentImg = arrUrl[num];img.style.background = "url("+currentImg+") no-repeat center";//修改轮播标题info.innerText = arrInfo[num];
}
//定时器
function autoplay() {timer = setInterval(function () {num++;num %= arrUrl.length;changeImg();},2000);
}

以下是轮播全部代码，加上css代码，如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body,html {width: 100%;height: 100%;}*{margin: 0;padding: 0;font-family: "microsoft yahei";font-weight: normal;}ol, ul, li {list-style: none;}a {text-decoration: none;color: #fff;}img {display: block;border: none;}.fl {float: left;}.fr {float: right;}.switch {position: absolute;width: 566px;height: 302px;left: -283px;margin-top: 100px;margin-left: 50%;background: url(images/lunbo-1.png) no-repeat;background-size: 566px 302px;}.switch-bottom {position: absolute;bottom: 0;width: 100%;height: 66px;background: rgba(0,0,0,0.65);}.switch-l,.switch-r {width: 45px;height: 66px;display: table-cell;vertical-align: middle;}.switch-r {margin-top: -46px;}.switch-img {margin-left: 16px;cursor: pointer;}.switch-img {margin-left: 10px;cursor: pointer;}.switch-list {float: left;width: 475px;height: 66px;margin-top: -66px;margin-left: 45px;}.switch-item {float: left;width: 95px;height: 66px;}.active {background-color: #fff;}.switch-min {margin: 5px;cursor: pointer;}.switch-title {position: absolute;bottom: 66px;width: 100%;height: 36px;background: rgba(0,0,0,0.4);}.switch-info {margin-top: 10px;margin-left: 8px;font-size: 16px;color: #fff;}</style>
</head>
<body><div class="switch fl" id="jsSwitch"><div class="switch-bottom"><div class="switch-l" ><img class="switch-img" id="jsSwitchL" src="data:images/lunbo-left.png" alt=""></div><ul class="switch-list" id="jsSwitchList"><li class="switch-item active"><img class="switch-min" src="data:images/lunbo-1-min.png "></li><li class="switch-item"><img class="switch-min" src="data:images/lunbo-2.png"></li><li class="switch-item"><img class="switch-min" src="data:images/lunbo-3.png"></li><li class="switch-item"><img class="switch-min" src="data:images/lunbo-4.png"></li><li class="switch-item"><img class="switch-min" src="data:images/lunbo-5.png"></li></ul><div class="switch-r fr" ><img class="switch-img" id="jsSwitchR" src="data:images/lunbo-right.png"></img></div></div><div class="switch-title"><p class="switch-info" id="jsSwitchInfo">北京市人民检察院第十五次代表大会召开</p></div></div><script src="jQuery.v1.11.1.min.js"></script><script>var num = 0;var arrUrl = ['images/lunbo-1.png', 'images/lunbo-2-max.png', 'images/lunbo-3-max.png', 'images/lunbo-4-max.png', 'images/lunbo-5-max.png'];var arrInfo = ['北京市人民检察院第十五次代表大会召开','北京市人民检察院','北京市人民会召开','十五次代表大会召开','北京市人民大会召开']var img = document.getElementById('jsSwitch');var li = document.getElementById('jsSwitchList').children;var left = document.getElementById('jsSwitchL');var right = document.getElementById('jsSwitchR');var info = document.getElementById('jsSwitchInfo');var timer = null;//左右按钮left.onclick = function(){num--;if (num == -1) {num = arrUrl.length - 1;}changeImg();}right.onclick = function(){num++;if (num == arrUrl.length) {num =  0;}changeImg();}setTimeout(autoplay(),1000);//鼠标进入清除定时器，鼠标离开恢复img.onmouseover = function(ev){clearInterval(timer);};img.onmouseout = autoplay;//点击小图片 换大图片for (var i = 0; i < li.length; i++){li[i].index = i;li[i].onclick = function (ev) {num = this.index;changeImg();}}//图片切换function changeImg() {for (var i = 0; i < li.length; i++) {//判断当前li是否包含active类if(li[i].classList.contains('active')){li[i].classList.remove('active');}}//修改小图背景li[num].classList.add('active');//修改大图var currentImg = arrUrl[num];img.style.background = "url("+currentImg+") no-repeat center";//修改轮播标题info.innerText = arrInfo[num];}//定时器function autoplay() {timer = setInterval(function () {num++;num %= arrUrl.length;changeImg();},2000);}</script>
</body>
</html>

js实现轮播图(点击小图片切换大图片+自动切换)相关推荐

html三张图片自动轮回播放,JS -- 记一种用原生JS 完成轮播图的要领（非无穷轮回不自动切换）...
完成一个非无穷轮回不自动切换的轮播图只需要几张图片和两个按钮(简化) HTML部份两个按钮,几张图片(假如有四张图) 右边按钮左边按钮 CSS部份动态增加删除li的class属性(native ...
JS实现轮播图点击切换、按钮切换功能
JS实现轮播图点击切换.按钮切换功能前言轮播图案例总结前言轮播图的案例非常经典,写法也非常多,我在写一个自己用的比较多的写法,帮助大家理解,在网页的设计中,可以直接拿去用(记得换图片路径哦! ...
js 轮播图中点击小圆圈图片跳到指定图片
html代码(部分) <div class="w"><div class="main"><di ...
微信小程序图片放大预览效果的实现，轮播图点击放大预览
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果.我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现.今天就来教大家如何实现小程序图片点击放大的效果. 老规 ...
原生js实现轮播图——小肉包
使用原生js实现轮播图--小肉包今天分享一个使用原生JS实现轮播图的案例,并且配上比较详细的过程讲解,欢迎小伙伴的浏览和批评指正.静态效果图如下: 核心思想将一些图片在一行中平铺,然后计算偏移量再 ...
js轮播图(点击图片切换定时器效果)
轮播效果:点击上一页,下一页切换图片,设置定时器每过两秒进行自动切换不说别的直接上代码 <!DOCTYPE html> <html> <head><titl ...
使用原生js将轮播图组件化
代码地址如下: http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...
轮播图、阅读注册协议、网页时钟、随机点名、小米搜索框、轮播图点击切换——web APIs练习
目录一.获取元素(DOM) 1. 随机轮播图案例 2. 阅读注册协议(定时器间歇函数的应用) 3. 轮播图定时器版 4. 网页时钟二.事件基础(DOM) 1. 随机点名案例 2. 轮播图点击切换( ...
利用js实现轮播图（上一张，下一张，选取第几张，动画等）
今天来说一下利用js实现轮播图效果思路 1.首先我们要把需要用到的元素获取过来 <div class="all" id='box'><div class=&qu ...

js实现轮播图(点击小图片切换大图片+自动切换)

js实现轮播图(点击小图片切换大图片+自动切换)

点击小图切换大图和轮播标题，点击左右按钮大小图和轮播标题切换，鼠标进入清除定时器，鼠标移出恢复轮播

js实现轮播图(点击小图片切换大图片+自动切换)相关推荐

最新文章

热门文章