Jquery轮播图，点击左右按钮进行轮播

<!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"><!--图片容器  8图 --><ul><li><a href="#"><img src="./img/jd/1.jpg" alt=""></a></li><li><a href="#"><img src="./img/jd/2.jpg" alt=""></a></li><li><a href="#"><img src="./img/jd/3.jpg" alt=""></a></li><li><a href="#"><img src="./img/jd/4.jpg" alt=""></a></li><li><a href="#"><img src="./img/jd/5.jpg" alt=""></a></li><li><a href="#"><img src="./img/jd/6.jpg" alt=""></a></li><li><a href="#"><img src="./img/jd/7.jpg" alt=""></a></li><li><a href="#"><img src="./img/jd/8.jpg" alt=""></a></li></ul><!--箭头--><div class="arrow"><span class="arrow-left">&lt;</span><span class="arrow-right">&gt;</span></div><div class="box"><ul><li class="show"></li><li></li><li></li><li></li><li></li></ul></div></div><script src="./jquery-1.12.4.min.js"></script><script>$(function () {var num = 0;$(".arrow-right").click(function () {num++;if (num === $(".slider>ul>li").length) {num = 0;}$(".slider li").eq(num).fadeIn().siblings("li").fadeOut();$(".box li").eq(num).addClass("show").siblings("li").removeClass("show");});$(".arrow-left").on("click", function () {num--;if (num === -1) {num = $(".slider>ul>li").length - 1;}$(".slider li").eq(num).fadeIn().siblings("li").fadeOut();$(".box li").eq(num).addClass("show").siblings("li").removeClass("show");});$(".box li").on("click", function () {var idx = $(this).index();$(".slider li").eq(idx).fadeIn().siblings("li").fadeOut();$(".box li").eq(idx).addClass("show").siblings("li").removeClass("show");});});</script>
</body></html>

注意：效果没出来，自己文件的js、图片地址看一下，注意看一下自己的class名称，与script中对应起来。

Jquery轮播图，点击左右按钮进行轮播相关推荐

简单的手写jquery轮播图（包含切换按钮、小圆点）
简单的手写jquery轮播图(包含切换按钮.小圆点) css代码 * {margin: 0;padding: 0; }.container {width: 800px;height: 400px;ma ...
JS实现轮播图点击切换、按钮切换功能
JS实现轮播图点击切换.按钮切换功能前言轮播图案例总结前言轮播图的案例非常经典,写法也非常多,我在写一个自己用的比较多的写法,帮助大家理解,在网页的设计中,可以直接拿去用(记得换图片路径哦! ...
js实现轮播图(点击小图片切换大图片+自动切换)
js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...
轮播图、阅读注册协议、网页时钟、随机点名、小米搜索框、轮播图点击切换——web APIs练习
目录一.获取元素(DOM) 1. 随机轮播图案例 2. 阅读注册协议(定时器间歇函数的应用) 3. 轮播图定时器版 4. 网页时钟二.事件基础(DOM) 1. 随机点名案例 2. 轮播图点击切换( ...
京东轮播图——点击轮播
京东轮播图--点击轮播完成效果如下点击左右按钮可以实现图片转化,底下橙色的按钮也随之改变. (图片是在京东上找的,只是觉得比较好看而已) DIV布局 1.整体的一个div容器 2.image布局d ...
vue pc端商品轮播图_轮播图高点击商品图
轮播图由背景,商品图,文案三大部分组成,其中商品图是轮播图的主体内容,在轮播主图中,能不能通过一张商品图呈现出商品信息或者卖点,是影响点击率高低的重要因素.本期内容,我们将从商品图出发,为大家讲解的轮 ...
微信小程序图片放大预览效果的实现，轮播图点击放大预览
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果.我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现.今天就来教大家如何实现小程序图片点击放大的效果. 老规 ...
jqweui轮播图点击图片放大缩小
需要js cs 的直接上官网下:jqweui: jqweui (gitee.com) 直接上代码 <!DOCTYPE html> <html><head><t ...
html怎么做产品轮播图,商品轮播图是什么意思（html轮播图怎么制作）
但轮播图对用户真的有意义吗?或者它只是设计者用来偷懒,将内容一股脑塞进去的工具呢? 不论将这个问题抛向谁,他们都会告诉你,"轮播图就是个反面模式(anti-pattern)."轮播 ...
超详细轮播图，让你彻底明白轮播图！
超详细轮播图,让你彻底明白轮播图! 个人博客地址:http://www.zhsh666.xyz/ 刚开始学JavaScript时候很多新手都会尝试写一些简单的小项目,轮播图应该是写的最多的.但是很多时 ...

Jquery轮播图，点击左右按钮进行轮播

Jquery轮播图，点击左右按钮进行轮播相关推荐

最新文章

热门文章