轮播图案例

展示

项目链接

https://download.csdn.net/download/weixin_45525272/14932730

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>京东商城</title><style>* {margin: 0;padding: 0;list-style: none;}.slider {height: 340px;width: 790px;margin: 100px auto;position: relative;}.slider li {position: absolute;display: none;}.slider li:first-child {display: block;}.arrow {display: none;}.slider:hover .arrow {display: block;}.arrow-left,.arrow-right {font-family: "SimSun", "宋体";width: 30px;height: 60px;background-color: rgba(0, 0, 0, 0.1);position: absolute;top: 50%;margin-top: -30px;cursor: pointer;text-align: center;line-height: 60px;color: #fff;font-weight: 700;font-size: 30px;}.arrow-left:hover,.arrow-right:hover {background-color: rgba(0, 0, 0, .5);}.arrow-left {left: 0;}.arrow-right {right: 0;}</style>
</head>
<body>
<div class="slider"><ul><li><a href="#"><img src="data:images/1.jpg" alt=""></a></li><li><a href="#"><img src="data:images/2.jpg" alt=""></a></li><li><a href="#"><img src="data:images/3.jpg" alt=""></a></li><li><a href="#"><img src="data:images/4.jpg" alt=""></a></li><li><a href="#"><img src="data:images/5.jpg" alt=""></a></li><li><a href="#"><img src="data:images/6.jpg" alt=""></a></li><li><a href="#"><img src="data:images/7.jpg" alt=""></a></li><li><a href="#"><img src="data:images/8.jpg" alt=""></a></li></ul><!--箭头--><div class="arrow"><span class="arrow-left">&lt;</span><span class="arrow-right">&gt;</span></div>
</div><script src="jquery-1.12.4.js"></script>
<script>$(function () {var count = 0;$(".arrow-right").click(function () {count++;if(count == $(".slider li").length){count = 0;}console.log(count);//让count渐渐的显示，其他兄弟渐渐的隐藏$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();});$(".arrow-left").click(function () {count--;if(count == -1){count = $(".slider li").length - 1;}console.log(count);//让count渐渐的显示，其他兄弟渐渐的隐藏$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();})// 设置每秒点击一次   即自动播放轮播图setInterval(function () {$(".arrow-left").click();},2000);});
</script></body>
</html>

jQuery实现京东轮播图相关推荐

用jquery简单的实现京东轮播图效果
用jquery简单的实现京东轮播图效果## 标题 html部分 <!DOCTYPE html> <html lang="en"><head>&l ...
前端js实现京东轮播图
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>京 ...
JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放
JavaScript实现京东轮播图效果--自动轮播,左右按钮切换图片,小圆圈跟随图片变化,点击小圆圈可跳转图片,无缝循环播放静态效果图如下: CSS部分 *{margin: 0;padding: 0 ...
京东图片列表、左侧导航栏、网易新闻列表、京东页面布局、京东轮播图
文章目录京东图片列表京东左侧导航栏网易新闻列表: 京东页面布局京东轮播图京东图片列表代码如下: <head><meta charset="UTF-8" ...
练习（京东图片，导航左侧，网易列表，3school导航条，京东轮播图/电影卡片）
图片列表 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
原生js模拟实现京东轮播图
原生js模拟实现京东轮播图一.实现原理 1. 官网发现 2. opacity和z-index 3.定位二.文档目录三.HTML结构四.css样式五.js行为_实现自动轮播与点击效果六.效果 ...
京东轮播图——点击轮播
京东轮播图--点击轮播完成效果如下点击左右按钮可以实现图片转化,底下橙色的按钮也随之改变. (图片是在京东上找的,只是觉得比较好看而已) DIV布局 1.整体的一个div容器 2.image布局d ...
用html css JavaScript写一个功能全面的王者荣耀轮播图（仿淘宝京东轮播图）通俗易懂
首先分析一下案例需求: 1.鼠标经过就显示隐藏左右按钮 2.动态生成小圆圈有几张图片,就生成几个小圆圈 3.点击小圆圈,移动图片当然移动的是 ul(大盒子) 4.点击左右按钮, 图片滚动 ...
jQuery 京东轮播图案例（三种实现方式）
①源码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...

jQuery实现京东轮播图

轮播图案例

展示

项目链接

代码

jQuery实现京东轮播图相关推荐

最新文章

热门文章