GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

SLIDESHOW WITH MOUSE WHEEL SCROLLING

SCROLLING SLIDESHOW
SLIDESHOW WITH MOUSE WHEEL SCROLLING
Το παρακάτω slideshow αλλάζει τις εικόνες του εάν πάμε το ποντίκι μας πάνω από αυτές και κάνουμε scrolling το ροδάκι του ποντικιού μας. Θα χρειαστεί να αλλάξετε τα πράσινα links των εικόνων του με δικές σας εικόνες, οι οποίες πρέπει να έχουν όλες την ίδια διάσταση. Το πρώτο γαλάζιο link αφορά την εικόνα που θα εμφανίζεται πρίν ακόμα κάνετε scrolling με το ροδάκι του ποντικιού σας. Ο κώδικας είναι πολύ απλός και μπαίνε απλά σαν gadget ακόμα και μέσα στον κώδικα html της ανάρτησής σας όπως το έχω βάλει εγώ ακριβώς κάτω από εδώ .




<img id="slideshow" src="http://i.imgur.com/Pq9Dexal.jpg" />
<script>
var myimages=[
"http://i.imgur.com/Pq9Dexal.jpg",
"http://i.imgur.com/kbCkBYel.jpg",
"http://i.imgur.com/gCr4ycDl.jpg",
"http://i.imgur.com/JcRaeRSl.jpg",
"http://i.imgur.com/XMS6PHsl.jpg",
"http://i.imgur.com/I9SFA0sl.jpg"]
var slideshow=document.getElementById("slideshow")
var nextslideindex=0
function rotateimage(e){
var evt=window.event || e
var delta=evt.detail? evt.detail*(-100) : evt.wheelDelta
nextslideindex=(delta<=-100)? nextslideindex+1 : nextslideindex-1
nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>
myimages.length-1)? 0 : nextslideindex
slideshow.src=myimages[nextslideindex]
if (evt.preventDefault)
evt.preventDefault()
else
return false}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"
if (slideshow.attachEvent)
slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener)
slideshow.addEventListener(mousewheelevt, rotateimage, false)

</script>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.