jquery京东商城双11焦点图多图广告特效代码分享

本文实例讲述了jquery京东商城双11焦点图多图广告特效。分享给大家供大家参考。具体如下：jquery实现的京东商城双11焦点图多图广告滑动及自动切换动画效果源码，是一段模仿京东商城双11的焦点图代码，专业应用于网站的图片展示及重点展示的区域，该段代码实现了鼠标滑过切换图片及自动切换图片两种效果。运行效果图： - 查看效果下载源码-

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。为大家分享的jquery京东商城双11焦点图多图广告特效代码如下

！doctype html html hearteta charset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' IE=edge '/title jquery京东商城双11焦点图多图广告代码/titlelink rel='样式表href='css/common.css' /link rel='样式表href=' CSS/JD。CSS '/样式。zxx _ body .zxx _ const { width : 1210 px }/style/head dydiv class=' zxx _ body ' div class=' zxx _ const '！-jd.html的主体-div class=' JD _ body ' div id=' JDAdslide ' class=' JD _ ad _ slide ' img src=' http : images/rbehvlj 5 cuiaaae4o 585 saaafgkgindgcaatht 749。jpg ' class=' JD _ ad _ img ' img data-src=' http : images/rbehvlj 4 ugaaaaadnu 0 wersyaafe 9 abekbaam 3t 077-添加active-/div/div/div脚本src=' http : js/jquery。量滴js '/script script src=' http : js/jquery-电源开关。js/大的图片广告//根据图片创建id，按钮元素等，实际开发建议使用JSON数据类似var htmlAdBtn=$('#jdAdSlide img ').每个（函数（索引，图像){ var id='adImage '索引；htmlAdBtn=htmlAdBtn ' a href=' JavaScript : ' class=' JD _ ad _ BTN _ a ' data-rel=' id ' ' ' '(index 1)'/a '；image . id=id })；$('#jdAdBtn ').html(htmlAdBtn).查找(' a ').电源开关({ eventType: '悬停，classAdd: '活动，animation: '渐变，自动定时器： 5000，开关：函数（图像){ if(！图像。attr(' src '){ image。attr(' src '，图像。attr(' data-src ')；} }}).等式(0).触发器(“鼠标悬停”)；//便民服务$('#servNav a ').电源开关({ class add : ' active '，eventType: 'hover '，on switch : function(){ $(' # pointLine ').动画({ 'left': $(this)).位置()。左},200);}});/script div style=' width :960 px；margin:10px汽车；clear : both ' text-align : center；'/div div style=' width :960 px；余量：20px汽车100像素汽车；clear:both文本对齐：居中；font-size :12 px线高' :25 px'p适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗/pa href='//www .JB 51。net ' style=' color : # 333 ' strong我们整理/strong/a /strong/div/body/html以上就是为大家分享的基于jquery实现京东商城双11焦点图多图广告特效代码，希望大家可以喜欢，并应用到实践中。