JavaScript实现京东首页轮播图

轮播图效果

每隔 3 秒图片会自动切换一张，以此类推安照给定图片数量轮番切换播放。
当鼠标移入时会自动暂停播放，鼠标移出则会继续。
如下图两边有两个左右方向的按钮，点击则会实现手动切换商品图片。
右下角会按照图片数量显示对应的灰色圆点，点击会显示对应的图片，并
圆点加亮显示。
具体效果参考网址：京东轮播图

代码实现

<!DOCTYPE html>
<html>
<head><title>轮播图</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">//CSS样式<style type="text/css">div,img,h2{margin:0px;padding:0px}#images{width: 900px;height: 340px;}#images img{display: none}#images img:first-child{display: block;}#button1{width: 30px;height: 40px;position: absolute;left: 14px;top:155px;background-color: rgba(79,105,140,0.2)}#button2{width: 30px;height: 40px;position: absolute;left: 874px;top:155px;background-color: rgba(79,105,140,0.2)}#button1:hover{background-color: rgba(0,0,0,0.9);}#button2:hover{background-color: rgba(0,0,0,0.9);}#circle1,#circle2,#circle3,#circle4{background-color: rgb(35,49,72);width: 10px;height: 10px;border-radius: 50%;border: 2px solid rgb(137,151,174);}#circle1{position: absolute;left: 800px;top:320px;background-color:rgb(137,151,174)}#circle2{position: absolute;left: 820px;top:320px;}#circle3{position: absolute;left: 840px;top:320px;}#circle4{position: absolute;left: 860px;top:320px;}#circle1:hover{background-color:rgb(137,151,174)}#circle2:hover{background-color:rgb(137,151,174)}#circle3:hover{background-color:rgb(137,151,174)}#circle4:hover{background-color:rgb(137,151,174)}</style>
</head>
<body><!-- 图片块 --><div id="images" onmouseover="doStop()" onmouseout="doStart()"><img src="./22.jpg" width="900" height="340"/><img src="./33.jpg" width="900" height="340"/><img src="./44.jpg" width="900" height="340"/><img src="./55.jpg" width="900" height="340"/></div><!-- 左右按钮块--><div id="button1" style="cursor: pointer;" onclick="left()"  onmouseover="doStop()"><h2 style="text-align: center;color: rgba(255,255,255)"><</h2></div><div id="button2" style="cursor: pointer;" onclick="right()"  onmouseover="doStop()"><h2 style="text-align: center;color: rgba(255,255,255)">></h2></div><!-- 圆点按钮块 --><div id="circle"><div id="circle1" style="cursor: pointer;" onclick="show(1)"></div><div id="circle2" style="cursor: pointer;" onclick="show(2)"></div><div id="circle3" style="cursor: pointer;" onclick="show(3)"></div><div id="circle4" style="cursor: pointer;" onclick="show(4)"></div></div>
</body><script type="text/javascript">//获取图片列表var mlist = document.getElementById("images").getElementsByTagName("img");//获取圆点列表var circleList = document.getElementById("circle").getElementsByTagName("div");//图片切换function show(n){for(var i=0;i<mlist.length;i++){if(n == i+1){mlist[i].style.display = "block";circleList[i].style.backgroundColor = "rgb(137,151,174)";}else{mlist[i].style.display = "none";circleList[i].style.backgroundColor = "rgb(35,49,72)";}}}//图片每隔3秒定时切换var m = 1;var mytime = null;function doStart(){if(mytime == null){mytime = setInterval(function(){m++;show(m);if(m>=4){m = 0;}},3000);}}//停止图片定时切换function doStop(){if(mytime != null){clearInterval(mytime);mytime = null;}}//图片手动向左切换var x;function left(){for(var j=0;j<mlist.length;j++){//获取当前是哪一张图在展示if(mlist[j].style.display == "block"){x = j+1;x--;if(x == 0){x = 4;}show(x);break;}}}//图片手动向右切换var y;function right(){for(var k=0;k<mlist.length;k++){//获取当前是哪一张图在展示if(mlist[k].style.display == "block"){y = k+1;y++;if(y == 5){y = 1;}show(y);break;}}}//开始自动切换图片doStart();//给定初始值show(1);</script>
</html>

JavaScript实现京东首页轮播图相关推荐

html京东自动轮播,js 京东首页轮播图实现（透明度切换）
思路: 1.定义图片和图片轮播dot初始下标 index为0,并为第一张轮播图和第一个dot赋予状态 2. 切换到下一张图片函数moveNext ,函数内将当前下标index的图片和dot恢复原来状 ...
css布局作业：京东首页轮播图
效果: html代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
android京东首页轮播代码,仿京东商品详情轮播图
好久没有更新啦,今天来搞一个京东的轮播:直接上效果 8月-16-2016 09-38-10.gif 8月-16-2016 09-37-17.gif 如果想真实体验可以去京东APP体验一下. 描述一下效 ...
android京东首页轮播代码,web移动端-轮播
var bannerImg = document.querySelectorAll(".jd_banner ul li"); /* 1.自动滚动(定时器+过渡transition+ ...
实战SSM_O2O商铺_40【前端展示】首页轮播图和一级商铺View层的实现
文章目录概述 index.html index.js index.css Controller 调测修复问题头条图片展示修复一级类别商铺图片展示修复 Github地址概述在完成了后端实战 ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
六十六、实现Vue项目首页轮播图（vue-awesome-swiper）
2020/10/23. 周五.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/22 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共 ...
基于Redis优化首页轮播图查询
@ApiOperation(value = "获取首页轮播图列表", notes = "获取首页轮播图列表", httpMethod = "GET&q ...
（转）淘淘商城系列——首页轮播图展示
http://blog.csdn.net/yerenyuan_pku/article/details/72848306 上文我们一起学习了内容管理,由于时间太紧了,好多功能都没实现,在此对读者说声抱歉 ...

JavaScript实现京东首页轮播图

轮播图效果

代码实现

JavaScript实现京东首页轮播图相关推荐

最新文章

热门文章