jQuery 京东轮播图案例（三种实现方式）

①源码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">* {margin:0;padding:0;font-family:微软雅黑;font-size:24px;}/*框*/.div01 {width:500px;height:300px;position:absolute;overflow:hidden;}/*照片框*/.div02 {width:calc(500px*8);height:300px;position:absolute;z-index:5;}.slideimg {display:none;}.cimg {display:block;}/*左右键*/.abt {display:block;width:30px;height:60px;z-index:9;opacity:0.3;line-height:60px;text-align:center;background-color:gray;color:white;}#lefta {position:absolute;left:0px;top:40%;}#righta {position:absolute;right:0px;top:40%;}.abt:hover {opacity:0.6;cursor:pointer;}/**/#slideblock {padding:3px 3px;z-index:20;border-radius:8px;position:absolute;left:25%;bottom:20px;width:213px;height:12px;background-color:#eaeaea;opacity:0.8;}#slideblock ol {list-style:none;float:left;width:12px;height:12px;margin-left:13px;border-radius:100%;background-color:white;}#slideblock ol.selected {background-color:red;}</style><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript">$(document).ready(function() {$("#righta").click( //为#lefta绑定了鼠标点击事件处理  function() {//$("XXXXX").attr("id")取标记属性var tid = $(".selected").attr("id");if (tid == "c1") {$("#c1").removeClass("selected");$("#img1").removeClass("cimg");$("#c2").addClass("selected");$("#img2").addClass("cimg");}if (tid == "c2") {$("#c2").removeClass("selected");$("#img2").removeClass("cimg");$("#c3").addClass("selected");$("#img3").addClass("cimg");}if (tid == "c3") {$("#c3").removeClass("selected");$("#img3").removeClass("cimg");$("#c4").addClass("selected");$("#img4").addClass("cimg");}if (tid == "c4") {$("#c4").removeClass("selected");$("#img4").removeClass("cimg");$("#c5").addClass("selected");$("#img5").addClass("cimg");}if (tid == "c5") {$("#c5").removeClass("selected");$("#img5").removeClass("cimg");$("#c6").addClass("selected");$("#img6").addClass("cimg");}if (tid == "c6") {$("#c6").removeClass("selected");$("#img6").removeClass("cimg");$("#c7").addClass("selected");$("#img7").addClass("cimg");}if (tid == "c7") {$("#c7").removeClass("selected");$("#img7").removeClass("cimg");$("#c8").addClass("selected");$("#img8").addClass("cimg");}if (tid == "c8") {$("#c8").removeClass("selected");$("#img8").removeClass("cimg");$("#c1").addClass("selected");$("#img1").addClass("cimg");}});$("#lefta").click( //为#lefta绑定了鼠标点击事件处理  function() {//$("XXXXX").attr("id")取标记属性var tid = $(".selected").attr("id");if (tid == "c1") {$("#c1").removeClass("selected");$("#img1").removeClass("cimg");$("#c8").addClass("selected");$("#img8").addClass("cimg");}if (tid == "c8") {$("#c8").removeClass("selected");$("#img8").removeClass("cimg");$("#c7").addClass("selected");$("#img7").addClass("cimg");}if (tid == "c7") {$("#c7").removeClass("selected");$("#img7").removeClass("cimg");$("#c6").addClass("selected");$("#img6").addClass("cimg");}if (tid == "c6") {$("#c6").removeClass("selected");$("#img6").removeClass("cimg");$("#c5").addClass("selected");$("#img5").addClass("cimg");}if (tid == "c5") {$("#c5").removeClass("selected");$("#img5").removeClass("cimg");$("#c4").addClass("selected");$("#img4").addClass("cimg");}if (tid == "c4") {$("#c4").removeClass("selected");$("#img4").removeClass("cimg");$("#c3").addClass("selected");$("#img3").addClass("cimg");}if (tid == "c3") {$("#c3").removeClass("selected");$("#img3").removeClass("cimg");$("#c2").addClass("selected");$("#img2").addClass("cimg");}if (tid == "c2") {$("#c2").removeClass("selected");$("#img2").removeClass("cimg");$("#c1").addClass("selected");$("#img1").addClass("cimg");}});            //setInterval('$( "#righta" ).click()',2000);           $("#divslide").mouseenter( // hover 动作=mouseenter + mouseleave两个动作function() {$("#lefta").css("display", "inline-block");$("#righta").css("display", "inline-block");});            $("#divslide").mouseleave(function() {//alert('r');$("#lefta").css("display", "none");$("#righta").css("display", "none");});           $("#righta").mouseenter( // hover 动作=mouseenter + mouseleave两个动作function() {$("#lefta").css("display", "inline-block");$("#righta").css("display", "inline-block");});          $("#lefta").mouseenter( // hover 动作=mouseenter + mouseleave两个动作function() {$("#lefta").css("display", "inline-block");$("#righta").css("display", "inline-block");});           });</script></head><body><div class="div01"><div class="div02"><img id="img1" class="slideimg cimg" src="img京东/1.jpg">        <img id="img2" class="slideimg" src="img京东/2.jpg">        <img id="img3" class="slideimg" src="img京东/3.jpg">        <img id="img4" class="slideimg" src="img京东/4.jpg">        <img id="img5" class="slideimg" src="img京东/5.jpg">        <img id="img6" class="slideimg" src="img京东/6.jpg">        <img id="img7" class="slideimg" src="img京东/7.jpg">        <img id="img8" class="slideimg" src="img京东/8.jpg">       </div><a id="lefta" class="abt">＜</a><a id="righta" class="abt">＞</a><div id="slideblock"><ul><ol id="c1" class="selected"></ol><ol id="c2"></ol><ol id="c3"></ol><ol id="c4"></ol><ol id="c5"></ol><ol id="c6"></ol><ol id="c7"></ol>                                                                        <ol id="c8"></ol></ul></div></div></body>
</html>

样图：

②源码（JavaScript）：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#banner{height: 350px;width: 650px;margin: auto;position: relative;}.arr-l,.arr-r{width: 30px;height: 60px;color: #fff;font-size: 25px;text-align: center;line-height: 60px;background: rgba(0,0,0,.3);position: absolute;top: 50%;margin-top: -50px;z-index: 1;}.arr-l{left: 0;}.arr-r{right: 0;}img{position: absolute;}</style><script type="text/javascript">var i=1;function left(){i--;if(i==0){i=8;}document.getElementsByTagName('img')[0].src="img京东/"+i+".jpg";}function right(){i++;if(i>8){i=1;}document.getElementsByTagName('img')[0].src="img京东/"+i+".jpg";}</script></head><body><div id="banner"><a href="#" class="arr-l" onclick="left();"><</a><img src="img京东/1.jpg" style="width: 650px; height: 350px;"><a href="#" class="arr-r" onclick="right();">></a></div></body>
</html>

③源码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">* {margin: 0;padding: 0;list-style: none;}.slider {height: 350px;width: 650px;margin: 100px auto;position: relative;}.slider li {position: absolute;display: none;}.slider li:first-child {display: block;}.arrow {position: relative;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: 170px;/* 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;}.slider img{height: 350px;width: 650px;}</style></head><body><div class="slider"><ul><li><a href="#"><img src="img京东/1.jpg" alt=""></a></li><li><a href="#"><img src="img京东/2.jpg" alt=""></a></li><li><a href="#"><img src="img京东/3.jpg" alt=""></a></li><li><a href="#"><img src="img京东/4.jpg" alt=""></a></li><li><a href="#"><img src="img京东/5.jpg" alt=""></a></li><li><a href="#"><img src="img京东/6.jpg" alt=""></a></li><li><a href="#"><img src="img京东/7.jpg" alt=""></a></li><li><a href="#"><img src="img京东/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="js/jquery-3.3.1.js"></script><script>$(function(){var count=0;$(".arrow-left").click(function(){count--;if(count==-1){count=$(".slider li").length-1;}//fadeIn():通过不透明度的变化来实现所有匹配元素的淡入效果//fadeOut():通过不透明度的变化来实现所有匹配元素的淡出效果//让coubnt渐渐的显示其他的渐渐的隐藏$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();});$(".arrow-right").click(function(){count++;if(count==$(".slider li").length){count=0;  }$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();});});</script></body>
</html>

jQuery 京东轮播图案例（三种实现方式）相关推荐

用jquery简单的实现京东轮播图效果
用jquery简单的实现京东轮播图效果## 标题 html部分 <!DOCTYPE html> <html lang="en"><head>&l ...
练习（京东图片，导航左侧，网易列表，3school导航条，京东轮播图/电影卡片）
图片列表 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
京东轮播图——点击轮播
京东轮播图--点击轮播完成效果如下点击左右按钮可以实现图片转化,底下橙色的按钮也随之改变. (图片是在京东上找的,只是觉得比较好看而已) DIV布局 1.整体的一个div容器 2.image布局d ...
前端实现轮播图的三种方法。
轮播图,作为前端学习的经典案例,涉及了各种知识点,包括动画函数,js基础知识以及逻辑思路等,一辈子只做一次. 下面总结实现轮播图的三种方法,从易到难,大家选择性学习. 轮播图一. Vue.js实现轮 ...
原生js模拟实现京东轮播图
原生js模拟实现京东轮播图一.实现原理 1. 官网发现 2. opacity和z-index 3.定位二.文档目录三.HTML结构四.css样式五.js行为_实现自动轮播与点击效果六.效果 ...
前端js实现京东轮播图
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>京 ...
JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放
JavaScript实现京东轮播图效果--自动轮播,左右按钮切换图片,小圆圈跟随图片变化,点击小圆圈可跳转图片,无缝循环播放静态效果图如下: CSS部分 *{margin: 0;padding: 0 ...
京东图片列表、左侧导航栏、网易新闻列表、京东页面布局、京东轮播图
文章目录京东图片列表京东左侧导航栏网易新闻列表: 京东页面布局京东轮播图京东图片列表代码如下: <head><meta charset="UTF-8" ...
jQuery实现京东轮播图
轮播图案例展示项目链接 https://download.csdn.net/download/weixin_45525272/14932730 代码 <!DOCTYPE html> & ...

jQuery 京东轮播图案例（三种实现方式）

jQuery 京东轮播图案例（三种实现方式）相关推荐

最新文章

热门文章