投稿
  1. 首页
  2. 随笔

淘宝首页宽屏图片轮播代码

跳蚤市场海报 • 2023-3-16 • 随笔 • 阅读 11

淘宝首页宽屏图片轮播代码,第1张

我有代码，如果不是学网页的，我怕你看不懂！

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery图片轮播代码</title>

<style>

.flexslider {

 margin: 0px auto 20px

 position: relative

 width: 100%

 height: 482px

 overflow: hidden

 zoom: 1

}

.flexslider .slides li {

 width: 100%

 height: 100%

}

.flex-direction-nav a {

 width: 70px

 height: 70px

 line-height: 99em

 overflow: hidden

 margin: -35px 0 0

 display: block

 background: url(images/ad_ctr.png) no-repeat

 position: absolute

 top: 50%

 z-index: 10

 cursor: pointer

 opacity: 0

 filter: alpha(opacity=0)

 -webkit-transition: all .3s ease

 border-radius: 35px

}

.flex-direction-nav .flex-next {

 background-position: 0 -70px

 right: 0

}

.flex-direction-nav .flex-prev {

 left: 0

}

.flexslider:hover .flex-next {

 opacity: 0.8

 filter: alpha(opacity=25)

}

.flexslider:hover .flex-prev {

 opacity: 0.8

 filter: alpha(opacity=25)

}

.flexslider:hover .flex-next:hover,

.flexslider:hover .flex-prev:hover {

 opacity: 1

 filter: alpha(opacity=50)

}

.flex-control-nav {

 width: 100%

 position: absolute

 bottom: 10px

 text-align: center

}

.flex-control-nav li {

 margin: 0 2px

 display: inline-block

 zoom: 1

 *display: inline

}

.flex-control-paging li a {

 background: url(images/dot.png) no-repeat 0 -16px

 display: block

 height: 16px

 overflow: hidden

 text-indent: -99em

 width: 16px

 cursor: pointer

}

.flex-control-paging li a.flex-active,

.flex-control-paging li.active a {

 background-position: 0 0

}

.flexslider .slides a img {

 width: 100%

 height: 482px

 display: block

}

</style>

</head>

<body>

<br/><br/><br/>

<!-- 轮播广告 -->

<div id="banner_tabs" class="flexslider">

 <ul class="slides">

  <li>

   <a title="" target="_blank" href="#">

    <img width="1920" height="482" alt="" style="background: url(images/banner1.jpg) no-repeat center" src="images/alpha.png">

   </a>

  </li>

  <li>

   <a title="" href="#">

    <img width="1920" height="482" alt="" style="background: url(images/banner2.jpg) no-repeat center" src="images/alpha.png">

   </a>

  </li>

  <li>

   <a title="" href="#">

    <img width="1920" height="482" alt="" style="background: url(images/banner3.jpg) no-repeat center" src="images/alpha.png">

   </a>

  </li>

 </ul>

 <ul class="flex-direction-nav">

  <li><a class="flex-prev" href="javascript:">Previous</a></li>

  <li><a class="flex-next" href="javascript:">Next</a></li>

 </ul>

 <ol id="bannerCtrl" class="flex-control-nav flex-control-paging">

  <li><a>1</a></li>

  <li><a>2</a></li>

  <li><a>2</a></li>

 </ol>

</div>

<script src="js/jquery-1.10.2.min.js"></script>

<script src="js/slider.js"></script>

<script type="text/javascript">

$(function() {

 var bannerSlider = new Slider($('#banner_tabs'), {

  time: 5000,

  delay: 400,

  event: 'hover',

  auto: true,

  mode: 'fade',

  controller: $('#bannerCtrl'),

  activeControllerCls: 'active'

 })

 $('#banner_tabs .flex-prev').click(function() {

  bannerSlider.prev()

 })

 $('#banner_tabs .flex-next').click(function() {

  bannerSlider.next()

 })

})

</script>

</body>

</html>

<div class="skin-box-bd clear-fix">

<span><DIV class=J_TWidget data-widget-type="Tabs"

data-widget-config="{'effect': 'fade', 'circular': true ,'navCls':'toseise','activeTriggerCls':'odslos','contentCls':'piaofu'}">

<DIV style="HEIGHT: 550px" class=piaofu>

<DIV

style="Z-INDEX: 0PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-LEFT: 0pxWIDTH: 1920pxPADDING-RIGHT: 0pxTOP: 0pxPADDING-TOP: 0pxLEFT: -485px"

class=J_TWidget data-widget-type="Carousel"

data-widget-config="{ 'contentCls': 'slide-kun1362899830209content', 'triggerCls': 'slide-kun1362899830209triggers', 'navCls': 'slide-kun1362899830209triggers', 'triggerType': 'mouse', 'effect': 'scrollx', 'prevBtnCls':'prev', 'nextBtnCls':'next', 'steps': 1, 'autoplay': true, 'viewSize':[1920], 'circular': true }">

<DIV style="DISPLAY: none" class=J_TWidget data-widget-type="Popup"

data-widget-config="{'trigger':'.first-trigger2','align':{'node':'.first-trigger2','offset':[0,0],'points':['cc','cc']}}">

<DIV style="WIDTH: 90pxFLOAT: leftHEIGHT: 90px" class=prev><IMG

src="左点击"></DIV>

<DIV style="WIDTH: 90pxHEIGHT: 90pxMARGIN-LEFT: 950px" class=next><IMG

src="右点击"></DIV></DIV>

<DIV

style="PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-LEFT: 0pxWIDTH: 1920pxPADDING-RIGHT: 0pxHEIGHT: 570pxOVERFLOW: hiddenPADDING-TOP: 0px"

class=first-trigger2>

<UL

style="PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-LEFT: 0pxWIDTH: 1920pxPADDING-RIGHT: 0pxHEIGHT: 570pxPADDING-TOP: 0px"

class=slide-kun1362899830209content>

<LI

style="PADDING-BOTTOM: 0pxLIST-STYLE-TYPE: noneMARGIN: 0pxPADDING-LEFT: 0pxWIDTH: 1920pxPADDING-RIGHT: 0pxHEIGHT: 570pxPADDING-TOP: 0px"><A

style="PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-LEFT: 0pxPADDING-RIGHT: 0pxPADDING-TOP: 0px"

href="链接网站地址" target=_blank><IMG border=0

src="大图链接地址" width=1920

height=570></A></LI>

<LI

style="PADDING-BOTTOM: 0pxLIST-STYLE-TYPE: noneMARGIN: 0pxPADDING-LEFT: 0pxWIDTH: 1920pxPADDING-RIGHT: 0pxHEIGHT: 570pxPADDING-TOP: 0px"><A

style="PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-LEFT: 0pxPADDING-RIGHT: 0pxPADDING-TOP: 0px"

href="链接网站地址" target=_blank><IMG border=0

src="大图链接地址" width=1920

height=570></A></LI>

<LI

style="PADDING-BOTTOM: 0pxLIST-STYLE-TYPE: noneMARGIN: 0pxPADDING-LEFT: 0pxWIDTH: 1920pxPADDING-RIGHT: 0pxHEIGHT: 570pxPADDING-TOP: 0px"><A

style="PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-LEFT: 0pxPADDING-RIGHT: 0pxPADDING-TOP: 0px"

href="链接网站地址" target=_blank><IMG border=0

src="大图链接地址" width=1920

height=570></A></LI>

<LI

style="PADDING-BOTTOM: 0pxLIST-STYLE-TYPE: noneMARGIN: 0pxPADDING-LEFT: 0pxWIDTH: 1920pxPADDING-RIGHT: 0pxHEIGHT: 570pxPADDING-TOP: 0px"><A

style="PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-LEFT: 0pxPADDING-RIGHT: 0pxPADDING-TOP: 0px"

href="链接网站地址" target=_blank><IMG border=0

src="大图链接地址" width=1920

height=570></A></LI>

<LI

style="PADDING-BOTTOM: 0pxLIST-STYLE-TYPE: noneMARGIN: 0pxPADDING-LEFT: 0pxWIDTH: 1920pxPADDING-RIGHT: 0pxHEIGHT: 570pxPADDING-TOP: 0px"><A

style="PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-LEFT: 0pxPADDING-RIGHT: 0pxPADDING-TOP: 0px"

href="链接网站地址" target=_blank><IMG border=0

src="大图链接地址" width=1920

height=570></A></LI>

</UL></DIV>

</DIV></DIV></DIV>

</span>

</div>

(function ($) {

/* var i = 2

$(document).ready(function () {

var arry = ['images/headback/001.jpg', 'images/headback/002.jpg', 'images/headback/003.jpg', 'images/headback/004.jpg', 'images/headback/005.jpg', 'images/headback/006.jpg', ]

setInterval(

function () {

$("#div_pic").css("backgroundImage", "url(" + arry[i] + ")")

i++

if (i == 5) {

i = 0

}

}

, 5000)

})定时换背景图片的代码 */

//下面是图片切换代码

/*

var t

var speed = 2//图片切换速度

var nowlan = 0//图片开始时间

function changepic() {

var imglen = $("#div_pic").find("li").length

$("#div_pic").find("li").hide()

$("#div_pic").find("li").eq(nowlan).show()

nowlan = nowlan + 1 == imglen ? 0 : nowlan + 1

t = setTimeout("changepic()", speed * 1000)

}

onload = function () { changepic()}

$(document).ready(function ()

//鼠标在图片上悬停让切换暂停

$("#div_pic").hover(function () { clearInterval(t)})

//鼠标离开图片切换继续

$("#div_pic").mouseleave(function () { changepic()})

})

*/

//下面是图片轮播代码

/* var num = 0

$(function(){

$("#div_pic ol li").mouseover(function(e){

$(this).attr("class","current")

$(this).siblings().attr("class","")//兄弟节点的class属性设置为空

//alert($('ul').index())

num = $('ul').index() + 2

var index = $(this).index()//记录选定的li标签在ul中的索引

//图片会出现层叠现象为了显示当前的图片，把当前的图片的z-index 值设置为大于其他的兄弟元素

$("#div_pic ul li").eq(index).css({"left":"650px","zIndex":num})

$("#div_pic ul li").eq(index).siblings().css("zIndex",num-1)

//动画效果，图片从右侧飞入

$("#div_pic ul li").eq(index).animate({left:"0"},500)

})

})*/

//下面是可配置轮播动画代码

$.fn.slide=function(options){

var defaults= {

affect:1, //1：上下滚动2:幕布式3:左右滚动；4：淡入淡出

time: 5000, //间隔时间

speed:500,//动画快慢

dot_text:true,//按钮上有无序列号

}

var opts=$.extend(defaults,options)

var $this=$(this)

var ool=$("<div class='dot'><p></p></div>")

var $box=$this.find("ul")

var $li=$box.find("li")

var timer=null

var num=0

$this.append(ool)

$box.find("li").each(function(i){

ool.find("p").append($("<b></b>"))

if(opts.dot_text){

ool.find("b").eq(i).html(i+1)

}

})

ool.find("b").eq(0).addClass("cur")

switch(opts.affect){

case 1:

break

case 2:

$box.find("li").css("display","none")

break

case 3:

$box.css({"width":$li.eq(0).width()*$li.length})

$li.css("float","left")

break

case 4:

$box.find("li").css("display","none")

break

}

$box.find("li").eq(0).show(0)

ool.find("b").mouseover(function(){

num=$(this).index()

run ()

})

timer=setInterval(auto,opts.time)

function auto(){

num<$box.find("li").length-1?num++:num=0

run()

}

function run(){

ool.find("b").eq(num).addClass("cur").siblings().removeClass("cur")

switch(opts.affect){

case 1:

$box.stop(true,false).animate({"top":-240*num},opts.speed)

break

case 2:

$box.find("li").css({"position":"absolute"})

$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).slideDown(opts.speed)

break

case 3:

$box.stop(true,false).animate({"left":-670*num},opts.speed)

break

case 4:

$box.find("li").css({"position":"absolute"})

$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).fadeIn(opts.speed)

break

}

}

$this.mouseover(function(){

clearInterval(timer)

})

$this.mouseout(function(){

timer=setInterval(auto,opts.time)

})

}

}(jQuery))

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6159489.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
跳蚤市场海报 跳蚤市场海报 一级用户组
0 0
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表（0条）

保存