使用jQuery实现图片轮播与切换功能

文章目录

使用jQuery实现图片轮播与切换功能
效果图
一、body
二、jQuery
三.css
四.小结

效果图

一、body

<body><div class="d1"><div class="v1"><a  style="color: fuchsia;position: absolute;top: 200px;font-size: 50px;left: 30px;z-index: 1;" href="javascript:leftN('img1',1)"><</a></div><div><img id="img1" src="img/Chrysanthemum.jpg" width="600px" height="400px" style="position: absolute;top: 0px;z-index: 0;"/></div><div class="v2"><a style="color: fuchsia;position: absolute;top: 200px;font-size: 50px;left: 30px;z-index: 1;" href="javascript:leftN('img1',2)">></a></div></div></body>

二、jQuery

<script type="text/javascript" src="jq/js/jquery-1.12.4.js" ></script>
<script>var ii=1;var itval=setInterval('leftN()',3000)function leftN(mid,num){//列表内放置自己的图片路径var les=['img/Chrysanthemum.jpg','img/Desert.jpg','img/Hydrangeas.jpg','img/Jellyfish.jpg','img/Koala.jpg','img/Lighthouse.jpg','img/Penguins.jpg','img/Tulips.jpg'];    var imgs=document.getElementById('img1');if(mid==null){$('#img1').fadeOut(1000,function(){imgs.src=les[ii];});$('#img1').slideDown(500);ii++;if(ii==les.length){ii=0;}}else{if(num==1){var arr2=new Array();var newImg="";for(j=0;j<imgs.src.length;j++){if(j>=36){newImg=newImg+imgs.src[j];}}var Myimg=document.getElementById(mid);var indexs=les.indexOf(newImg);if(indexs==0){alert('这是第一张了！')}else{$('#img1').hide(1000,function(){Myimg.src=les[indexs-1];});$('#img1').slideDown(500);ii=indexs-1;}clearInterval(itval);itval=setInterval('leftN()',3000);}else{var arr2=new Array();var newImg="";for(j=0;j<imgs.src.length;j++){if(j>=36){newImg=newImg+imgs.src[j];}}var Myimg=document.getElementById(mid);var indexs=les.indexOf(newImg);if(indexs==les.length-1){alert('已经是最后一张了！')}else{$('#img1').slideUp(1000,function(){Myimg.src=les[indexs+1];});$('#img1').slideDown(500);ii=indexs-1;}clearInterval(itval);itval=setInterval('leftN()',3000);}}}</script>

三.css

<style>.d1{border: 1px solid red;width: 600px;height: 400px;position: absolute;top: 100px;/*left: 100px;*/}.v1{width: 80px;height: 400px;background-color: mediumaquamarine;display: inline-block;position: absolute;z-index: 1;opacity: 0.5;}.v2{width: 80px;height: 400px;background: mediumaquamarine;position: absolute;top:0px;left: 520px;z-index: 1;opacity: 0.5;}</style>

四.小结

本章由jQuery实现图片轮播与切换功能,一个有趣又实用的功能,感兴趣的小伙伴动手实现吧.
有哪里不足或者有更好的建议,欢迎留言吐槽,有哪里不懂的小伙伴,可以私信我,我会一一答复,感谢认可,感谢支持!

使用jQuery实现图片轮播与切换功能相关推荐

PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
利用jQuery实现图片轮播
利用jQuery实现图片轮播需求实现步骤一.获取相关对象二.设置切换按钮三.设置图片首尾相接效果四.随图片切换更新小圆点五.点击小圆点切换图片六.鼠标无操作时图片自动轮播示例需求 ...
html5图片轮播在线制作教程,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
jquery:手风琴图片轮播
jquery:手风琴图片轮播 html部分: <!DOCTYPE html> <html> <head lang="en"><meta c ...
Jquery 广告图片轮播切换
要点: 1.鼠标移至图片上出现左右箭头,鼠标移出图片时,左右箭头消失 2.单击左右箭头时,显示上一个/下一个图片,当前数字背景为橙色,其他数字背景为#333333,第一个/最后一个图片显示时,单击箭 ...
小博老师演示常用JQuery效果 ——图片轮播
2019独角兽企业重金招聘Python工程师标准>>> [理论知识] 我们在实际开发应用程序的过程中,经常会遇到图片轮播的效果需求,本文小博老师就为大家演示一下,如何使用JQuery ...
html轮播图jquery,原生js和jquery实现图片轮播特效
(1)首先是页面的结构部分对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以 ...

使用jQuery实现图片轮播与切换功能

使用jQuery实现图片轮播与切换功能

文章目录

效果图

一、body

二、jQuery

三.css

四.小结

使用jQuery实现图片轮播与切换功能相关推荐

最新文章

热门文章